/* PM roadmap — the 'new' arm of the roadmap experiment.
 *
 * Scoped under .rm. Unlike the rest of this batch there are no .cp-* names to
 * preserve: the old page loads no script and binds no handler, so the only
 * contract is the #<stage key> anchors the jump strip links to.
 *
 * Colours stated outright — design-system.css styles bare p/h1..h6/a. */

.rm{
  --rm-ink:#0a0a0a; --rm-paper:#fff; --rm-dim:#5c626b; --rm-lab:#6b7280;
  --rm-hair:#e6e6e6; --rm-blue:#1a3aff; --rm-green:#0f7a4a;
  --rm-pad:clamp(20px,5vw,64px);
  background:var(--rm-paper); color:var(--rm-ink);
}
.rm *{box-sizing:border-box}
.rm-in{max-width:1180px;margin:0 auto;padding:0 var(--rm-pad)}

/* hero */
.rm-hero{background:var(--rm-blue);color:#fff;padding:clamp(44px,7vw,84px) 0 0}
.rm-k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.82)}
.rm-h1{font-size:clamp(31px,5.6vw,68px);line-height:1.08;letter-spacing:-.045em;font-weight:800;
  margin:16px 0 0;max-width:17ch;color:#fff}
.rm-lead{font-size:clamp(15px,1.6vw,18px);line-height:1.5;margin:22px 0 0;max-width:60ch;color:rgba(255,255,255,.9)}
.rm-lead b{color:#fff;font-weight:700}
.rm-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.rm-btn{display:inline-block;font-size:13.5px;font-weight:800;text-decoration:none;padding:13px 22px;
  border:2px solid currentColor;border-radius:0;white-space:nowrap;line-height:1.2;cursor:pointer;font-family:inherit}
.rm-btn-solid{background:#fff;color:var(--rm-ink);border-color:#fff}
.rm-btn-solid:hover{background:#f0f0f0;color:var(--rm-ink);text-decoration:none}
.rm-btn-ghost{background:transparent;color:#fff}
.rm-btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
.rm-btn-on{background:var(--rm-ink);color:#fff;border-color:var(--rm-ink)}
.rm-btn-on:hover{background:#252525;color:#fff;text-decoration:none}
.rm-figs{display:grid;grid-template-columns:1fr;border-top:1px solid rgba(255,255,255,.3);margin-top:clamp(32px,5vw,56px)}
@media (min-width:700px){ .rm-figs{grid-template-columns:repeat(3,1fr)} }
.rm-fig{padding:20px 0 22px;border-bottom:1px solid rgba(255,255,255,.16)}
@media (min-width:700px){
  .rm-fig{border-bottom:0;border-left:1px solid rgba(255,255,255,.3);padding-left:24px}
  .rm-fig:first-child{border-left:0;padding-left:0}
}
.rm-fig > b{display:block;font-size:clamp(30px,4.4vw,54px);line-height:.95;font-weight:800;
  letter-spacing:-.045em;color:#fff}
.rm-fig > span{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.78);margin-top:10px}

/* jump strip */
/* Under the header, not behind it. The flat chrome is sticky at top:0 with
   z-index:60, so top:0 here put this strip out of sight — the same mistake
   two other sticky navs made. --cf-h is published by chrome-flat.css. */
.rm-jump{position:sticky;top:var(--cf-h,75px);z-index:30;background:var(--rm-paper);
  border-bottom:2px solid var(--rm-ink)}
/* The nine role names need 1575px and the container caps at 1180px, so this
   strip overflows at EVERY viewport — there is no width at which it fits on
   one line. A permanent right-edge fade is therefore accurate rather than a
   guess, and with the scrollbar hidden it is the only thing telling the reader
   the strip keeps going. Positioned on .rm-jump, not .rm-jump-in, so it does
   not scroll away with the content it is marking. */
/* right is offset to the INNER container's edge, not the nav's. The nav spans
   the viewport while .rm-jump-in caps at 1180px and centres, so a fade at
   right:0 lands on empty margin above 1180px — marking a clip that is 130px
   away from where the content actually cuts off. max() keeps it at 0 below
   that width, where the two edges coincide. */
.rm-jump::after{content:"";position:absolute;top:0;bottom:2px;width:56px;
  right:max(0px,calc((100% - 1180px) / 2));
  pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),var(--rm-paper))}
.rm-jump-in{max-width:1180px;margin:0 auto;display:flex;overflow-x:auto;scrollbar-width:none;
  scroll-padding-left:16px}
.rm-jump-in::-webkit-scrollbar{display:none}
.rm-jump a{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:12px 16px;text-decoration:none;
  color:var(--rm-ink);border-right:1px solid var(--rm-hair);white-space:nowrap}
.rm-jump a:last-child{border-right:0}
.rm-jump a:hover{background:var(--rm-ink);color:#fff;text-decoration:none}
.rm-jump a b{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--rm-blue);color:#fff;font-size:11px;font-weight:800}
.rm-jump a:hover b{background:rgba(255,255,255,.24)}
.rm-jump a span{font-size:12px;font-weight:700;letter-spacing:-.01em}

/* body */
.rm-body{padding:clamp(38px,6vw,72px) 0 0}
.rm-sec{margin-bottom:clamp(42px,6vw,76px)}
.rm-h2{font-size:clamp(24px,3.2vw,40px);line-height:1.1;letter-spacing:-.035em;font-weight:800;margin:0 0 10px;color:var(--rm-ink)}
.rm-sub{font-size:15px;line-height:1.55;color:var(--rm-dim);margin:0 0 26px;max-width:70ch}
.rm-sub b{color:var(--rm-ink)}

/* a stage. scroll-margin so the sticky strip never covers the heading it jumped to */
.rm-stage{border-top:2px solid var(--rm-ink);padding:26px 0 30px;scroll-margin-top:calc(var(--cf-h,75px) + 62px)}
.rm-stage-top{display:flex;align-items:flex-start;gap:15px;flex-wrap:wrap}
.rm-stage-n{flex:0 0 auto;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--rm-ink);color:#fff;font-size:14px;font-weight:800}
.rm-stage-id{flex:1 1 260px;min-width:0}
.rm-stage-role{margin:0;font-size:clamp(19px,2.3vw,27px);font-weight:800;letter-spacing:-.03em;
  line-height:1.2;color:var(--rm-ink)}
.rm-stage-focus{margin:7px 0 0;font-size:14.5px;line-height:1.55;color:var(--rm-dim);max-width:64ch}
.rm-stage-time{flex:0 0 auto;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--rm-lab);border:1px solid var(--rm-hair);padding:5px 10px}

.rm-cols{display:grid;grid-template-columns:1fr;gap:22px;margin-top:22px}
@media (min-width:760px){ .rm-cols{grid-template-columns:1fr 1fr;gap:32px} }
.rm-col-k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--rm-lab);margin-bottom:10px}
.rm-col-k-proof{color:var(--rm-green)}
.rm-list{margin:0;padding-left:17px;display:grid;gap:7px}
.rm-list li{font-size:14px;line-height:1.5;color:var(--rm-dim)}
.rm-list a{color:var(--rm-blue);font-weight:700;text-decoration:none}
.rm-list a:hover{text-decoration:underline;text-underline-offset:3px}

.rm-people{margin-top:22px;padding-top:18px;border-top:1px solid var(--rm-hair)}
.rm-courses{margin-top:22px;padding-top:18px;border-top:1px solid var(--rm-hair)}
.rm-course-row{display:flex;gap:8px;flex-wrap:wrap}
.rm-course-row a{font-size:12.5px;font-weight:700;text-decoration:none;color:var(--rm-ink);
  border:1px solid var(--rm-ink);padding:8px 13px}
.rm-course-row a:hover{background:var(--rm-ink);color:#fff;text-decoration:none}

/* panel */
.rm-panel{border:2px solid var(--rm-ink);padding:24px 26px;display:flex;gap:22px;align-items:center;
  justify-content:space-between;flex-wrap:wrap}
.rm-panel-cta{border-left-width:10px;border-left-color:var(--rm-blue)}
.rm-panel-k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--rm-lab)}
.rm-panel-t{font-size:clamp(19px,2.2vw,26px);font-weight:800;letter-spacing:-.03em;line-height:1.2;
  margin:8px 0 0;color:var(--rm-ink)}
.rm-panel-p{font-size:14px;line-height:1.55;color:var(--rm-dim);margin:9px 0 0;max-width:64ch}

/* matrix */
.rm-matrix{display:grid;grid-template-columns:1fr;border:2px solid var(--rm-ink)}
@media (min-width:700px){ .rm-matrix{grid-template-columns:1fr 1fr} }
@media (min-width:1060px){ .rm-matrix{grid-template-columns:repeat(4,1fr)} }
.rm-matrix-c{border-bottom:1px solid var(--rm-hair);padding:18px 20px}
.rm-matrix-c:last-child{border-bottom:0}
@media (min-width:700px){
  .rm-matrix-c{border-right:1px solid var(--rm-hair)}
  .rm-matrix-c:nth-child(2n){border-right:0}
}
@media (min-width:1060px){
  .rm-matrix-c{border-right:1px solid var(--rm-hair)}
  .rm-matrix-c:nth-child(2n){border-right:1px solid var(--rm-hair)}
  .rm-matrix-c:last-child{border-right:0}
}
.rm-matrix-h{font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--rm-ink);
  padding-bottom:10px;margin-bottom:12px;border-bottom:2px solid var(--rm-ink)}
.rm-matrix-s{display:grid;gap:8px}
.rm-matrix-s span{font-size:13px;line-height:1.45;color:var(--rm-dim)}
.rm-matrix-s a{color:var(--rm-blue);font-weight:700;text-decoration:none}
.rm-matrix-s a:hover{text-decoration:underline;text-underline-offset:3px}

/* what next */
.rm-next{display:grid;grid-template-columns:1fr;border:2px solid var(--rm-ink)}
@media (min-width:820px){ .rm-next{grid-template-columns:repeat(3,1fr)} }
.rm-next-c{display:block;padding:20px 22px;text-decoration:none;color:var(--rm-ink);border-bottom:1px solid var(--rm-hair)}
.rm-next-c:last-child{border-bottom:0}
@media (min-width:820px){
  .rm-next-c{border-right:1px solid var(--rm-hair);border-bottom:0}
  .rm-next-c:last-child{border-right:0}
}
.rm-next-c:hover{background:#f6f6f6;text-decoration:none;color:var(--rm-ink)}
.rm-next-c b{display:block;font-size:15px;font-weight:800;letter-spacing:-.015em}
.rm-next-c span{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:var(--rm-dim)}

/* closing strip */
.rm-strip{background:var(--rm-green);color:#fff;padding:clamp(34px,5vw,60px) 0}
.rm-strip-in{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.rm-strip-t{font-size:clamp(20px,2.6vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:0;color:#fff}
.rm-strip-s{font-size:14.5px;line-height:1.55;margin:9px 0 0;color:rgba(255,255,255,.9);max-width:62ch}
.rm-strip .rm-btn-on{background:#fff;color:var(--rm-ink);border-color:#fff}
.rm-strip .rm-btn-on:hover{background:#eee;color:var(--rm-ink)}