/* ============================================================
   70 — ROADMAP.  Scroll-driven stage rail.
   Owned by roadmap-builder. All rules scoped to the section.
   ============================================================ */

[data-section="roadmap"] {
  --rm-t: 0;                 /* draw progress 0 → 1, written by js/roadmap.js */
  --rm-rail-h: 116px;        /* seven stages: labels get two lines more often */
  --rm-x0: 5%;               /* rail start, matches svg x=50/1000  */
  --rm-xs: 90%;              /* rail span,  matches svg 50 → 950   */
  --rm-stages: 7;
  --rm-hold: 56vh;           /* scroll each stage owns while pinned */
  --rm-top: calc(var(--hdr-h-min, 60px) + 1.1rem);   /* pin line, clear of the fixed header */
  position: relative;
  /* NOT overflow:hidden — that would make this a scroll container and kill
     the sticky rail. `clip` contains the same overflow without one. */
  overflow-x: clip;
}

/* a cold wash so the band separates from its neighbours */
[data-section="roadmap"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(63, 224, 208, 0.055), transparent 62%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 55%);
  pointer-events: none;
}
[data-section="roadmap"] > .wrap { position: relative; }

/* ---- status → accent. one source of truth for the whole section ---- */
[data-section="roadmap"] [data-status="built"]    { --acc: var(--cy); }
[data-section="roadmap"] [data-status="progress"] { --acc: var(--am); }
[data-section="roadmap"] [data-status="next"]     { --acc: var(--mg); }
[data-section="roadmap"] [data-status="planned"]  { --acc: var(--vi); }

/* ---------------------------------------------------------------- */
/* intro                                                            */
/* ---------------------------------------------------------------- */

/* The deck column is sized to the measure it actually wants, so the legend
   starts one gutter later instead of one gutter plus 200px of slack. */
[data-section="roadmap"] .rm-intro {
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  column-gap: clamp(1.75rem, 3.4vw, 3.25rem);
  row-gap: 1.1rem;
  align-items: start;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

[data-section="roadmap"] .rm-deck {
  grid-column: 1;
  font-size: clamp(1rem, 1.24vw, 1.15rem);
  line-height: 1.62;
  color: var(--ink-80);
}

[data-section="roadmap"] .rm-key {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.4rem;
  align-content: start;
  padding: 1.05rem 1.25rem;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip-both);
}
[data-section="roadmap"] .rm-key li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.055em;
  color: var(--ink-60);
}
[data-section="roadmap"] .rm-key .rm-dot { flex: none; }

[data-section="roadmap"] .rm-caveat {
  grid-column: 1;
  align-self: start;
  color: var(--ink-60);
  letter-spacing: 0.13em;
  padding-top: 0.2rem;
  border-top: 1px solid var(--line);
  max-width: 46ch;
}

/* ---------------------------------------------------------------- */
/* the status glyph — encodes status independently of the rail       */
/* ---------------------------------------------------------------- */

[data-section="roadmap"] .rm-dot {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--acc);
  background: transparent;
}
[data-section="roadmap"] .rm-dot[data-status="built"]    { background: var(--acc); }
[data-section="roadmap"] .rm-dot[data-status="progress"] {
  background: linear-gradient(90deg, var(--acc) 0 50%, transparent 50%);
}
[data-section="roadmap"] .rm-dot[data-status="next"]::before {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--acc);
}
[data-section="roadmap"] .rm-dot[data-status="planned"] {
  border-style: dashed;
  opacity: 0.8;
}

/* ---------------------------------------------------------------- */
/* the machine: a scroll track with a pinned stage                   */
/* ---------------------------------------------------------------- */

[data-section="roadmap"] .rm-machine { position: relative; }

/* Rail + panels pin together beneath the header, so the control that is
   driving the change is on screen for every one of the seven stages. */
[data-section="roadmap"] .rm-stage {
  position: sticky;
  top: var(--rm-top);
  z-index: 1;
}

/* The scroll length the pin consumes: one hold per stage. This is the only
   thing that decides pacing — 7 x 56vh, so no stage is ever a wheel notch. */
/* Gated on .is-ready (set by js/app.js on boot): with JS off nothing drives
   the stages, so the runway would be 3500px of dead scroll under a pinned
   panel that never changes. No JS, no runway, no pin. */
[data-section="roadmap"] .rm-runway {
  height: 0;
  pointer-events: none;
}
.is-ready [data-section="roadmap"] .rm-runway {
  height: calc(var(--rm-stages) * var(--rm-hold));
}

