/* =====================================================================
   Roadmap page (#roadmap) in the Dusk direction. Content is the October 2026 roadmap,
   unchanged; js/roadmap.js builds it. Everything is scoped under .rm.
   Colour roles: sodium amber marks "now" (phase 1, "we are here", the lit stretch of road) and
   studio green marks done ticks and "live". Nothing else on the road carries a hue: the phase
   groups are told apart by their names (over the road and on each card) and by the rail over
   each group, in the neutral label and rule greys (the Dusk two-accent rule).
   Sections: Page · Hero · Engine card · Stats · Road head · Road (wide) · Phase cards ·
   Footer key · Vertical road (narrow) · Reduced motion
   ===================================================================== */

/* ---------- Page ---------- */
.rm {
    /* neutral group roles: no extra hues next to amber and green */
    --rm-label: var(--c-muted);     /* group names (7.7:1) */
    --rm-rule: var(--c-line-3);     /* station rings, card top rules, group rails and bullets */

    --rm-col: 17.5rem;          /* one phase column on the horizontal road */
    --rm-gap: 20px;
    --rm-node-row: 134px;       /* the row the stations sit in */
    --rm-node-y: 84px;          /* station centre inside that row */
    /* the road runs edge to edge; its padding lines the first card up with the page wrap */
    --rm-pad: max(var(--gutter), calc((100% - var(--wrap)) / 2));
    --rm-fade: max(56px, var(--rm-pad));

    position: relative;
    isolation: isolate;
    overflow-x: clip;
    padding-bottom: clamp(56px, 6vw, 88px);
}

.rm-icon {
    display: block;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Hero ---------- */
.rm-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: var(--sp-page-top) 0 clamp(56px, 6vw, 88px);
}

/* the 2:1 street grid, static, fading out towards the road */
.rm-hero .rm-hero-grid-bg {
    -webkit-mask-image: radial-gradient(ellipse 70% 85% at 72% 30%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 85% at 72% 30%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 78%);
}

/* low sodium light behind the title: light over a still scene */
.rm-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 46% 60% at 14% 34%, rgba(240, 154, 53, 0.075), transparent 72%),
        radial-gradient(ellipse 40% 50% at 82% 40%, rgba(227, 234, 232, 0.025), transparent 70%);
}

.rm-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-template-areas: "head now" "engine now";
    column-gap: clamp(32px, 5vw, 80px);
    row-gap: clamp(32px, 4vw, 44px);
    align-items: end;
}
.rm-hero-head { grid-area: head; }
.rm-engine { grid-area: engine; }
.rm-now { grid-area: now; }

.rm-eyebrow { align-items: flex-start; }
.rm-eyebrow .tile-mark { margin-top: calc(0.6em - 3.5px); }
.rm-eyebrow b { color: var(--c-text); font-weight: 600; white-space: nowrap; }
.rm-eyebrow-dot { margin: 0 0.2em; color: var(--c-muted); }
.rm-nowrap { white-space: nowrap; }

.rm-title {
    margin: 20px 0 0;
    font: 700 clamp(5.5rem, 1.5rem + 9.6vw, 10.5rem)/0.84 var(--f-display);
    letter-spacing: 0.005em;
    color: var(--c-text);
}
.rm-title-word { display: inline-block; white-space: nowrap; }
.rm-title-letter { display: inline-block; }
.js .rm-title-letter {
    animation: rm-letter 0.7s var(--ease-out) both;
    animation-delay: calc(var(--i) * 45ms + 80ms);
}
@keyframes rm-letter {
    from { opacity: 0; transform: translate3d(0, 0.16em, 0); }
    to { opacity: 1; transform: none; }
}

.rm-subtitle {
    margin: 22px 0 0;
    font: 500 clamp(1.375rem, 1.1rem + 1vw, 2rem)/1.2 var(--f-display);
    color: var(--c-body);
}
.rm-subtitle strong {
    color: var(--c-text);
    font-weight: 700;
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}
.rm-subtitle .rm-dot { margin: 0 0.45em; color: var(--c-muted); }

