/* /roadmap v2 (30.10, research/design-roadmap-v2.md). One road through the page: label, axis, entries (Resend 3269d3c7). Now, Next and Later differ in form, depth and accent.
   Everything is scoped to .pg--rm / .rm / .rm-*: nothing here touches another page. Colours: tokens only, alphas of tokens. Two local type sizes, §6 of the spec. No blur. */
#scrPage.pg--rm{
  --rm-fs-h1:48px;--rm-lh-h1:56px;--rm-fs-ph:72px;--rm-lh-ph:80px;
  --rm-pad:var(--s-8);--rm-l:272px;--rm-r:80px;--rm-x:calc(var(--rm-l) + var(--rm-r) / 2);
  --rm-stub:calc(var(--rm-lh-ph) / 2);
  gap:var(--gutter);background:none;border-radius:0;overflow:visible;width:100%;max-width:1760px;margin-inline:auto
}

/* ---------- header: the title and the scale ---------- */
.pg--rm>.rm-top{display:grid;grid-template-columns:calc(var(--rm-l) + var(--rm-r)) minmax(0,1fr);gap:0;padding:var(--s-5) var(--rm-pad);background:var(--n-1);border-radius:var(--r-2);box-shadow:none}
.pg--rm>.rm-top h1{flex:none;font-family:var(--f-head);font-size:var(--rm-fs-h1);line-height:var(--rm-lh-h1);font-weight:var(--w-m);letter-spacing:var(--tr-xl);text-wrap:balance}
.rm-sc{position:relative;min-width:0;display:flex;gap:var(--s-1);align-self:center}
.rm-sc__s{min-width:0;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-1) 0;text-align:left;color:var(--t-2);font-family:var(--f)}
.rm-sc__l{display:flex;align-items:baseline;gap:var(--s-2);font-size:var(--fs-14);line-height:var(--lh-14);font-weight:var(--w-m)}
.rm-sc__l>span:last-child{font-weight:var(--w-r);color:var(--t-3)}
.rm-sc__s:hover .rm-sc__l,.rm-sc__s.is-on .rm-sc__l{color:var(--t-1)}
.rm-sc__s:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-1)}
.rm-sc__t{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--s-2)}
.rm-sc__t::before{content:"";position:absolute;left:0;right:0;top:3px;height:2px}
.rm-sc__t i{position:relative;width:var(--s-2);height:var(--s-2);border-radius:var(--r-round);background:var(--n-1)}
.rm-sc__t i::after{content:"";position:absolute;inset:0;border-radius:inherit}
.rm-sc__s--now .rm-sc__t::before{background:var(--a)}
.rm-sc__s--now .rm-sc__t i::after{background:var(--a)}
.rm-sc__s--next .rm-sc__t::before{background:repeating-linear-gradient(90deg,var(--t-3) 0 8px,transparent 8px 14px)}
.rm-sc__s--next .rm-sc__t i::after{box-shadow:inset 0 0 0 2px var(--t-2)}
.rm-sc__s--later .rm-sc__t::before{background:repeating-linear-gradient(90deg,var(--line-strong) 0 2px,transparent 2px 8px)}
.rm-sc__s--later .rm-sc__t i::after{box-shadow:inset 0 0 0 1px var(--t-3)}
.rm-sc__m{position:absolute;left:-8px;bottom:0;width:var(--s-4);height:var(--s-4);margin-bottom:0;border-radius:var(--r-round);background:var(--t-1);box-shadow:0 0 0 4px var(--n-1);pointer-events:none;will-change:transform;transform:translate3d(0,0,0)}