/* ---------------------------------------------------------------- */
/* the rail                                                         */
/* ---------------------------------------------------------------- */

[data-section="roadmap"] .rm-rail {
  position: relative;
  height: var(--rm-rail-h);
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

[data-section="roadmap"] .rm-line {
  position: absolute;
  top: 12px;
  left: 0;
  width: 100%;
  height: 24px;
  overflow: visible;
}
[data-section="roadmap"] .rm-line-base {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1.25;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}
[data-section="roadmap"] .rm-line-hot {
  fill: none;
  stroke: url(#rmHot);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: calc(900 * (1 - var(--rm-t)));
}

/* the ignition head that rides the draw front */
[data-section="roadmap"] .rm-head {
  position: absolute;
  top: 24px;
  left: calc(var(--rm-x0) + var(--rm-xs) * var(--rm-t));
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(63, 224, 208, 0.75), 0 0 26px 8px rgba(63, 224, 208, 0.3);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
[data-section="roadmap"].is-drawing .rm-head { opacity: 1; }

/* ---- nodes ---- */

[data-section="roadmap"] .rm-nodes { position: absolute; inset: 0; }

[data-section="roadmap"] .rm-node {
  position: absolute;
  top: 0;
  left: var(--x);
  width: 14%;   /* seven nodes, 15% apart — 1% of breathing room between labels */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 16px 0 0;
  text-align: center;
  opacity: 0.6;
  transition: opacity 0.5s var(--ease);
}
[data-section="roadmap"] .rm-node.is-lit    { opacity: 0.9; }
[data-section="roadmap"] .rm-node.is-active { opacity: 1; }
[data-section="roadmap"] .rm-node:hover     { opacity: 1; }

[data-section="roadmap"] .rm-node .rm-dot {
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* the halo that ignites */
[data-section="roadmap"] .rm-node .rm-dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid var(--acc);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
[data-section="roadmap"] .rm-node.is-lit .rm-dot::after { opacity: 0.45; transform: scale(1); }
[data-section="roadmap"] .rm-node.is-active .rm-dot {
  transform: scale(1.22);
  box-shadow: 0 0 16px 2px var(--acc);
}
[data-section="roadmap"] .rm-node.is-active .rm-dot::after { opacity: 1; transform: scale(1.18); }

[data-section="roadmap"] .rm-nlabel {
  font-family: var(--f-mono);
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  line-height: 1.25;
  color: var(--ink-80);
}
[data-section="roadmap"] .rm-node.is-active .rm-nlabel { color: var(--ink); }

[data-section="roadmap"] .rm-nstat {
  font-family: var(--f-mono);
  font-size: 0.645rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--acc);
}
/* --vi at this size sits near 4.2:1 and dissolves at 2x — lift the two
   dark accents rather than dimming the label that carries the honesty. */
[data-section="roadmap"] [data-status="planned"] .rm-nstat { color: #A99BFF; }
[data-section="roadmap"] [data-status="next"] .rm-nstat    { color: #FF6BA5; }

/* the active node hangs a hairline down toward its panel */
[data-section="roadmap"] .rm-node::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg, var(--acc), transparent);
  transition: height 0.5s var(--ease);
}
[data-section="roadmap"] .rm-node.is-active::after { height: 18px; }

/* ---------------------------------------------------------------- */
/* panels — all six occupy one grid cell, so nothing jumps           */
/* ---------------------------------------------------------------- */

/* Height is driven to the ACTIVE panel by js/roadmap.js — stacking seven
   panels in one cell otherwise leaves every short stage sitting above 300-400px
   of nothing, because the container is permanently as tall as stage 01. */
[data-section="roadmap"] .rm-panels {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
  height: var(--rm-ph, auto);
  overflow: hidden;
  transition: height 0.55s var(--ease);
}

[data-section="roadmap"] .rm-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  column-gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 0.5s var(--ease),
    transform 0.6s var(--ease),
    visibility 0s linear 0.5s;
}
[data-section="roadmap"] .rm-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}

[data-section="roadmap"] .rm-idx {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink-60);
  margin-bottom: 0.85rem;
}
[data-section="roadmap"] .rm-idx .rm-mdot { display: none; }

[data-section="roadmap"] .rm-title {
  font-size: clamp(1.35rem, 2.15vw, 2.05rem);
  line-height: 1.06;
  margin-bottom: 1rem;
  max-width: 18ch;
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.72));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-section="roadmap"] .rm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.42em 0.95em;
  margin-bottom: 1.1rem;
  font-family: var(--f-mono);
  font-size: 0.665rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--acc);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px var(--acc);
  clip-path: var(--clip-both);
  --notch: 7px;
}
[data-section="roadmap"] .rm-chip span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 8px 1px var(--acc);
}