/* ---------- Engine card ---------- */
.rm-engine {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    max-width: 40rem;
    padding: 22px 26px 24px 22px;
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-md);
    background: var(--c-panel);
}
/* one slow pass of warm light when the card first appears, then it stays still */
.rm-engine::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(240, 154, 53, 0.07), transparent);
    transform: translate3d(-110%, 0, 0) skewX(-18deg);
    opacity: 0;
}
.rm-engine.is-in::after { animation: rm-sweep 1.8s var(--ease-out) 0.5s 1 both; }
@keyframes rm-sweep {
    0% { transform: translate3d(-110%, 0, 0) skewX(-18deg); opacity: 1; }
    100% { transform: translate3d(320%, 0, 0) skewX(-18deg); opacity: 1; }
}

.rm-engine-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-line-3);
    background: var(--c-deep);
    color: var(--c-text);
}
.rm-engine-icon .rm-icon { width: 26px; height: 26px; stroke-width: 1.6; }
.rm-engine h2 {
    margin: 2px 0 0;
    font: 600 1.625rem/1.1 var(--f-display);
    color: var(--c-text);
}
.rm-engine p { margin: 8px 0 0; color: var(--c-body); }
.rm-engine .rm-engine-tech { margin-top: 10px; line-height: 2; }
/* on wider cards the line breaks at the middle dot, not inside a phrase */
@media (min-width: 601px) {
    .rm-keep { white-space: nowrap; }
}
/* tech names are words, not values: signage chips, not mono */
.rm-tech {
    display: inline-block;
    padding: 0 8px;
    border: 1px solid var(--c-line-3);
    border-radius: var(--r-chip);
    color: var(--c-text);
    font: 600 0.9375rem/1.55 var(--f-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- Stats: one readout panel ---------- */
.rm-now-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font: 600 1rem/1.2 var(--f-display);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--c-text);
}
.rm-now-dot {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    background: var(--c-amber);
    box-shadow: 0 0 0 4px var(--c-amber-halo);
}

.rm-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-md);
    background: var(--c-panel);
}
.rm-stat {
    position: relative;
    min-width: 0;
    padding: 24px 26px 26px;
}
.rm-stat:nth-child(even) { border-left: 1px solid var(--c-line); }
.rm-stat:nth-child(n + 3) { border-top: 1px solid var(--c-line); }

.rm-stat-icon {
    position: absolute;
    top: 22px;
    right: 22px;
    color: var(--c-muted);
}
.rm-stat-icon .rm-icon { width: 20px; height: 20px; stroke-width: 1.6; }

.rm-stat-value {
    display: flex;
    align-items: baseline;
    margin: 0;
    font: 500 clamp(2.25rem, 1.7rem + 1.4vw, 3rem)/1 var(--f-mono);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--c-text);
}
.rm-stat-value small {
    margin-left: 8px;
    font: 600 1rem/1 var(--f-display);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--c-muted);
}
.rm-stat-text {
    margin: 12px 0 0;
    max-width: 22em;
    color: var(--c-body);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.rm-stat--live .rm-stat-value {
    align-items: center;
    gap: 14px;
    font: 700 clamp(2.25rem, 1.7rem + 1.4vw, 3rem)/1 var(--f-display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-green);
}
.rm-stat--live .rm-stat-icon { color: var(--c-green); }
.rm-live-dot {
    position: relative;
    width: 12px;
    height: 12px;
    flex: none;
    border-radius: 50%;
    background: var(--c-green);
    box-shadow: 0 0 0 4px rgba(39, 202, 63, 0.18);
}
/* two soft pings when the panel appears, then a still halo */
.rm-live-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--c-green);
    opacity: 0;
}
.rm-stat--live.is-in .rm-live-dot::after { animation: rm-ping 2.2s ease-out 0.8s 2 both; }
@keyframes rm-ping {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.8); opacity: 0; }
}