/* ---------- the road ---------- */
.rm{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--n-4) transparent;scroll-padding-top:0}
.rm__w{position:relative;display:flex;flex-direction:column;gap:var(--gutter);min-width:0}
.rm__ph{position:relative;display:grid;grid-template-columns:var(--rm-l) var(--rm-r) minmax(0,1fr);padding:var(--rm-pad);border-radius:var(--r-2);min-width:0}
.rm__hd{grid-column:1/3;grid-row:1;position:sticky;top:var(--rm-pad);align-self:start;z-index:2;display:grid;grid-template-columns:subgrid;min-width:0}
.rm__lb{min-width:0}
.rm__w1{display:flex;align-items:flex-start;gap:var(--s-2);font-family:var(--f-head);font-size:var(--rm-fs-ph);line-height:var(--rm-lh-ph);font-weight:var(--w-m);letter-spacing:var(--tr-xl);margin-left:-3px}
.rm__ct{margin-top:var(--s-3);font-family:var(--f-mono);font-size:var(--fs-14);line-height:var(--lh-14);font-weight:var(--w-r);letter-spacing:0;color:var(--t-2)}
.rm__cap{margin-top:var(--s-1);font-size:var(--fs-16);line-height:var(--lh-16);color:var(--t-body)}
.rm__b{grid-column:3;grid-row:1;display:grid;gap:var(--gutter);min-width:0}

/* the axis: one line per phase, three kinds of line (Hers 7d3715c9) */
.rm__rl{position:absolute;left:calc(var(--rm-pad) + var(--rm-x) - 1px);width:2px;top:0;bottom:calc(-1 * var(--gutter));z-index:1;overflow:hidden;pointer-events:none}
.rm__ph--now .rm__rl{top:calc(var(--rm-pad) + var(--rm-lh-ph) / 2);background:var(--a)}
.rm__ph--next .rm__rl{background:repeating-linear-gradient(180deg,var(--t-3) 0 12px,transparent 12px 20px);background-position:0 8px}
.rm__ph--later .rm__rl{bottom:0;background:repeating-linear-gradient(180deg,var(--t-3) 0 2px,transparent 2px 10px);-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.rm__rl>i{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0 76%,var(--t-1) 100%);transform:translateY(-100%)}
.rm__ph--now.is-live .rm__rl>i{animation:rm-flow 3.6s var(--e-std) infinite}
@keyframes rm-flow{to{transform:translateY(100%)}}

/* nodes shrink along the axis (Clay 8333b544): 40, 24, 16 */
.rm__nd{grid-column:2;justify-self:center;align-self:start;position:relative;display:grid;place-items:center;margin-top:calc((var(--rm-lh-ph) - var(--s-10)) / 2);width:var(--s-10);height:var(--s-10);border-radius:var(--r-round)}
.rm__ph--now .rm__nd{background:var(--n-1);box-shadow:inset 0 0 0 2px var(--a)}
.rm__ph--now .rm__nd>i{width:var(--s-4);height:var(--s-4);border-radius:var(--r-round);background:var(--a)}
.rm__ph--now .rm__nd::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--a);opacity:0}
.rm__ph--now.is-live .rm__nd::before{animation:rm-ping 2.4s var(--e-out) infinite}
.rm__ph--next .rm__nd{margin-top:calc((var(--rm-lh-ph) - var(--s-6)) / 2);width:var(--s-6);height:var(--s-6);background:var(--n-1);box-shadow:inset 0 0 0 2px var(--t-2)}
.rm__ph--next .rm__nd>i{width:var(--s-2);height:var(--s-2);border-radius:var(--r-round);background:var(--t-2)}
.rm__ph--later .rm__nd{margin-top:calc((var(--rm-lh-ph) - var(--s-4)) / 2);width:var(--s-4);height:var(--s-4);background:var(--n-0);box-shadow:inset 0 0 0 2px var(--t-3)}
@keyframes rm-ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.1);opacity:0}}

/* what travels the axis: the reader's place on the road. A dot and a tail; translate only */
.rm__bead{position:absolute;left:calc(var(--rm-pad) + var(--rm-x) - 5px);top:0;z-index:3;width:10px;height:10px;margin-top:-5px;border-radius:var(--r-round);background:var(--t-1);box-shadow:0 0 0 3px var(--n-0);pointer-events:none;will-change:transform;transform:translate3d(0,0,0)}
.rm__bead::before{content:"";position:absolute;left:4px;bottom:100%;width:2px;height:88px;background:linear-gradient(180deg,transparent,var(--t-1));transition:opacity var(--d-3) var(--e-std)}
.rm__bead.is-top::before{opacity:0}   /* at rest on the Now node there is no road behind it */