[data-section="roadmap"] .rm-body {
  color: var(--ink-60);
  max-width: 44ch;
  line-height: 1.68;
}
[data-section="roadmap"] .rm-body em { color: var(--ink-80); font-style: italic; }

[data-section="roadmap"] .rm-list {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.6rem;
  max-width: 44ch;
}
[data-section="roadmap"] .rm-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-80);
}
[data-section="roadmap"] .rm-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 8px;
  height: 1px;
  background: var(--acc);
}

[data-section="roadmap"] .rm-sublabel {
  margin: 1.4rem 0 0.7rem;
  color: var(--ink-60);
}
[data-section="roadmap"] .rm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  max-width: 44ch;
}
[data-section="roadmap"] .rm-tags li {
  font-family: var(--f-mono);
  font-size: 0.685rem;
  letter-spacing: 0.07em;
  padding: 0.33em 0.7em;
  color: var(--ink-80);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ---- figures ---- */

[data-section="roadmap"] .rm-fig { display: grid; gap: 0.7rem; }
[data-section="roadmap"] .rm-fig figcaption { color: var(--ink-60); letter-spacing: 0.13em; }

[data-section="roadmap"] .rm-shot {
  position: relative;
  overflow: hidden;
  background: #04050C;
  box-shadow: inset 0 0 0 1px var(--line);
}
[data-section="roadmap"] .rm-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.05);
}
[data-section="roadmap"] .rm-fig > .rm-shot { aspect-ratio: 16 / 8.4; }
/* scrim + vignette: the capture is soft, so we never sell it as sharp */
[data-section="roadmap"] .rm-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 45%, transparent 42%, rgba(5, 6, 15, 0.62)),
    linear-gradient(180deg, rgba(5, 6, 15, 0.28), transparent 34%);
  box-shadow: inset 0 0 0 1px var(--line);
}
[data-section="roadmap"] .rm-panel.is-active .rm-shot img {
  animation: rm-settle 1.1s var(--ease) both;
}
@keyframes rm-settle {
  from { transform: scale(1.06); opacity: 0.35; }
  to   { transform: scale(1);    opacity: 1; }
}

/* triptych — real captures in stage 01, source renders in stage 06 */
[data-section="roadmap"] .rm-trip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}
[data-section="roadmap"] .rm-trip--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-section="roadmap"] .rm-trip .rm-shot { aspect-ratio: 4 / 3.4; }
[data-section="roadmap"] .rm-trip--duo .rm-shot { aspect-ratio: 16 / 10; }
/* the brightness lift belongs to the near-black Blender renders only — the
   gameplay captures are already exposed, and lifting them blows the gold out */
[data-section="roadmap"] .rm-shot--lift img { filter: saturate(1.1) contrast(1.12) brightness(1.28); }
[data-section="roadmap"] .rm-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.55rem 0.7rem;
  color: var(--ink-80);
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  background: linear-gradient(180deg, transparent, rgba(5, 6, 15, 0.9));
}

/* ---- the two drawn plates (no honest photograph exists) ---- */

[data-section="roadmap"] .rm-plate,
[data-section="roadmap"] .rm-date,
[data-section="roadmap"] .rm-route {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 22px);
  box-shadow: inset 0 0 0 1px var(--line);
}

[data-section="roadmap"] .rm-plate { padding: 1.3rem 1.4rem 1.15rem; }
[data-section="roadmap"] .rm-plate-h { color: var(--acc); letter-spacing: 0.2em; }
[data-section="roadmap"] .rm-plate-f { color: var(--ink-60); padding-top: 0.9rem; letter-spacing: 0.13em; }

[data-section="roadmap"] .rm-fields {
  display: grid;
  gap: 1px;
  margin-top: 1rem;
  background: var(--line);
  box-shadow: 0 0 0 1px var(--line);
}
[data-section="roadmap"] .rm-fields li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.85rem;
  background: #080A16;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-80);
}
[data-section="roadmap"] .rm-fields b {
  font-weight: 600;
  font-size: 0.655rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-60);
}
[data-section="roadmap"] .rm-fields .is-hot { background: rgba(255, 178, 63, 0.07); }
[data-section="roadmap"] .rm-fields .is-hot b { color: var(--acc); }

/* ---- the date card: the trailer's own closing frame, set as chrome ---- */