/* reveal: stats and the engine card fade up as they come into view */
.js .rm-in {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 0.6s var(--ease-out) var(--rd, 0ms), transform 0.6s var(--ease-out) var(--rd, 0ms);
}
.js .rm-in.is-in { opacity: 1; transform: none; }

/* ---------- Road head ---------- */
.rm-road-section { position: relative; }

.rm-road-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 40px;
    margin-bottom: clamp(28px, 3vw, 40px);
}
.rm-road-title {
    margin: 0;
    font: 600 var(--fs-h2)/1 var(--f-display);
    color: var(--c-text);
}
.rm-road-sub {
    margin: 14px 0 0;
    max-width: 36em;
    color: var(--c-body);
    font-size: 1.0625rem;
}

.rm-road-nav { display: flex; gap: 8px; }

.rm-road-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--c-line-3);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--c-text);
    cursor: pointer;
    transition: border-color var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out);
}
.rm-road-btn .i { width: 18px; height: 18px; }
.rm-road-btn:hover:not([aria-disabled="true"]) { border-color: var(--c-text); background: var(--c-press); }
/* at either end of the road the button dims but stays focusable (aria-disabled, not disabled),
   so pressing it to the end never drops keyboard focus */
.rm-road-btn[aria-disabled="true"] { cursor: default; color: var(--c-disabled); border-color: var(--c-line); }

/* ---------- Road (wide screens): a horizontal line through seven stations ---------- */
.rm-road {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px var(--rm-pad) 28px;
    scroll-padding-inline: var(--rm-pad);
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--c-line-3) transparent;
    overscroll-behavior-x: contain;
}
.rm-road[tabindex] { cursor: grab; }
.rm-road:focus-visible { outline-offset: -3px; border-radius: var(--r-md); }
.rm-road.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

.rm-road.fade-right {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--rm-fade)), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - var(--rm-fade)), transparent);
}
.rm-road.fade-left {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--rm-fade));
    mask-image: linear-gradient(90deg, transparent, #000 var(--rm-fade));
}
.rm-road.fade-left.fade-right {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--rm-fade), #000 calc(100% - var(--rm-fade)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--rm-fade), #000 calc(100% - var(--rm-fade)), transparent);
}

.rm-track {
    display: grid;
    grid-template-columns: repeat(7, var(--rm-col));
    grid-template-rows: auto var(--rm-node-row) auto;
    column-gap: var(--rm-gap);
    width: max-content;
}

/* group names over their phases, like line names on a transit map */
.rm-groups {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;
}
.rm-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 12px 2px;
    font: 600 0.9375rem/1.2 var(--f-display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rm-label);
}
.rm-group::before {
    /* one 2:1 street tile */
    content: "";
    width: 12px;
    height: 6px;
    flex: none;
    background: var(--rm-rule);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.rm-group::after {
    /* the group's rail: one per group, so the gaps between rails mark where a group ends */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--rm-rule);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s var(--ease-out) var(--rd, 0ms);
}
.rm-road.is-in .rm-group::after { transform: none; }

.rm-group--dev { grid-column: 1 / span 3; }
.rm-group--test { grid-column: 4; }
.rm-group--release { grid-column: 5; }
.rm-group--after { grid-column: 6; }
.rm-group--future { grid-column: 7; }