/* a bracket from the axis to the first block of a row (Uniswap Cup 46156b44) */
.rm__i{position:relative;min-width:0}
.rm__i::before{content:"";position:absolute;right:100%;top:var(--rm-stub);width:calc(var(--rm-r) / 2);height:1px;z-index:1;transform-origin:left center}
.rm__i::after{content:"";position:absolute;left:-3px;top:calc(var(--rm-stub) - 2px);width:5px;height:5px;border-radius:var(--r-round);z-index:1}

/* shared type of a line */
.rm__h{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2) var(--s-3);min-width:0}
.rm__n{font-family:var(--f-head);font-size:var(--fs-20);line-height:var(--lh-20);font-weight:var(--w-m);letter-spacing:var(--tr-l);color:var(--t-1)}
.rm__d{font-size:var(--fs-16);line-height:var(--lh-16);color:var(--t-body);text-wrap:pretty}
.rm__note{margin-top:var(--s-2);font-size:var(--fs-14);line-height:var(--lh-14);color:var(--t-2);text-wrap:pretty}
.rm__ps{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.rm__lg{display:inline-flex;align-items:center;height:var(--s-5);flex:none;color:var(--t-1)}.rm__lg svg,.rm__lg img{display:block;width:auto;height:100%}.rm__lg svg,.rm__lg svg *{fill:currentColor}
.rm__pn{font-size:var(--fs-12);line-height:var(--lh-12);color:var(--t-2);white-space:nowrap}
.rm__tk{display:inline-flex;align-items:center;gap:var(--s-1);height:var(--lh-16);vertical-align:top;white-space:nowrap;color:var(--t-1)}
.rm__tk img,.rm__tk .tk{flex:none}.rm__tk .tk{width:var(--tk-m);height:var(--tk-m)}.rm__tk .tk b{font-size:0;line-height:0}
.rm__nw{white-space:nowrap}
.rm__tile{flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:var(--r-2)}
.rm__tile .ico{width:36px;height:36px;stroke-width:1.25}
.rm__when{display:inline-flex;align-items:center;gap:var(--s-2);height:var(--s-6);padding:0 var(--s-2);border-radius:var(--r-1);background:var(--a-tint);color:var(--a);font-family:var(--f-mono);font-size:var(--fs-12);line-height:var(--lh-12);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.rm__when>i{position:relative;width:6px;height:6px;border-radius:var(--r-round);background:var(--a)}
.rm__when>i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--a);opacity:0}
.is-live .rm__when>i::after{animation:rm-ping 2.4s var(--e-out) infinite}
.rm-a{color:var(--a)}