[data-section="roadmap"] .rm-date {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) 1.4rem clamp(1.3rem, 2.4vw, 1.9rem);
}
/* a slow wash off the accent so the card is lit rather than printed */
[data-section="roadmap"] .rm-date::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 68%);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  [data-section="roadmap"] .rm-date::before { background: radial-gradient(120% 90% at 50% 100%, rgba(255, 61, 139, 0.13), transparent 68%); }
}
[data-section="roadmap"] .rm-date > * { position: relative; }

[data-section="roadmap"] .rm-date-k { color: var(--ink-60); letter-spacing: 0.2em; }
[data-section="roadmap"] .rm-date-lock {
  font-size: clamp(1.05rem, 1.7vw, 1.55rem);
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-top: 0.35rem;
}
[data-section="roadmap"] .rm-date-line {
  color: var(--ink-60);
  letter-spacing: 0.34em;
  text-indent: 0.34em;   /* the trailing tracking would otherwise throw it off-centre */
}
[data-section="roadmap"] .rm-date-due {
  margin-top: 0.9rem;
  padding-top: 1rem;
  width: 100%;
  border-top: 1px solid var(--line);
  color: var(--ink-60);
}
[data-section="roadmap"] .rm-date-big {
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--acc);
  text-shadow: 0 0 34px color-mix(in srgb, var(--acc) 45%, transparent);
}
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  [data-section="roadmap"] .rm-date-big { text-shadow: 0 0 34px rgba(255, 61, 139, 0.45); }
}
[data-section="roadmap"] .rm-date-f {
  margin-top: 0.55rem;
  color: var(--ink-60);
  letter-spacing: 0.16em;
}

[data-section="roadmap"] .rm-route { display: grid; gap: 1px; background: var(--line); }
[data-section="roadmap"] .rm-route li {
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding: 1.05rem 1.3rem 1.1rem 2.4rem;
  background: #080A16;
}
[data-section="roadmap"] .rm-route li::before {
  content: "";
  position: absolute;
  left: 1.3rem;
  top: 1.35rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--acc);
  opacity: 0.5;
}
[data-section="roadmap"] .rm-route li.is-first::before { background: var(--acc); opacity: 1; }
[data-section="roadmap"] .rm-route .micro { color: var(--ink-60); }
[data-section="roadmap"] .rm-route b {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 0.98rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
[data-section="roadmap"] .rm-route-n { font-size: 0.83rem; color: var(--ink-60); }

/* ---------------------------------------------------------------- */
/* 1024 — tighten                                                   */
/* ---------------------------------------------------------------- */

@media (max-width: 1024px) {
  [data-section="roadmap"] { --rm-rail-h: 130px; }
  [data-section="roadmap"] .rm-intro { grid-template-columns: 1fr; }
  [data-section="roadmap"] .rm-key {
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: minmax(0, 1fr);
    max-width: 34rem;
  }
  [data-section="roadmap"] .rm-caveat { grid-column: 1; }
  [data-section="roadmap"] .rm-panel { grid-template-columns: 1fr; row-gap: 1.75rem; }
  [data-section="roadmap"] .rm-nlabel { font-size: 0.71rem; }
  [data-section="roadmap"] .rm-node { width: 14.5%; }
  [data-section="roadmap"] .rm-nstat { font-size: 0.575rem; letter-spacing: 0.13em; }
}

/* ---------------------------------------------------------------- */
/* stacked mode: NARROW SCREENS ONLY.                                */
/* Every stage expanded, static, on a vertical rail.                 */
/* The threshold is 1024, not 860: at 1024 the panel goes             */
/* single-column and grows past 870px, which is taller than a laptop  */
/* viewport — pinning it would put its own tail permanently           */
/* off-screen. Reduced motion used to share this block too, which on  */
/* a 1440 screen deleted the rail and left ~700px of empty right-hand */
/* column — see the desktop reduced-motion block below.               */
/* ---------------------------------------------------------------- */

@media (max-width: 1024px) {

  [data-section="roadmap"] .rm-rail { display: none; }

  [data-section="roadmap"] .rm-panels {
    display: block;
    position: relative;
    border-top: 0;
    padding-top: 0;
    padding-left: 2.35rem;
    height: auto !important;
    overflow: visible;
    transition: none;
  }
  [data-section="roadmap"] .rm-stage { position: static; }
  [data-section="roadmap"] .rm-runway { display: none; }
  /* the vertical rail, drawn once and left drawn */
  [data-section="roadmap"] .rm-panels::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 0.55rem;
    bottom: 2.5rem;
    width: 1px;
    /* seven stops, one per stage, in the order the statuses actually run:
       built · progress · next · next · progress · planned · planned */
    background: linear-gradient(180deg,
      var(--cy) 0%, var(--am) 17%, var(--mg) 33%, var(--mg) 50%,
      var(--am) 67%, var(--vi) 83%, var(--vi) 100%);
    opacity: 0.55;
  }

  [data-section="roadmap"] .rm-panel {
    grid-area: auto;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    padding-bottom: clamp(2.5rem, 6vw, 3.5rem);
  }
  [data-section="roadmap"] .rm-panel + .rm-panel { padding-top: 0; }

  [data-section="roadmap"] .rm-idx .rm-mdot {
    display: inline-block;
    position: absolute;
    left: -2.35rem;
    margin-left: 0.5px;
    background-color: var(--bg);
  }
  [data-section="roadmap"] .rm-idx { position: relative; }
  [data-section="roadmap"] .rm-idx .rm-mdot[data-status="built"] { background-color: var(--acc); }
  [data-section="roadmap"] .rm-idx .rm-mdot[data-status="progress"] {
    background-image: linear-gradient(90deg, var(--acc) 0 50%, var(--bg) 50%);
  }

  [data-section="roadmap"] .rm-title { max-width: 22ch; }
  [data-section="roadmap"] .rm-body,
  [data-section="roadmap"] .rm-list,
  [data-section="roadmap"] .rm-tags { max-width: 62ch; }
  [data-section="roadmap"] .rm-fig { margin-top: 1.4rem; max-width: 760px; }
  [data-section="roadmap"] .rm-panel.is-active .rm-shot img { animation: none; }
}