.rm-phases {
    grid-column: 1 / -1;
    grid-row: 2 / 4;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rm-phase {
    --pc: var(--rm-rule);       /* the station's ring and the card's top rule: neutral, or amber for "now" */
    position: relative;
    grid-row: 1 / 3;
    display: grid;
    grid-template-rows: subgrid;
    min-width: 0;
    scroll-snap-align: start;
}
.rm-phase--now { --pc: var(--c-amber); }

.rm-node-cell { position: relative; }

/* stations */
.rm-node {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: var(--rm-node-y);
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    border: 2px solid var(--pc);
    background: var(--c-bg);
    color: var(--c-body);
}
.rm-node .rm-icon { width: 24px; height: 24px; }
.rm-phase--someday .rm-node { border-style: dashed; }
.rm-phase:hover .rm-node { box-shadow: 0 0 0 5px rgba(227, 234, 232, 0.07); }

/* "now": a lit sodium station with a still halo */
.rm-phase--now .rm-node {
    width: 68px;
    height: 68px;
    margin: -34px 0 0 -34px;
    border-color: var(--c-amber);
    background: var(--c-amber);
    color: var(--c-ink);
    box-shadow: 0 0 0 7px var(--c-amber-halo), 0 0 44px 6px rgba(240, 154, 53, 0.22);
}
.rm-phase--now .rm-node .rm-icon { width: 30px; height: 30px; stroke-width: 2; }
.rm-phase--now:hover .rm-node { box-shadow: 0 0 0 7px var(--c-amber-halo), 0 0 44px 6px rgba(240, 154, 53, 0.22); }

.rm-here {
    position: absolute;
    z-index: 3;
    top: 16px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--c-amber-a);
    border-radius: var(--r-chip);
    background: var(--c-bg);
    color: var(--c-amber);
    font: 700 0.8125rem/1 var(--f-display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);
}
.rm-here::before {
    content: "";
    width: 10px;
    height: 5px;
    flex: none;
    background: var(--c-amber);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* the road between stations: planned stretches are dashed, the stretch we are on is lit */
.rm-seg {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: calc(var(--rm-node-y) - 1px);
    width: calc(100% + var(--rm-gap));
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--c-line-3) 0 7px, transparent 7px 13px);
    transform-origin: left center;
}
.rm-phase--after .rm-seg {
    /* into "someday": dotted */
    background: radial-gradient(circle, var(--c-line-3) 0 1.2px, transparent 1.6px) 0 50% / 9px 2px repeat-x;
}
.rm-phase--now .rm-seg {
    height: 3px;
    top: calc(var(--rm-node-y) - 1.5px);
    border-radius: 2px;
    background: var(--c-amber);
    box-shadow: 0 0 10px rgba(240, 154, 53, 0.35);
}

/* the one ambient loop: a point of sodium light running from "now" to "next" */
.rm-spark {
    position: absolute;
    inset: -9px 0;
    overflow: hidden;
    pointer-events: none;
}
.rm-spark::before {
    /* a warm head with a short tail of light */
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at calc(100% - 9px) 50%, #fff8ec 0 3px, rgba(255, 220, 168, 0.75) 4.5px, rgba(255, 196, 120, 0.22) 7px, rgba(240, 154, 53, 0) 9.5px) no-repeat,
        linear-gradient(90deg, rgba(255, 236, 205, 0), rgba(255, 236, 205, 0.9)) no-repeat right 9px center / 64px 3px;
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
.rm-phase--now.is-in .rm-spark::before { animation: rm-spark-x 6s cubic-bezier(0.45, 0, 0.35, 1) 1.8s infinite; }
@keyframes rm-spark-x {
    0% { transform: translate3d(-100%, 0, 0); opacity: 0; }
    8% { opacity: 1; }
    52% { opacity: 1; }
    60%, 100% { transform: translate3d(0, 0, 0); opacity: 0; }
}
@keyframes rm-spark-y {
    0% { transform: translate3d(0, -100%, 0); opacity: 0; }
    8% { opacity: 1; }
    52% { opacity: 1; }
    60%, 100% { transform: translate3d(0, 0, 0); opacity: 0; }
}
.rm.is-offscreen .rm-spark::before,
.rm.is-hidden-tab .rm-spark::before { animation-play-state: paused; }

/* reveal per phase: the station lights, the card rises, the road draws on to the next stop */
.js .rm-node {
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.5s var(--ease-out) calc(var(--rd, 0ms) + 100ms), transform 0.6s var(--ease-out) calc(var(--rd, 0ms) + 100ms), box-shadow var(--t-ui) var(--ease-out);
}
.js .rm-phase.is-in .rm-node { opacity: 1; transform: none; }
.js .rm-seg {
    transform: scaleX(0);
    transition: transform 0.9s var(--ease-out) calc(var(--rd, 0ms) + 350ms);
}
.js .rm-phase.is-in .rm-seg { transform: none; }

/* ---------- Phase cards ---------- */
.rm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 26px 22px 20px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-panel);
    transition: border-color var(--t-ui) var(--ease-out);
}
.js .rm-card {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 0.6s var(--ease-out) var(--rd, 0ms), transform 0.6s var(--ease-out) var(--rd, 0ms), border-color var(--t-ui) var(--ease-out);
}
.js .rm-phase.is-in .rm-card { opacity: 1; transform: none; }
.rm-phase:hover .rm-card { border-color: var(--c-line-3); }