/* ---------- NOW: a lit panel, solid cards, a scene in each. The board's 2 px stage line on top ---------- */
.rm__ph--now{background:radial-gradient(90% 120% at 0 0,var(--a-tint),transparent 62%),var(--n-1);box-shadow:inset 0 2px 0 var(--a)}
.rm__ph--now .rm__b{grid-template-columns:repeat(3,minmax(0,1fr))}
.rm__i--now{display:flex;flex-direction:column;background:var(--n-2);border-radius:var(--r-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.rm__i--now::before{background:var(--a)}.rm__i--now::after{background:var(--a)}
.rm__i--now .rm__tx{padding:var(--s-5) var(--s-6) var(--s-6)}
.rm__i--now .rm__d{margin-top:var(--s-2)}
.rm__i--now:nth-child(n+3)::before,.rm__i--now:nth-child(n+3)::after{display:none}
.rm__i--now:nth-child(2){--rm-stub:74px}
.rm__i--hero{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:248px}
.rm__i--hero .rm__tx{display:flex;flex-direction:column;padding:var(--s-6)}
.rm__tp{display:flex;align-items:center;gap:var(--s-4);min-width:0}
.rm__i--hero .rm__tile{background:var(--a-tint);box-shadow:inset 0 0 0 1px var(--a-tint)}
.rm__i--hero .rm__tile .ico{width:40px;height:40px;stroke-width:1.15}
.rm__i--hero .rm__n{font-size:var(--fs-24);line-height:var(--lh-24)}
.rm__i--hero .rm__ps{flex:none;margin-left:auto}
.rm__i--hero .rm__lg,.rm__i--next .rm__lg{height:var(--s-6)}
.rm__i--hero .rm__d{margin-top:var(--s-5);font-size:var(--fs-20);line-height:var(--lh-20);color:var(--t-1);letter-spacing:var(--tr-l);text-wrap:balance}
.rm__i--hero .rm__note{margin-top:auto;padding-top:var(--s-3)}

/* a scene: a dotted plate (Index e88523e4) with the moving layers on top */
.rm-art{position:relative;overflow:hidden;min-height:148px;border-radius:var(--r-2) var(--r-2) 0 0;background-image:radial-gradient(circle at 1px 1px,var(--line-strong) 1px,transparent 0);background-size:var(--s-4) var(--s-4);background-position:-1px -1px;box-shadow:inset 0 -1px 0 var(--line-strong)}
.rm__i--hero .rm-art{min-height:100%;border-radius:0 var(--r-2) var(--r-2) 0;box-shadow:inset 1px 0 0 var(--line-strong)}
.rm-f{position:absolute;left:50%;top:50%;width:280px;height:148px;margin:-74px 0 0 -140px}
.rm-f .ico{stroke-width:1.5}

/* perps */
.rm-pf{position:absolute;right:var(--s-8);bottom:0}
.rm-pf__c{position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 46%);mask-image:linear-gradient(90deg,transparent,#000 46%)}
.rm-pf__c .u{fill:var(--up);stroke:var(--up)}.rm-pf__c .d{fill:var(--down);stroke:var(--down)}
.rm-pf__c path{stroke-width:1;fill:none}.rm-pf__c rect{stroke:none}
.rm-pf__m{position:absolute;left:0;right:calc(-1 * var(--s-8));height:1px;background:repeating-linear-gradient(90deg,var(--a) 0 4px,transparent 4px 8px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%)}
.rm-pf__l{position:absolute;background:var(--up);transform-origin:center top}
.is-live .rm-pf__l{animation:rm-candle 2.8s var(--e-std) infinite alternate}
.rm-pf__p{position:absolute;width:var(--s-3);height:var(--s-3);margin:-6px 0 0 -6px;border-radius:var(--r-round);background:var(--a)}
.rm-pf__p::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--a);opacity:0}
.is-live .rm-pf__p::after{animation:rm-ping 2.4s var(--e-out) infinite}
@keyframes rm-candle{from{transform:scaleY(.55)}to{transform:scaleY(1)}}

/* perks: the coin and what it opens */
.rm-orb{position:absolute;left:50%;top:50%;border-radius:var(--r-round);border:1px dashed var(--line-strong)}
.rm-orb--o{width:136px;height:136px;margin:-68px 0 0 -68px}
.rm-orb--i{width:96px;height:96px;margin:-48px 0 0 -48px;border:1px solid var(--line)}
.rm-orb__r{position:absolute;left:50%;top:50%;width:136px;height:136px;margin:-68px 0 0 -68px}
.is-live .rm-orb__r,.is-live .rm-sat>span{animation:rm-spin 28s linear infinite}
.is-live .rm-sat>span{animation-direction:reverse}
.rm-sat{position:absolute;width:var(--s-10);height:var(--s-10);margin:-20px 0 0 -20px}
.rm-sat>span{display:grid;place-items:center;width:100%;height:100%;border-radius:var(--r-round);background:var(--n-3);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--a)}
.rm-sat .ico{width:var(--s-5);height:var(--s-5)}
.rm-sat--a{left:0;top:50%}.rm-sat--b{left:100%;top:50%}
.rm-coin{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px}
@keyframes rm-spin{to{transform:rotate(1turn)}}

