/* Product roadmap on a dark panel (includes/visuals/roadmap.php) */
.rm { --rm-gap: 20px; }
.rm-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--rm-gap); grid-template-rows: auto auto 12px auto auto; }
.rm-stage { display: grid; grid-template-rows: subgrid; grid-row: 1 / 6; min-width: 0; }
.rm-head { grid-row: 2; margin: 0 0 12px; display: grid; gap: 4px; }
.rm-num { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--green); }
.rm-name { font-family: var(--font-serif); font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--white); }

/* the track: one segment per stage, lit in sequence */
.rm-seg { grid-row: 3; position: relative; display: block; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.rm-seg::before { content: ""; position: absolute; inset: 0; border-radius: 6px; background: var(--green); }

/* deliverables */
.rm-deliv { grid-row: 4; margin-top: 16px; }
.rm-deliv-t { margin: 0 0 6px; }
.rm-stage:not(.rm-stage--1) .rm-deliv-t { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.rm-stage--1 .rm-deliv { margin-top: 12px; }
.rm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.rm-list li { position: relative; padding-left: 14px; }
.rm-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 2px; background: var(--green); }

/* feedback loop above the track, from "feedback" back to the MVP */
.rm-loop { grid-row: 1; position: relative; width: calc(100% + var(--rm-gap)); margin: 0 0 10px calc(-50% - var(--rm-gap)); text-align: center; font-size: 12.5px; line-height: 1.3; color: var(--green); }
.rm-loop-arc { display: block; height: 22px; margin: 6px 0 0; border: 2px dashed var(--green); border-bottom: 0; border-radius: 16px 16px 0 0; position: relative; }
.rm-loop-arc::before { content: ""; position: absolute; left: -6px; bottom: -1px; width: 10px; height: 10px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }

/* the thin checkpoint line under the stages */
.rm-chk { grid-row: 5; position: relative; margin-top: 22px; padding-top: 36px; border-top: 1px dashed rgba(255, 255, 255, .35); }
.rm-dia { position: absolute; top: -6px; left: 0; width: 11px; height: 11px; transform: rotate(45deg); border: 1.5px solid var(--green); background: var(--forest); }
.rm-check-t { position: absolute; left: 0; top: 13px; margin: 0; white-space: nowrap; }
.rm-chk-l { display: none; }
.rm-q { margin: 0; font-size: 13.5px; line-height: 1.45; font-style: italic; color: rgba(255, 255, 255, .88); }

/* intro: stages light up one after the other (segment fills, texts brighten, diamond fills); the loop last */
.js .vz-figure .rm-seg::before { transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .rm-head, .js .vz-figure .rm-deliv, .js .vz-figure .rm-q { opacity: .3; transition: opacity .6s ease; }
.js .vz-figure .rm-dia { transition: background-color .4s ease; }
.js .vz-figure .rm-stage--1 > * { transition-delay: .2s; }
.js .vz-figure .rm-stage--2 > * { transition-delay: .7s; }
.js .vz-figure .rm-stage--3 > * { transition-delay: 1.2s; }
.js .vz-figure .rm-stage--4 > * { transition-delay: 1.7s; }
.js .vz-figure .rm-stage--5 > * { transition-delay: 2.2s; }
.js .vz-figure .rm-stage--1 .rm-seg::before, .js .vz-figure .rm-stage--1 .rm-chk .rm-dia { transition-delay: .3s; }
.js .vz-figure .rm-stage--2 .rm-seg::before, .js .vz-figure .rm-stage--2 .rm-chk .rm-dia { transition-delay: .8s; }
.js .vz-figure .rm-stage--3 .rm-seg::before, .js .vz-figure .rm-stage--3 .rm-chk .rm-dia { transition-delay: 1.3s; }
.js .vz-figure .rm-stage--4 .rm-seg::before, .js .vz-figure .rm-stage--4 .rm-chk .rm-dia { transition-delay: 1.8s; }
.js .vz-figure .rm-stage--5 .rm-seg::before, .js .vz-figure .rm-stage--5 .rm-chk .rm-dia { transition-delay: 2.3s; }
.js .vz-figure .rm-chk .rm-q { transition-delay: inherit; }
.js .vz-figure .rm-loop { opacity: 0; transition: opacity .6s ease; transition-delay: 2.7s; }
.js .vz-figure.is-visible .rm-seg::before { transform: none; }
.js .vz-figure.is-visible .rm-head, .js .vz-figure.is-visible .rm-deliv, .js .vz-figure.is-visible .rm-q, .js .vz-figure.is-visible .rm-loop { opacity: 1; }
.js .vz-figure.is-visible .rm-dia { background: var(--green); }

/* phones: the stages stack, each with a short segment and its own labels */
@media (max-width: 719px) {
  .rm-stages { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 26px; }
  .rm-stage { display: block; grid-row: auto; }
  .rm-head { margin-bottom: 8px; }
  .rm-seg { width: 72px; height: 8px; }
  .rm-deliv, .rm-stage--1 .rm-deliv { margin-top: 12px; }
  .rm-stage:not(.rm-stage--1) .rm-deliv-t { position: static; width: auto; height: auto; margin: 0 0 6px; overflow: visible; clip: auto; white-space: normal; }
  .rm-loop { width: auto; margin: 12px 0 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px dashed var(--green); border-radius: 999px; font-weight: 600; }
  .rm-loop-arc { width: 12px; height: 8px; margin: 0; border-width: 1.5px; border-radius: 8px 8px 0 0; }
  .rm-loop-arc::before { width: 6px; height: 6px; left: -3px; bottom: -2px; border-width: 1.5px; }
  .rm-chk { margin-top: 14px; padding-top: 12px; }
  .rm-dia { top: -6px; }
  .rm-check-t { display: none; }
  .rm-chk-l { display: block; margin: 0 0 4px; }
}