/* a rule along the top: neutral, amber on the active phase */
.rm-card::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    height: 2px;
    border-radius: var(--r-md) var(--r-md) 0 0;
    background: var(--pc);
}
.rm-phase--now .rm-card,
.rm-phase--now:hover .rm-card { border-color: var(--c-amber-a); }
.rm-phase--now .rm-card::before { height: 3px; }
.rm-phase--someday .rm-card { border-style: dashed; border-color: var(--c-line-2); background: transparent; }
.rm-phase--someday:hover .rm-card { border-color: var(--c-line-3); }
.rm-phase--someday .rm-card::before {
    left: 0;
    right: 0;
    background: repeating-linear-gradient(90deg, var(--pc) 0 8px, transparent 8px 14px);
}

.rm-card-kicker {
    margin: 0;
    font: 600 0.875rem/1.2 var(--f-display);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--c-muted);
}
.rm-card-kicker .mono { font-size: 0.8125rem; font-weight: 500; color: var(--c-text); }
.rm-card-group { color: var(--rm-label); }
.rm-card-group::before { content: "\00b7"; margin: 0 0.5em; color: var(--c-muted); }

.rm-card h3 {
    margin: 10px 0 0;
    font: 600 1.625rem/1.05 var(--f-display);
    color: var(--c-text);
}
.rm-card-sub {
    margin: 6px 0 0;
    font: 600 0.9375rem/1.2 var(--f-display);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--c-body);
}
.rm-card-desc {
    margin: 14px 0 0;
    color: var(--c-text);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.rm-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 0;
    font: 600 0.8125rem/1.2 var(--f-display);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--c-muted);
}
.rm-section-label::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }

.rm-list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.rm-section-label + .rm-list { margin-top: 8px; }
.rm-list li {
    position: relative;
    break-inside: avoid;
    padding: 4px 0 4px 22px;
    color: var(--c-body);
    font-size: 0.9375rem;
    line-height: 1.45;
}
.rm-list li::before {
    /* a 2:1 street tile */
    content: "";
    position: absolute;
    left: 2px;
    top: calc(4px + 0.725em - 2.5px);
    width: 10px;
    height: 5px;
    background: var(--rm-rule);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.rm-list .rm-secret { color: var(--c-muted); font-style: italic; }
.rm-list .rm-secret::before { background: transparent; }

/* phase 1: done ticks (studio green, drawn in) and the one item still in progress (amber) */
.rm-checks li { padding-left: 28px; color: var(--c-text); }
.rm-checks li::before { display: none; }
.rm-check,
.rm-wip {
    position: absolute;
    left: 0;
    top: calc(4px + 0.725em - 9px);
    width: 18px;
    height: 18px;
}
.rm-check circle { fill: var(--c-green); }
.rm-check path {
    fill: none;
    stroke: #03140a;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.js .rm-checks .rm-check path {
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
    transition: stroke-dashoffset 0.45s var(--ease-out);
    transition-delay: calc(var(--i) * 90ms + 450ms);
}
.js .rm-checks.is-in .rm-check path { stroke-dashoffset: 0; }
.rm-wip circle { fill: none; stroke: var(--c-amber); stroke-width: 2; }
.rm-wip path { fill: var(--c-amber); }
.rm-checks .rm-wip-item { color: var(--c-amber); }

.rm-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 24px;
}
.rm-version { font-size: 0.875rem; color: var(--c-body); }