@media (max-width: 640px) {
  [data-section="roadmap"] .rm-trip,
  [data-section="roadmap"] .rm-trip--duo { grid-template-columns: 1fr; }
  [data-section="roadmap"] .rm-trip .rm-shot,
  [data-section="roadmap"] .rm-trip--duo .rm-shot { aspect-ratio: 16 / 8.4; }
  [data-section="roadmap"] .rm-key { padding: 1rem 1.05rem; }
  [data-section="roadmap"] .rm-key li { font-size: 0.7rem; gap: 0.65rem; }
}

/* ---------------------------------------------------------------- */
/* reduced motion — kill every driven property                       */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* the rail exists, fully drawn, with no draw head riding it */
  [data-section="roadmap"] { --rm-t: 1; }
  [data-section="roadmap"] .rm-head { display: none; }
  /* the 900-unit dash is measured in RENDERED pixels (non-scaling-stroke), so
     leaving it in place stops the stroke ~77% along. No dash: fully drawn. */
  [data-section="roadmap"] .rm-line-hot {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  [data-section="roadmap"] .rm-node { opacity: 1; }
  [data-section="roadmap"] .rm-node::after { display: none; }
  [data-section="roadmap"] .rm-panel.is-active .rm-shot img { animation: none; }
  [data-section="roadmap"] .rm-panels,
  [data-section="roadmap"] .rm-panel,
  [data-section="roadmap"] .rm-node,
  [data-section="roadmap"] .rm-node .rm-dot,
  [data-section="roadmap"] .rm-node .rm-dot::after { transition: none; }
}

/* ---------------------------------------------------------------- */
/* DESKTOP REDUCED MOTION.                                           */
/* Only the motion goes. The horizontal rail stays — drawn, static,   */
/* still teaching the four-way node encoding — and the panels keep    */
/* their two-column shape, expanded down the page in the same way     */
/* the mobile stack does. Nothing is pinned, nothing swaps.           */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) and (min-width: 1025px) {

  [data-section="roadmap"] .rm-stage { position: static; }
  [data-section="roadmap"] .rm-runway { display: none; }

  [data-section="roadmap"] .rm-panels {
    display: block;
    height: auto !important;
    overflow: visible;
  }
  [data-section="roadmap"] .rm-panel {
    grid-area: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding-top: clamp(2rem, 3.6vw, 3rem);
    padding-bottom: clamp(2rem, 3.6vw, 3rem);
  }
  [data-section="roadmap"] .rm-panel + .rm-panel { border-top: 1px solid var(--line); }
  [data-section="roadmap"] .rm-panel:first-child { padding-top: 0; }

  /* the nodes stop being tabs and become jumps — js/roadmap.js rewrites the
     roles to match, so a screen reader is not told about a tabbed widget
     whose panels are all open at once */
  [data-section="roadmap"] .rm-node { cursor: pointer; }
  [data-section="roadmap"] .rm-node:hover .rm-dot { transform: scale(1.15); }
}