/* smart: wallets → Watcher → the bell */
.rm-w{position:absolute;height:1px;background:var(--line-strong);overflow:hidden;transform-origin:left center}
.rm-w--0{left:16px;top:30px;width:102px;transform:rotate(25.6deg)}
.rm-w--1{left:16px;top:74px;width:92px}
.rm-w--2{left:16px;top:118px;width:102px;transform:rotate(-25.6deg)}
.rm-w--3{left:172px;top:74px;width:72px}
.rm-w>i{position:absolute;left:0;top:0;width:var(--s-5);height:1px;background:var(--a);transform:translateX(-24px)}
.is-live .rm-w>i{animation:rm-run 2.4s var(--e-std) infinite}
.is-live .rm-w--1>i{animation-delay:.3s}.is-live .rm-w--2>i{animation-delay:.6s}.is-live .rm-w--3>i{animation-delay:1s}
@keyframes rm-run{to{transform:translateX(104px)}}
.rm-wl{position:absolute;left:0;width:var(--s-8);height:var(--s-8);margin-top:-16px;display:grid;place-items:center;border-radius:var(--r-round);background:var(--n-3);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--t-body)}
.rm-wl .ico{width:var(--s-4);height:var(--s-4)}
.rm-wl--0{top:30px}.rm-wl--1{top:74px}.rm-wl--2{top:118px}
.rm-hub{position:absolute;left:108px;top:42px;width:64px;height:64px;display:grid;place-items:center;border-radius:var(--r-round);background:var(--n-2);box-shadow:inset 0 0 0 1px var(--a)}
.rm-hub>.ico{width:var(--s-10);height:var(--s-10);stroke-width:1.1}
.rm-ring{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--a);opacity:0}
.is-live .rm-ring{animation:rm-ping 2.8s var(--e-out) infinite}.is-live .rm-ring--2{animation-delay:1.4s}
.rm-bell{position:absolute;left:240px;top:54px;width:var(--s-10);height:var(--s-10);display:grid;place-items:center;border-radius:var(--r-round);background:var(--a);color:var(--on-a)}
.rm-bell .ico{width:var(--s-5);height:var(--s-5);stroke-width:1.75}