/* ---------- Footer key ---------- */
.rm-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    margin-top: clamp(28px, 3vw, 40px);
    padding-top: 24px;
    border-top: 1px solid var(--c-line);
    color: var(--c-muted);
    font-size: 0.9375rem;
}
.rm-foot-brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    color: var(--c-text);
    font: 600 1.0625rem/1.2 var(--f-display);
    letter-spacing: 0.02em;
}
.rm-foot-brand b { font-weight: 600; }
.rm-foot-meta {
    color: var(--c-muted);
    font: 400 0.9375rem/1.2 var(--f-text);
    letter-spacing: 0;
}
.rm-foot-cube { display: block; width: 22px; height: 22px; flex: none; }
.rm-foot-cube svg { width: 100%; height: auto; }

.rm-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--c-body);
}
.rm-legend li { display: flex; align-items: center; gap: 9px; }
.rm-legend .rm-check,
.rm-legend .rm-wip { position: static; width: 16px; height: 16px; }

.rm-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 32px;
    width: 100%;
}
.rm-notes p { margin: 0; }
.rm-notes .mono { color: var(--c-body); font-size: 0.875rem; }

/* ---------- Medium screens: the hero stacks ---------- */
@media (max-width: 960px) {
    .rm-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head" "engine" "now";
    }
    .rm-engine, .rm-now { max-width: 44rem; }
}

/* ---------- Narrow screens: the road turns into a vertical line ---------- */
@media (max-width: 1023px) {
    .rm {
        --rm-rail: 52px;
        --rm-ny: 40px;          /* station centre from the top of its phase */
    }

    .rm-road {
        overflow: visible;
        padding: 4px var(--rm-pad) 0;
    }
    .rm-road.fade-left,
    .rm-road.fade-right {
        -webkit-mask-image: none;
        mask-image: none;
    }
    .rm-track { display: block; width: auto; }
    .rm-groups { display: none; }
    .rm-phases { display: block; }

    .rm-phase {
        --pt: 0px;
        --pb: 20px;
        display: grid;
        grid-template-columns: var(--rm-rail) minmax(0, 1fr);
        grid-template-rows: auto;
        column-gap: 16px;
        padding: var(--pt) 0 var(--pb);
    }
    .rm-phase--now { --pt: 42px; }
    .rm-phase:last-child { --pb: 0px; }

    .rm-node-cell { position: static; grid-column: 1; grid-row: 1; }
    .rm-card { grid-column: 2; grid-row: 1; }

    .rm-node {
        left: calc(var(--rm-rail) / 2);
        top: calc(var(--pt) + var(--rm-ny));
        width: 44px;
        height: 44px;
        margin: -22px 0 0 -22px;
    }
    .rm-node .rm-icon { width: 20px; height: 20px; }
    .rm-phase--now .rm-node { width: 52px; height: 52px; margin: -26px 0 0 -26px; box-shadow: 0 0 0 6px var(--c-amber-halo), 0 0 30px 4px rgba(240, 154, 53, 0.2); }
    .rm-phase--now .rm-node .rm-icon { width: 24px; height: 24px; }

    .rm-here {
        top: 4px;
        left: calc(var(--rm-rail) + 16px);
        transform: none;
    }

    .rm-seg,
    .rm-phase--now .rm-seg {
        left: calc(var(--rm-rail) / 2 - 1px);
        top: calc(var(--pt) + var(--rm-ny));
        bottom: calc(-1 * (var(--pb) + var(--rm-ny)));
        width: 2px;
        height: auto;
        background: repeating-linear-gradient(180deg, var(--c-line-3) 0 7px, transparent 7px 13px);
        transform-origin: center top;
    }
    .rm-phase--after .rm-seg {
        background: radial-gradient(circle, var(--c-line-3) 0 1.2px, transparent 1.6px) 50% 0 / 2px 9px repeat-y;
    }
    .rm-phase--now .rm-seg {
        left: calc(var(--rm-rail) / 2 - 1.5px);
        width: 3px;
        background: var(--c-amber);
    }
    .js .rm-seg { transform: scaleY(0); }
    .js .rm-phase.is-in .rm-seg { transform: none; }

    .rm-spark { inset: 0 -9px; }
    .rm-spark::before {
        background:
            radial-gradient(circle at 50% calc(100% - 9px), #fff8ec 0 3px, rgba(255, 220, 168, 0.75) 4.5px, rgba(255, 196, 120, 0.22) 7px, rgba(240, 154, 53, 0) 9.5px) no-repeat,
            linear-gradient(180deg, rgba(255, 236, 205, 0), rgba(255, 236, 205, 0.9)) no-repeat center bottom 9px / 3px 64px;
        transform: translate3d(0, -100%, 0);
    }
    .rm-phase--now.is-in .rm-spark::before { animation-name: rm-spark-y; }

    .rm-card { padding: 22px 22px 20px; }
    /* items run in two columns when the card is wide enough */
    .rm-list { columns: 2 15em; column-gap: 28px; }
}

@media (max-width: 600px) {
    .rm {
        --rm-rail: 40px;
        --rm-ny: 34px;
    }
    .rm-phase { column-gap: 12px; }
    .rm-node { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
    .rm-node .rm-icon { width: 18px; height: 18px; }
    .rm-phase--now .rm-node { width: 44px; height: 44px; margin: -22px 0 0 -22px; box-shadow: 0 0 0 5px var(--c-amber-halo), 0 0 24px 3px rgba(240, 154, 53, 0.2); }
    .rm-phase--now .rm-node .rm-icon { width: 20px; height: 20px; }
    .rm-here { left: calc(var(--rm-rail) + 12px); }

    .rm-card { padding: 20px 16px 16px; }
    .rm-card h3 { font-size: 1.5rem; }

    .rm-engine { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px; }
    .rm-engine-icon { width: 44px; height: 44px; }
    .rm-engine h2 { font-size: 1.5rem; }

    .rm-stat { padding: 18px 16px 20px; }
    .rm-stat-icon { top: 18px; right: 16px; }
    .rm-stat-icon .rm-icon { width: 18px; height: 18px; }
    .rm-stat-value small { margin-left: 5px; font-size: 0.875rem; }
    .rm-stat-text { margin-top: 10px; font-size: 0.875rem; }

    /* the footer line breaks after the name, so the separator goes */
    .rm-foot-brand { display: grid; grid-template-columns: auto minmax(0, 1fr); }
    .rm-foot-meta { grid-column: 2; }
    .rm-foot-dot { display: none; }
}

@media (max-width: 374px) {
    .rm-stat-icon { display: none; }
}

/* ---------- Reduced motion: everything shown, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
    .js .rm-title-letter { animation: none; }
    .js .rm-in,
    .js .rm-card,
    .js .rm-node,
    .js .rm-seg {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .js .rm-checks .rm-check path { stroke-dashoffset: 0; transition: none; }
    .rm-group::after { transform: none; transition: none; }
    .rm-engine::after,
    .rm-spark,
    .rm-live-dot::after { display: none; }
}