/* burn: the flame and its ledger */
.rm-fl{position:absolute;left:0;top:42px;width:64px;height:64px;display:grid;place-items:center;border-radius:var(--r-2);background:var(--a-tint)}
.rm-fl>.ico{position:relative;width:var(--s-10);height:var(--s-10);stroke-width:1.1}
.rm-fl__f{position:absolute;left:12px;top:12px;width:var(--s-10);height:var(--s-10);fill:var(--a);opacity:.28}
.is-live .rm-fl__f{animation:rm-flick 1.7s ease-in-out infinite alternate}
@keyframes rm-flick{from{opacity:.12;transform:scale(.94)}to{opacity:.42;transform:scale(1)}}
.rm-lg{position:absolute;left:80px;top:18px;width:200px;height:112px;padding:var(--s-2) var(--s-3);overflow:hidden;border-radius:var(--r-1);background:var(--n-1);box-shadow:inset 0 0 0 1px var(--line-strong);display:flex;flex-direction:column;justify-content:space-between}
.rm-lg__r{position:relative;display:flex;align-items:center;gap:var(--s-2);height:20px}
.rm-lg__r b{height:var(--s-1);border-radius:var(--s-px);background:var(--line-strong)}
.rm-lg__r .ico{margin-left:auto;width:var(--s-4);height:var(--s-4);color:var(--t-2)}
.rm-lg__s{position:absolute;left:0;right:0;top:0;height:32px;background:linear-gradient(180deg,transparent,var(--a-tint));opacity:0}
.is-live .rm-lg__s{animation:rm-scan 3.2s var(--e-std) infinite}
@keyframes rm-scan{0%{transform:translateY(-32px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(112px);opacity:0}}

/* ---------- NEXT: an unlit panel, outlined cards, the icon in a tile ---------- */
.rm__ph--next{background:var(--n-1);box-shadow:inset 0 2px 0 var(--line-strong)}
.rm__ph--next .rm__w1{color:var(--t-body)}
.rm__ph--next .rm__b{grid-template-columns:repeat(6,minmax(0,1fr))}
.rm__i--next{grid-column:span 2;padding:var(--s-6);border-radius:var(--r-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.rm__i--next:nth-child(n+4){grid-column:span 3}
.rm__i--next::before{background:var(--t-3)}.rm__i--next::after{background:var(--t-2)}
.rm__i--next:nth-child(4){--rm-stub:60px}
.rm__i--next:not(:nth-child(1)):not(:nth-child(4))::before,.rm__i--next:not(:nth-child(1)):not(:nth-child(4))::after{display:none}
.rm__i--next .rm__tile{background:var(--n-3);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--t-1)}
.rm__hg{display:flex;flex-direction:column;gap:var(--s-2);min-width:0;min-height:72px}
.rm__i--next .rm__tx{margin-top:var(--s-4)}

/* ---------- LATER: no panel, no cards, a dashed edge; the road fades out ---------- */
.rm__ph--later{box-shadow:none;outline:1px dashed var(--line-strong);outline-offset:-1px}
.rm__ph--later .rm__w1{color:var(--t-3)}
.rm__ph--later .rm__cap{color:var(--t-2)}
.rm__ph--later .rm__b{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0;row-gap:var(--s-6);align-content:start}
.rm__i--later{padding:var(--s-1) var(--s-6)}
.rm__i--later+.rm__i--later{box-shadow:inset 1px 0 0 var(--line)}
.rm__i--later:first-child{padding-left:var(--s-6)}
.rm__i--later::before{background:repeating-linear-gradient(90deg,var(--t-3) 0 2px,transparent 2px 6px)}.rm__i--later::after{background:var(--t-3)}
.rm__i--later:not(:first-child)::before,.rm__i--later:not(:first-child)::after{display:none}
.rm__i--later .rm__tp{justify-content:space-between;height:var(--s-10)}
.rm__i--later .rm__tp>.ico{width:var(--s-10);height:var(--s-10);stroke-width:1.1;color:var(--t-2)}
.rm__i--later .rm__lg{color:var(--t-2)}
.rm__i--later .rm__tx{margin-top:var(--s-4)}
.rm__i--later .rm__n{font-size:var(--fs-16);line-height:var(--lh-16);color:var(--t-body);letter-spacing:var(--tr)}
.rm__i--later .rm__d{margin-top:var(--s-1);font-size:var(--fs-14);line-height:var(--lh-14);color:var(--t-2)}
.rm__i--later .rm__note{font-size:var(--fs-12);line-height:var(--lh-12)}
.rm__i--later .rm__tk{height:var(--lh-14)}.rm__i--later .rm__tk .tk,.rm__i--later .rm__tk img{width:var(--tk-s);height:var(--tk-s)}
.rm__end{grid-column:1/-1;margin-left:var(--s-6);padding-top:var(--s-4);box-shadow:inset 0 1px 0 var(--line);font-size:var(--fs-14);line-height:var(--lh-14);color:var(--t-2)}

/* ---------- appear: opacity only on a block, nothing arrives from anywhere (rule «ничего не плывёт») ---------- */
.rm--m [data-r]{opacity:0;transition:opacity 560ms var(--e-out) calc(var(--i,0) * 70ms)}
.rm--m [data-r].is-in{opacity:1}
.rm--m [data-r]::before{transform:scaleX(0);transition:transform 420ms var(--e-out) calc(var(--i,0) * 70ms + 120ms)}
.rm--m [data-r].is-in::before{transform:none}
.rm--m .rm-f,.rm--m .rm__tile>.ico,.rm--m .rm__i--later .rm__tp>.ico{transform:scale(.92);transition:transform 620ms var(--e-out) calc(var(--i,0) * 70ms + 60ms)}
.rm--m .is-in .rm-f,.rm--m .is-in .rm__tile>.ico,.rm--m .rm__i--later.is-in .rm__tp>.ico{transform:none}

/* ---------- widths ---------- */
@media (min-width:1280px) and (max-width:1439px){#scrPage.pg--rm{--rm-l:216px;--rm-r:64px}}
@media (min-width:1600px){#scrPage.pg--rm{--rm-l:320px;--rm-r:96px}}
@media (min-width:768px) and (max-width:1279px){
  #scrPage.pg--rm{--rm-pad:var(--s-6);--rm-l:0px;--rm-r:var(--s-12);--rm-x:calc(var(--rm-r) / 2);--rm-stub:60px;--rm-fs-ph:56px;--rm-lh-ph:64px}
  .rm__i--now:nth-child(2),.rm__i--next:nth-child(4){--rm-stub:60px}
  .rm__i--later{--rm-stub:20px}
  .pg--rm>.rm-top{grid-template-columns:auto minmax(0,1fr);column-gap:var(--s-10)}
  .rm__ph{grid-template-columns:var(--rm-r) minmax(0,1fr);row-gap:var(--s-6)}
  .rm__hd{grid-column:1/-1;position:relative;top:0;grid-template-columns:var(--rm-r) minmax(0,1fr)}
  .rm__nd{grid-column:1;grid-row:1}.rm__lb{grid-column:2;grid-row:1}
  .rm__ph--now .rm__nd{width:var(--s-8);height:var(--s-8);margin-top:calc((var(--rm-lh-ph) - var(--s-8)) / 2)}
  .rm__ph--now .rm__nd>i{width:var(--s-3);height:var(--s-3)}
  .rm__b{grid-column:2;grid-row:2}
  .rm__ph--now .rm__b{grid-template-columns:minmax(0,1fr)}
  .rm__i--now:not(.rm__i--hero){display:grid;grid-template-columns:minmax(0,1fr) 296px;align-items:stretch}
  .rm__i--now:not(.rm__i--hero) .rm-art{order:2;border-radius:0 var(--r-2) var(--r-2) 0;box-shadow:inset 1px 0 0 var(--line-strong)}
  .rm__i--now:not(.rm__i--hero) .rm__tx{order:1;padding:var(--s-6)}
  .rm__ph--next .rm__b{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rm__i--next,.rm__i--next:nth-child(n+4){grid-column:span 1}
  .rm__i--next:last-child{grid-column:1/-1}
  .rm__ph--later .rm__b{grid-template-columns:minmax(0,1fr);row-gap:var(--s-6)}
  .rm__i--later,.rm__i--later:first-child{padding:0}
  .rm__i--later+.rm__i--later{box-shadow:none}
  .rm__i--now:nth-child(n+3)::before,.rm__i--now:nth-child(n+3)::after,.rm__i--next:not(:nth-child(1)):not(:nth-child(4))::before,.rm__i--next:not(:nth-child(1)):not(:nth-child(4))::after{display:block}
  .rm__i--later:not(:first-child)::before,.rm__i--later:not(:first-child)::after{display:block}
  .rm .rm__ph .rm__i--next:nth-child(even)::before,.rm .rm__ph .rm__i--next:nth-child(even)::after{display:none}
  .rm__end{margin-left:0}
}
@media (min-width:768px) and (max-width:1023px){
  .pg--rm>.rm-top{grid-template-columns:minmax(0,1fr);row-gap:var(--s-3)}
}

/* ---------- phone: its own layout, not a smaller desktop. The page scrolls, the scale sticks to the top, the road runs down the left edge and every item is a station on it ---------- */
@media (max-width:767px){
  #scrPage.pg--rm{--rm-fs-h1:40px;--rm-lh-h1:48px;--rm-fs-ph:56px;--rm-lh-ph:64px;--rm-pad:var(--s-3);--rm-l:0px;--rm-r:var(--s-10);--rm-x:calc(var(--rm-r) / 2);--rm-stub:var(--s-8)}
  .pg--rm>.rm-top{display:contents}
  .app:has(#scrPage.pg--rm){overflow:clip}   /* the scale sticks to the window; overflow:hidden on .app would make .app its scrollport */
  .pg--rm>.rm-top h1{padding:var(--s-2) var(--s-2) 0}
  .rm-sc{position:sticky;top:0;z-index:var(--z-sticky);flex:none;align-self:stretch;margin:0 calc(-1 * var(--gutter));padding:var(--s-1) var(--s-4);background:var(--n-0);box-shadow:inset 0 -1px 0 var(--line)}
  .rm-sc__s{min-height:var(--h-touch);justify-content:center;gap:var(--s-1)}
  .rm-sc__m{bottom:var(--s-2);box-shadow:0 0 0 3px var(--n-0)}
  .pg--rm .pg__b{overflow:visible;flex:none;container-type:normal}
  .rm__ph{grid-template-columns:var(--rm-r) minmax(0,1fr);row-gap:var(--s-5)}
  .rm__hd{grid-column:1/-1;position:relative;top:0;grid-template-columns:var(--rm-r) minmax(0,1fr)}
  .rm__nd{grid-column:1;grid-row:1}.rm__lb{grid-column:2;grid-row:1;min-width:0}
  .rm__nd{justify-self:center}
  .rm__ph--now .rm__nd{width:28px;height:28px;margin-top:calc((var(--rm-lh-ph) - 28px) / 2)}
  .rm__ph--now .rm__nd>i{width:var(--s-3);height:var(--s-3)}
  .rm__ct{margin-top:var(--s-2)}
  .rm__b{grid-column:2;grid-row:2}
  .rm__ph--now .rm__b,.rm__ph--next .rm__b,.rm__ph--later .rm__b{grid-template-columns:minmax(0,1fr)}
  .rm__i::before{width:calc(var(--rm-r) / 2)}
  .rm__i--now:nth-child(n+3)::before,.rm__i--now:nth-child(n+3)::after,.rm__i--next:not(:nth-child(1)):not(:nth-child(4))::before,.rm__i--next:not(:nth-child(1)):not(:nth-child(4))::after,.rm__i--later:not(:first-child)::before,.rm__i--later:not(:first-child)::after{display:block}
  .rm__i--now,.rm__i--now:nth-child(2){--rm-stub:74px}
  .rm__i--hero{--rm-stub:84px;display:flex;flex-direction:column;min-height:0}
  .rm__i--hero .rm-art{order:-1;flex:none;min-height:168px;border-radius:var(--r-2) var(--r-2) 0 0;box-shadow:inset 0 -1px 0 var(--line-strong)}
  .rm-pf{right:var(--s-5);transform:scale(.66);transform-origin:right bottom}
  .rm-pf__m{right:calc(-1 * var(--s-8))}
  .rm__i--hero .rm__tx{padding:var(--s-5)}
  .rm__i--hero .rm__tile{width:56px;height:56px}
  .rm__i--hero .rm__tile .ico{width:32px;height:32px}
  .rm__i--hero .rm__tp{gap:var(--s-3);align-items:flex-start}
  .rm__i--hero .rm__n{font-size:var(--fs-20);line-height:var(--lh-20)}
  .rm__i--hero .rm__h{flex-direction:column;align-items:flex-start;gap:var(--s-1)}
  .rm__i--hero .rm__lg{height:var(--s-5)}
  .rm__i--hero .rm__d{margin-top:var(--s-4)}
  .rm__i--hero .rm__note{margin-top:var(--s-3);padding-top:0}
  .rm__i--now .rm__tx{padding:var(--s-4) var(--s-5) var(--s-5)}
  .rm__i--next,.rm__i--next:nth-child(n+4){--rm-stub:44px;grid-column:auto;padding:var(--s-4)}
  .rm__i--next .rm__tp{gap:var(--s-3)}
  .rm__i--next .rm__tile{width:56px;height:56px}.rm__i--next .rm__tile .ico{width:var(--s-8);height:var(--s-8);stroke-width:1.3}
  .rm__hg{min-height:56px;justify-content:center;gap:var(--s-1)}
  .rm__i--next .rm__tx{margin-top:var(--s-3)}
  .rm__i--next .rm__ps{gap:var(--s-2);flex-wrap:wrap}
  .rm__i--later,.rm__i--later:first-child{--rm-stub:var(--s-4);padding:0}
  .rm__i--later+.rm__i--later{box-shadow:none}
  .rm__i--later .rm__tp{height:var(--s-8)}
  .rm__i--later .rm__tp>.ico{width:var(--s-8);height:var(--s-8);stroke-width:1.3}
  .rm__i--later .rm__tx{margin-top:var(--s-2)}
  .rm__ph--later .rm__b{row-gap:var(--s-6)}
  .rm__end{margin-left:0}
  .rm__d{font-size:var(--fs-16);line-height:var(--lh-16)}
}
@media (max-width:359px){.rm__i--next .rm__tile,.rm__i--hero .rm__tile{width:var(--s-12);height:var(--s-12)}.rm__hg{min-height:var(--s-12)}.rm-f{zoom:.82}}

/* under 1280 the Later icon stands on the card edge, so the bracket stops short of it */
@media (max-width:1279px){.rm__i--later::before{right:calc(100% + var(--s-2));width:calc(var(--rm-r) / 2 - var(--s-2))}.rm__i--later::after{left:-11px}}

/* reduced motion: everything is in place from the first frame, nothing loops */
@media (prefers-reduced-motion:reduce){
  .rm__bead,.rm__rl>i{display:none}
  .rm__ph *,.rm__ph *::before,.rm__ph *::after{animation:none!important;transition:none!important}
  .rm-pf__p::after,.rm-ring,.rm__nd::before{opacity:0}
}
@media print{.rm--m [data-r]{opacity:1;transition:none}}