/* ==========================================================================
   How it works: "The journey of a lead"  (pairs with /static/js/journey.js)
   Every rule is scoped under .jr-root and every class starts with jr-.
   Solid colours only; glows come from box-shadow.
   Desktop layout from 960px: road in the centre, stops alternate sides.
   Below 960px: road down the left edge, every card on the right.
   ========================================================================== */

.jr-root {
  --jr-bg: #0b0b0d;
  --jr-card: #141417;
  --jr-inset: #0e0e11;
  --jr-line: #26262b;
  --jr-line2: #34343b;
  --jr-ink: #f4f4f5;
  --jr-ink2: #d4d4d8;
  --jr-mute: #a1a1aa;
  --jr-dim: #71717a;
  --jr-acc: #19E6E3;
  --jr-acc-line: rgba(25, 230, 227, .55);
  --jr-ok: #34d399;
  --jr-warn: #fbbf24;
  --jr-bad: #f87171;
  --jr-gap: clamp(240px, 24vw, 300px);
  --jr-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --jr-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  position: relative;
  color: var(--jr-ink);
  font-family: var(--jr-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Zero-specificity resets (:where) so every jr- class below wins over them. */
:where(.jr-root) *, :where(.jr-root) *::before, :where(.jr-root) *::after { box-sizing: border-box; }
:where(.jr-root) :where(h1, h2, p, ol, ul, li, dl, dt, dd) { margin: 0; padding: 0; }
:where(.jr-root) :where(ol, ul) { list-style: none; }
:where(.jr-root) :where(button) { font: inherit; color: inherit; margin: 0; -webkit-tap-highlight-color: transparent; }
:where(.jr-root) :where(svg) { overflow: visible; }
:where(.jr-root) :where(b) { font-weight: 700; }

/* ---------------------------------------------------------------- buttons */
.jr-root .jr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px;
  border: 1px solid var(--jr-acc); background: var(--jr-acc); color: #0b0b0d;
  font-family: var(--jr-sans); font-size: 15px; font-weight: 700; letter-spacing: -.005em; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.jr-root .jr-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 32px -10px rgba(25, 230, 227, .7); }
.jr-root .jr-btn:active { transform: translateY(0); }
.jr-root .jr-btn:focus-visible { outline: 2px solid var(--jr-ink); outline-offset: 3px; }
.jr-root .jr-btn .jr-ui { width: 17px; height: 17px; }
.jr-root .jr-btn-ghost { background: transparent; color: var(--jr-ink); border-color: var(--jr-line2); }
.jr-root .jr-btn-ghost:hover { border-color: var(--jr-ink); box-shadow: none; }
.jr-root .jr-ui { width: 18px; height: 18px; display: block; flex: none; }

/* -------------------------------------------------------------------- hero */
.jr-root .jr-hero {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 56px; align-items: center; padding: 48px 0 88px;
}
.jr-root .jr-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--jr-mono); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--jr-mute);
}
.jr-root .jr-kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jr-acc); box-shadow: 0 0 12px 1px rgba(25, 230, 227, .75); }
.jr-root .jr-h1 {
  margin-top: 20px; font-size: clamp(42px, 6.2vw, 76px); line-height: 1; letter-spacing: -.045em;
  font-weight: 800; color: var(--jr-ink); text-wrap: balance;
}
.jr-root .jr-h1 em { font-style: normal; color: var(--jr-acc); }
.jr-root .jr-lede { margin-top: 26px; max-width: 33em; font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.6; color: var(--jr-ink2); }

.jr-root .jr-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.jr-root .jr-chips:empty { display: none; }
.jr-root .jr-chip {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  min-height: 38px; padding: 8px 16px 8px 13px; border-radius: 999px;
  background: var(--jr-card); border: 1px solid var(--jr-line);
  font-size: 14px; line-height: 1.35; color: var(--jr-ink);
}
.jr-root .jr-chip .jr-ui { width: 15px; height: 15px; color: var(--jr-mute); }
.jr-root .jr-chip-k {
  flex: none; font-family: var(--jr-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--jr-mute);
}
.jr-root .jr-chip-t { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.jr-root .jr-pulse { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--jr-dim); }
.jr-root .jr-engine.jr-st-working .jr-pulse { background: var(--jr-acc); box-shadow: 0 0 10px 1px rgba(25, 230, 227, .8); }
.jr-root .jr-engine.jr-st-idle .jr-pulse { background: var(--jr-ok); box-shadow: 0 0 8px rgba(52, 211, 153, .6); }
.jr-root .jr-engine.jr-st-attention .jr-pulse { background: var(--jr-warn); box-shadow: 0 0 8px rgba(251, 191, 36, .6); }
.jr-root .jr-engine.jr-st-working { border-color: rgba(25, 230, 227, .35); }
.jr-root .jr-engine.jr-st-attention { border-color: rgba(251, 191, 36, .35); }

.jr-root .jr-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; max-width: 640px; }
.jr-root .jr-stat {
  flex: 1 1 128px; max-width: 220px; display: flex; flex-direction: column-reverse; gap: 4px;
  padding: 16px 18px; border-radius: 16px; background: var(--jr-card); border: 1px solid var(--jr-line);
}
.jr-root .jr-stat dd { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--jr-ink); }
.jr-root .jr-stat dt { font-size: 13px; color: var(--jr-mute); }

.jr-root .jr-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 34px; }
.jr-root .jr-hint { font-family: var(--jr-mono); font-size: 12px; letter-spacing: .06em; color: var(--jr-mute); }

/* Route overview card */
.jr-root .jr-map { background: var(--jr-card); border: 1px solid var(--jr-line); border-radius: 26px; padding: 24px 22px 18px; }
.jr-root .jr-map-k {
  display: flex; justify-content: space-between; gap: 12px; padding: 0 4px;
  font-family: var(--jr-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--jr-mute);
}
.jr-root .jr-map-k span + span { color: var(--jr-acc); }
.jr-root .jr-map-l { position: relative; margin-top: 14px; }
.jr-root .jr-map-l::before {
  content: ""; position: absolute; left: 21px; top: 26px; bottom: 26px;
  border-left: 2px dashed var(--jr-line2);
}
.jr-root .jr-map-b {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 9px 10px 9px 4px; border: 0; border-radius: 14px; background: transparent;
  text-align: left; cursor: pointer; transition: background-color .2s ease;
}
.jr-root .jr-map-b:hover { background: #1a1a1e; }
.jr-root .jr-map-b:focus-visible { outline: 2px solid var(--jr-acc); outline-offset: 0; }
.jr-root .jr-map-n {
  position: relative; z-index: 1; flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--jr-bg); border: 1.5px solid var(--jr-line2);
  font-family: var(--jr-mono); font-size: 13px; font-weight: 600; color: var(--jr-ink2);
  transition: border-color .2s ease, color .2s ease;
}
.jr-root .jr-map-b:hover .jr-map-n { border-color: var(--jr-acc); color: var(--jr-acc); }
.jr-root .jr-map-n.jr-map-flag, .jr-root .jr-map-b:hover .jr-map-n.jr-map-flag { background: var(--jr-acc); border-color: var(--jr-acc); color: #0b0b0d; }
.jr-root .jr-map-flag .jr-ui { width: 16px; height: 16px; }
.jr-root .jr-map-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.jr-root .jr-map-t b { font-size: 15px; font-weight: 700; color: var(--jr-ink); }
.jr-root .jr-map-t small { font-size: 12.5px; color: var(--jr-mute); }

/* ------------------------------------------------------------------ track */
.jr-root .jr-journey { position: relative; }
.jr-root .jr-track { position: relative; }
.jr-root .jr-road { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }

.jr-root .jr-road-edge { fill: none; stroke: #1f1f24; stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }
.jr-root .jr-road-bed { fill: none; stroke: #121215; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
.jr-root .jr-road-dash { fill: none; stroke: #3a3a41; stroke-width: 2; stroke-dasharray: 10 14; stroke-linecap: round; }
.jr-root .jr-road-glow { fill: none; stroke: #19E6E3; stroke-width: 18; stroke-opacity: .14; stroke-linecap: butt; }
.jr-root .jr-road-lit { fill: none; stroke: #19E6E3; stroke-width: 6; stroke-linecap: butt; }
.jr-root .jr-road.jr-mob .jr-road-edge { stroke-width: 18; }
.jr-root .jr-road.jr-mob .jr-road-bed { stroke-width: 15; }
.jr-root .jr-road.jr-mob .jr-road-dash { stroke-width: 1.5; stroke-dasharray: 6 9; }
.jr-root .jr-road.jr-mob .jr-road-glow { stroke-width: 12; }
.jr-root .jr-road.jr-mob .jr-road-lit { stroke-width: 4; }

.jr-root .jr-chev { fill: none; stroke: #52525b; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jr-root .jr-chev.jr-lit { stroke: #ffffff; }
.jr-root .jr-road.jr-mob .jr-chev { stroke-width: 1.5; }

.jr-root .jr-link { fill: none; stroke: #2a2a30; stroke-width: 1.5; }
.jr-root .jr-link.jr-active { stroke: #19E6E3; stroke-opacity: .6; }
.jr-root .jr-branch { fill: none; stroke: #45454d; stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.jr-root .jr-branch-head { fill: none; stroke: #5b5b64; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.jr-root .jr-wp-halo { fill: #19E6E3; opacity: 0; }
.jr-root .jr-wp.jr-active .jr-wp-halo { opacity: .2; }
.jr-root .jr-wp-ring { fill: #0b0b0d; stroke: #3f3f46; stroke-width: 2; }
.jr-root .jr-wp-dot { fill: #52525b; }
.jr-root .jr-wp.jr-reached .jr-wp-ring { stroke: #19E6E3; }
.jr-root .jr-wp.jr-reached .jr-wp-dot { fill: #19E6E3; }
.jr-root .jr-wp.jr-active .jr-wp-dot { fill: #ffffff; }
.jr-root .jr-chk-a { fill: #e4e4e7; }
.jr-root .jr-chk-b { fill: #0b0b0d; }

/* Traveller + "You are here" */
.jr-root .jr-trav { position: absolute; left: 0; top: 0; z-index: 5; width: 0; height: 0; pointer-events: none; will-change: transform; }
.jr-root .jr-trav-dot {
  position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--jr-acc); border: 2px solid #0b0b0d;
  box-shadow: 0 0 0 5px rgba(25, 230, 227, .2), 0 0 28px 6px rgba(25, 230, 227, .5);
}
.jr-root .jr-trav-ico { display: block; width: 15px; height: 15px; }
.jr-root .jr-here {
  position: absolute; left: 0; bottom: 26px; transform: translateX(-50%);
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--jr-ink); color: #0b0b0d;
  font-family: var(--jr-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
  transition: opacity .25s ease;
}
.jr-root .jr-here::after {
  content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: var(--jr-ink);
}
.jr-root .jr-trav.jr-idle .jr-here { opacity: 0; }
.jr-root:not(.jr-motion) .jr-trav { display: none; }

/* Start */
.jr-root .jr-start { position: relative; z-index: 3; height: 150px; display: flex; justify-content: center; align-items: flex-start; }
.jr-root .jr-compass {
  width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
  background: var(--jr-bg); border: 1px solid var(--jr-line);
  box-shadow: 0 0 0 6px var(--jr-bg), 0 0 40px -6px rgba(25, 230, 227, .35);
}
.jr-root .jr-rose { width: 62px; height: 62px; display: block; }
.jr-root .jr-start-t {
  position: absolute; left: calc(50% + 58px); top: 18px; max-width: 220px;
  font-family: var(--jr-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; color: var(--jr-mute);
}
.jr-root .jr-start-t b { display: block; font-size: 13px; color: var(--jr-acc); letter-spacing: .12em; }

/* ------------------------------------------------------------------ stops */
.jr-root .jr-stops { position: relative; z-index: 3; }
.jr-root .jr-stop {
  position: relative; display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) var(--jr-gap) minmax(0, 1fr);
  margin-bottom: 104px;
}
.jr-root .jr-stop:last-child { margin-bottom: 72px; }
.jr-root .jr-stop.jr-l .jr-card { grid-column: 1; grid-row: 1; }
.jr-root .jr-stop.jr-l .jr-aside { grid-column: 3; grid-row: 1; }
.jr-root .jr-stop.jr-r .jr-card { grid-column: 3; grid-row: 1; }
.jr-root .jr-stop.jr-r .jr-aside { grid-column: 1; grid-row: 1; align-items: flex-end; }

.jr-root .jr-card {
  position: relative; min-width: 0;
  background: var(--jr-card); border: 1px solid var(--jr-line); border-radius: 24px;
  padding: 26px 28px 24px;
}
.jr-root .jr-stop.jr-active .jr-card {
  border-color: var(--jr-acc-line);
  box-shadow: 0 0 0 1px rgba(25, 230, 227, .22), 0 26px 80px -30px rgba(25, 230, 227, .5);
}
.jr-root .jr-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }

/* Signpost badge: points toward the road */
.jr-root .jr-sign {
  display: inline-flex; align-items: center; height: 27px; padding: 0 17px 0 11px;
  background: #202026; color: var(--jr-acc); border-radius: 5px 0 0 5px;
  font-family: var(--jr-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  -webkit-clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
.jr-root .jr-stop.jr-r .jr-sign {
  padding: 0 11px 0 17px; border-radius: 0 5px 5px 0;
  -webkit-clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}
.jr-root .jr-stop.jr-reached .jr-sign { background: var(--jr-acc); color: #0b0b0d; }
.jr-root .jr-leg { font-family: var(--jr-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--jr-mute); }

.jr-root .jr-head { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.jr-root .jr-ico {
  flex: none; width: 60px; height: 60px; border-radius: 17px; display: grid; place-items: center;
  background: var(--jr-bg); border: 1px solid var(--jr-line); color: var(--jr-ink2);
}
.jr-root .jr-stop.jr-active .jr-ico { border-color: var(--jr-acc-line); box-shadow: 0 0 26px -6px rgba(25, 230, 227, .6); }
.jr-root .jr-ill { width: 38px; height: 38px; display: block; }
.jr-root .jr-ill .jr-a { stroke: var(--jr-acc); }
.jr-root .jr-ill .jr-af { fill: var(--jr-acc); stroke: none; }
.jr-root .jr-ill .jr-af2 { fill: var(--jr-acc); fill-opacity: .28; stroke: none; }
.jr-root .jr-ill .jr-m { stroke: var(--jr-dim); }
.jr-root .jr-ill .jr-mf { fill: var(--jr-dim); stroke: none; }
.jr-root .jr-ill .jr-bgf { fill: var(--jr-bg); }
.jr-root .jr-ill .jr-ink { stroke: #0b0b0d; }

.jr-root .jr-h2 { font-size: clamp(21px, 2vw, 27px); line-height: 1.2; letter-spacing: -.025em; font-weight: 800; color: var(--jr-ink); text-wrap: balance; }
.jr-root .jr-h2:focus { outline: none; }
.jr-root .jr-h2:focus-visible { outline: 2px solid var(--jr-acc); outline-offset: 4px; border-radius: 4px; }
.jr-root .jr-plain { margin-top: 14px; font-size: 16.5px; line-height: 1.65; color: var(--jr-ink2); }

/* Under the hood */
.jr-root .jr-hood { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--jr-line2); }
.jr-root .jr-hood-k {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--jr-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--jr-acc);
}
.jr-root .jr-hood-k::before { content: ""; width: 14px; height: 2px; border-radius: 1px; background: var(--jr-acc); }
.jr-root .jr-hood-t { margin-top: 8px; font-family: var(--jr-mono); font-size: 12.5px; line-height: 1.75; color: var(--jr-mute); overflow-wrap: anywhere; }

/* Live numbers */
.jr-root .jr-live { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.jr-root .jr-live:empty { display: none; }
.jr-root .jr-live-k {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--jr-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--jr-ok);
}
.jr-root .jr-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jr-ok); box-shadow: 0 0 8px rgba(52, 211, 153, .7); }
.jr-root .jr-live-l { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.jr-root .jr-live-i {
  padding: 5px 12px; border-radius: 999px; background: var(--jr-inset); border: 1px solid var(--jr-line);
  font-size: 13.5px; line-height: 1.45; color: var(--jr-mute); overflow-wrap: anywhere;
}
.jr-root .jr-live-i b { color: var(--jr-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Aside: big stop number + exit ramp */
.jr-root .jr-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 4px; min-width: 0; }
/* Outline numerals: the stroke is painted under the fill, so only its outer half shows
   and a glyph's internal overlaps stay hidden. */
.jr-root .jr-big {
  display: block; font-size: clamp(84px, 8.6vw, 128px); line-height: .82; font-weight: 800; letter-spacing: -.02em;
  color: #111114; -webkit-text-stroke: 3px #2e2e35; paint-order: stroke fill;
  -webkit-user-select: none; user-select: none;
}
.jr-root .jr-stop.jr-active .jr-big { -webkit-text-stroke-color: var(--jr-acc); color: #1a0f0a; }
.jr-root .jr-exit {
  width: 100%; max-width: 300px; padding: 14px 16px 15px; border-radius: 16px;
  background: var(--jr-inset); border: 1px dashed #3a3a41;
}
.jr-root .jr-exit-k {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--jr-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--jr-ink2);
}
.jr-root .jr-exit-k .jr-ui { width: 16px; height: 16px; color: var(--jr-bad); }
.jr-root .jr-exit-t { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--jr-mute); }

/* ------------------------------------------------------------ card extras */
.jr-root .jr-board { margin-top: 18px; border: 1px solid var(--jr-line); border-radius: 16px; background: var(--jr-inset); overflow: hidden; }
.jr-root .jr-board-h {
  display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--jr-line);
  font-family: var(--jr-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--jr-mute);
}
.jr-root .jr-board-h span:first-child { color: var(--jr-acc); }
.jr-root .jr-board-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 14px; border-top: 1px solid #1d1d22; }
.jr-root .jr-board-row:first-child { border-top: 0; }
.jr-root .jr-board-t { font-family: var(--jr-mono); font-size: 14px; font-weight: 700; color: var(--jr-acc); font-variant-numeric: tabular-nums; }
.jr-root .jr-board-w { display: flex; flex-direction: column; min-width: 0; }
.jr-root .jr-board-w b { font-size: 14.5px; color: var(--jr-ink); font-weight: 600; }
.jr-root .jr-board-w small { font-size: 12.5px; line-height: 1.45; color: var(--jr-mute); }

.jr-root .jr-bands { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.jr-root .jr-band { padding: 12px 14px; border-radius: 14px; background: var(--jr-inset); border: 1px solid var(--jr-line); }
.jr-root .jr-band b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14.5px; font-weight: 700; color: var(--jr-ink); }
.jr-root .jr-band em {
  font-style: normal; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(25, 230, 227, .45);
  font-family: var(--jr-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--jr-acc);
}
.jr-root .jr-band span { display: block; margin-top: 2px; font-size: 13px; color: var(--jr-mute); }

.jr-root .jr-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--jr-mute); }
.jr-root .jr-note .jr-ui { width: 17px; height: 17px; margin-top: 2px; color: var(--jr-ink2); }
.jr-root .jr-kbd {
  display: inline-block; padding: 0 7px; border-radius: 6px; border: 1px solid var(--jr-line2); border-bottom-width: 2px;
  background: #1c1c21; color: var(--jr-ink); font-family: var(--jr-sans); font-size: 13px; font-weight: 600; line-height: 1.6; white-space: nowrap;
}

.jr-root .jr-checks { display: grid; gap: 9px; margin-top: 16px; }
.jr-root .jr-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--jr-ink2); }
.jr-root .jr-checks .jr-ui {
  width: 20px; height: 20px; margin-top: 1px; padding: 3px; border-radius: 50%;
  background: rgba(52, 211, 153, .12); color: var(--jr-ok); stroke-width: 3;
}

.jr-root .jr-steps { margin-top: 16px; }
.jr-root .jr-steps li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 5px 0; }
.jr-root .jr-steps li::before {
  content: ""; position: absolute; left: 12px; top: 30px; bottom: -6px; border-left: 1.5px dashed var(--jr-line2);
}
.jr-root .jr-steps li:last-child::before { display: none; }
.jr-root .jr-step-n {
  position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--jr-bg); border: 1.5px solid var(--jr-line2);
  font-family: var(--jr-mono); font-size: 11.5px; font-weight: 700; color: var(--jr-ink2);
}
.jr-root .jr-steps li:last-child .jr-step-n { border-color: var(--jr-acc); background: var(--jr-acc); color: #0b0b0d; }
.jr-root .jr-step-t { padding-top: 2px; font-size: 14.5px; line-height: 1.45; color: var(--jr-ink); font-weight: 600; }
.jr-root .jr-step-t small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 400; color: var(--jr-mute); }

.jr-root .jr-gates { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; margin-top: 16px; }
.jr-root .jr-gate {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px;
  background: var(--jr-inset); border: 1px solid var(--jr-line); font-size: 13.5px; line-height: 1.35; color: var(--jr-ink2);
}
.jr-root .jr-gate b { flex: none; font-family: var(--jr-mono); font-size: 12px; font-weight: 700; color: var(--jr-acc); padding-top: 1px; }

.jr-root .jr-tiers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.jr-root .jr-tier {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--jr-line2); font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--jr-ink2);
}
.jr-root .jr-tier i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.jr-root .jr-tier-hi { color: var(--jr-acc); border-color: rgba(25, 230, 227, .45); }
.jr-root .jr-tier-q { color: var(--jr-ok); border-color: rgba(52, 211, 153, .4); }
.jr-root .jr-tier-nr { color: var(--jr-warn); border-color: rgba(251, 191, 36, .4); }
.jr-root .jr-tier-rc { color: var(--jr-mute); }
.jr-root .jr-tier-rj { color: var(--jr-bad); border-color: rgba(248, 113, 113, .38); }

.jr-root .jr-flow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.jr-root .jr-flow li {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px 7px 8px; border-radius: 12px;
  background: var(--jr-inset); border: 1px solid var(--jr-line); font-size: 13.5px; line-height: 1.35; color: var(--jr-ink2);
}
.jr-root .jr-flow b {
  display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px;
  background: #202026; font-family: var(--jr-mono); font-size: 11px; color: var(--jr-acc);
}

/* ----------------------------------------------------------------- finish */
.jr-root .jr-finish { position: relative; z-index: 3; display: flex; justify-content: center; padding-top: 44px; }
.jr-root .jr-finish-card {
  position: relative; width: 100%; max-width: 780px; text-align: center;
  background: var(--jr-card); border: 1px solid var(--jr-line); border-radius: 30px; padding: 46px 44px 42px;
}
.jr-root .jr-finish.jr-arrived .jr-finish-card {
  border-color: var(--jr-acc-line);
  box-shadow: 0 0 0 1px rgba(25, 230, 227, .22), 0 34px 100px -34px rgba(25, 230, 227, .55);
}
.jr-root .jr-flag {
  display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto; border-radius: 20px;
  background: var(--jr-bg); border: 1px solid var(--jr-line); box-shadow: 0 0 30px -8px rgba(25, 230, 227, .5);
}
.jr-root .jr-flag .jr-ill { width: 40px; height: 40px; color: var(--jr-ink2); }
.jr-root .jr-finish-k {
  margin-top: 20px; font-family: var(--jr-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--jr-acc);
}
.jr-root .jr-finish-h { margin-top: 10px; font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; color: var(--jr-ink); text-wrap: balance; }
.jr-root .jr-finish-h:focus { outline: none; }
.jr-root .jr-finish-h:focus-visible { outline: 2px solid var(--jr-acc); outline-offset: 4px; border-radius: 4px; }
.jr-root .jr-finish-h span { color: var(--jr-mute); }
.jr-root .jr-finish-p { max-width: 34em; margin: 14px auto 0; font-size: 17px; line-height: 1.6; color: var(--jr-ink2); }
.jr-root .jr-arrive { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 28px; text-align: left; }
.jr-root .jr-arrive li {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px;
  background: var(--jr-inset); border: 1px solid var(--jr-line);
}
.jr-root .jr-arrive .jr-ui { width: 20px; height: 20px; margin-top: 1px; color: var(--jr-acc); }
.jr-root .jr-arrive span { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--jr-mute); }
.jr-root .jr-arrive b { font-size: 14.5px; color: var(--jr-ink); }
.jr-root .jr-finish .jr-live { justify-content: center; }
.jr-root .jr-finish-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* ------------------------------------------------------------------- dock */
.jr-root .jr-dockwrap { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 20; height: 0; margin-top: 120px; }
.jr-root .jr-dock {
  position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 18px; padding: 7px 10px 7px 20px; border-radius: 999px;
  background: #141417; border: 1px solid var(--jr-line2);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .5);
  white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 18px);
}
.jr-root .jr-dock.jr-shown, .jr-root .jr-dock:focus-within { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.jr-root .jr-dock-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.jr-root .jr-dock-k { font-family: var(--jr-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--jr-acc); }
.jr-root .jr-dock-t { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; color: var(--jr-ink); }
.jr-root .jr-dock-n { font-weight: 700; }
.jr-root .jr-dock-name { color: var(--jr-mute); }
.jr-root .jr-dots-wrap { position: relative; }
.jr-root .jr-dots-track, .jr-root .jr-dots-fill {
  position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px;
}
.jr-root .jr-dots-track { background: #2a2a30; }
.jr-root .jr-dots-fill { background: var(--jr-acc); transform-origin: 0 50%; transform: scaleX(0); }
.jr-root .jr-dots { position: relative; display: flex; align-items: center; }
.jr-root .jr-dot {
  position: relative; display: grid; place-items: center; width: 24px; height: 34px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
}
.jr-root .jr-dot span {
  display: block; width: 8px; height: 8px; border-radius: 50%; background: #3f3f46;
  box-shadow: 0 0 0 3px #141417; transition: transform .2s ease, background-color .2s ease;
}
.jr-root .jr-dot.jr-reached span { background: var(--jr-acc); }
.jr-root .jr-dot[aria-current="step"] span { transform: scale(1.55); background: var(--jr-acc); box-shadow: 0 0 0 3px #141417, 0 0 12px 2px rgba(25, 230, 227, .7); }
.jr-root .jr-dot:hover span { background: var(--jr-ink); }
.jr-root .jr-dot:focus-visible { outline: 2px solid var(--jr-ink); outline-offset: -3px; }
.jr-root .jr-dot-flag .jr-ui { width: 14px; height: 14px; color: #52525b; background: #141417; }
.jr-root .jr-dot-flag.jr-reached .jr-ui, .jr-root .jr-dot-flag[aria-current="step"] .jr-ui { color: var(--jr-acc); }

/* ----------------------------------------------------------------- motion */
.jr-root.jr-motion .jr-hero-main > *, .jr-root.jr-motion .jr-map { animation: jr-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.jr-root.jr-motion .jr-hero-main > :nth-child(2) { animation-delay: .06s; }
.jr-root.jr-motion .jr-hero-main > :nth-child(3) { animation-delay: .12s; }
.jr-root.jr-motion .jr-hero-main > :nth-child(4) { animation-delay: .18s; }
.jr-root.jr-motion .jr-hero-main > :nth-child(5) { animation-delay: .22s; }
.jr-root.jr-motion .jr-hero-main > :nth-child(6) { animation-delay: .26s; }
.jr-root.jr-motion .jr-map { animation-delay: .2s; }
.jr-root.jr-motion .jr-engine.jr-st-working .jr-pulse::after {
  content: ""; position: absolute; left: -5px; top: -5px; right: -5px; bottom: -5px; border-radius: 50%;
  border: 1.5px solid var(--jr-acc); animation: jr-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
.jr-root.jr-motion .jr-btn[data-jr-jump] .jr-ui { animation: jr-nudge 2.2s ease-in-out infinite; }

.jr-root.jr-motion .jr-card {
  transition: opacity .7s ease, transform .85s cubic-bezier(.2, .7, .2, 1), border-color .4s ease, box-shadow .5s ease;
}
.jr-root.jr-motion .jr-aside { transition: opacity .8s ease .12s, transform .9s cubic-bezier(.2, .7, .2, 1) .12s; }
.jr-root.jr-motion .jr-sign { transition: background-color .35s ease, color .35s ease; }
.jr-root.jr-motion .jr-ico { transition: border-color .4s ease, box-shadow .4s ease; }
.jr-root.jr-motion .jr-big { transition: -webkit-text-stroke-color .5s ease, color .5s ease; }
.jr-root.jr-motion .jr-finish-card { transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1), border-color .5s ease, box-shadow .6s ease; }
.jr-root.jr-motion .jr-dock { transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
.jr-root.jr-motion .jr-wp-halo { transition: opacity .4s ease; }
.jr-root.jr-motion .jr-wp-ring, .jr-root.jr-motion .jr-wp-dot { transition: stroke .3s ease, fill .3s ease; }
.jr-root.jr-motion .jr-chev { transition: stroke .3s ease; }
.jr-root.jr-motion .jr-link { transition: stroke .3s ease; }

.jr-root.jr-motion .jr-stop:not(.jr-in) .jr-card { opacity: 0; transform: translate3d(-16px, 30px, 0); }
.jr-root.jr-motion .jr-stop.jr-r:not(.jr-in) .jr-card { transform: translate3d(16px, 30px, 0); }
.jr-root.jr-motion .jr-stop:not(.jr-in) .jr-aside { opacity: 0; transform: translate3d(0, 22px, 0); }
.jr-root.jr-motion .jr-finish:not(.jr-in) .jr-finish-card { opacity: 0; transform: translate3d(0, 32px, 0) scale(.98); }

@keyframes jr-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes jr-ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
@keyframes jr-nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(3px); } }

@media (prefers-reduced-motion: reduce) {
  .jr-root *, .jr-root *::before, .jr-root *::after { animation: none !important; transition: none !important; }
  .jr-root .jr-trav { display: none; }
  .jr-root .jr-stop .jr-card, .jr-root .jr-stop .jr-aside, .jr-root .jr-finish .jr-finish-card { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------- tablet/phone */
@media (max-width: 1180px) and (min-width: 960px) {
  .jr-root .jr-card { padding: 22px 22px 20px; }
  .jr-root .jr-ico { width: 52px; height: 52px; border-radius: 15px; }
  .jr-root .jr-ill { width: 34px; height: 34px; }
  .jr-root .jr-plain { font-size: 16px; }
}

@media (max-width: 959px) {
  .jr-root .jr-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 16px 0 48px; }
  .jr-root .jr-map { border-radius: 22px; padding: 20px 16px 12px; }

  .jr-root .jr-start { justify-content: flex-start; height: 104px; }
  .jr-root .jr-compass { width: 48px; height: 48px; box-shadow: 0 0 0 5px var(--jr-bg), 0 0 26px -6px rgba(25, 230, 227, .35); }
  .jr-root .jr-rose { width: 38px; height: 38px; }
  .jr-root .jr-start-t { left: 64px; top: 4px; font-size: 11px; }

  .jr-root .jr-stop { display: block; padding-left: 50px; margin-bottom: 44px; }
  .jr-root .jr-stop:last-child { margin-bottom: 40px; }
  .jr-root .jr-card { padding: 20px 18px 18px; border-radius: 20px; }
  .jr-root .jr-stop .jr-sign, .jr-root .jr-stop.jr-r .jr-sign {
    padding: 0 11px 0 17px; border-radius: 0 5px 5px 0;
    -webkit-clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  }
  .jr-root .jr-head { gap: 14px; margin-top: 16px; }
  .jr-root .jr-ico { width: 48px; height: 48px; border-radius: 14px; }
  .jr-root .jr-ill { width: 32px; height: 32px; }
  .jr-root .jr-h2 { font-size: 21px; }
  .jr-root .jr-plain { font-size: 15.5px; line-height: 1.62; }
  .jr-root .jr-hood-t { font-size: 12px; }

  .jr-root .jr-aside, .jr-root .jr-stop.jr-r .jr-aside { align-items: stretch; gap: 0; padding-top: 0; }
  .jr-root .jr-big { display: none; }
  .jr-root .jr-exit { max-width: none; margin-top: 10px; }
  .jr-root .jr-gates { gap: 6px; }
  .jr-root .jr-gate { padding: 8px 12px; }

  .jr-root.jr-motion .jr-stop:not(.jr-in) .jr-card,
  .jr-root.jr-motion .jr-stop.jr-r:not(.jr-in) .jr-card { transform: translate3d(0, 24px, 0); }

  .jr-root .jr-trav-dot { left: -12px; top: -12px; width: 24px; height: 24px; box-shadow: 0 0 0 4px rgba(25, 230, 227, .2), 0 0 20px 4px rgba(25, 230, 227, .5); }
  .jr-root .jr-trav-ico { width: 12px; height: 12px; }
  .jr-root .jr-here { display: none; }

  .jr-root .jr-finish { padding-top: 34px; }
  .jr-root .jr-finish-card { text-align: left; padding: 30px 20px 24px; border-radius: 22px; }
  .jr-root .jr-flag { margin: 0; width: 56px; height: 56px; border-radius: 16px; }
  .jr-root .jr-flag .jr-ill { width: 34px; height: 34px; }
  .jr-root .jr-finish-p { margin-left: 0; font-size: 16px; }
  .jr-root .jr-arrive { grid-template-columns: minmax(0, 1fr); }
  .jr-root .jr-finish .jr-live { justify-content: flex-start; }
  .jr-root .jr-finish-cta { justify-content: flex-start; }

  .jr-root .jr-dockwrap { margin-top: 110px; }
  .jr-root .jr-dock {
    left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px 10px 2px 14px; border-radius: 18px; white-space: normal; transform: translate3d(0, 18px, 0);
  }
  .jr-root .jr-dock.jr-shown, .jr-root .jr-dock:focus-within { transform: none; }
  .jr-root .jr-dock-info { flex-direction: row; align-items: baseline; gap: 10px; }
  .jr-root .jr-dock-t { max-width: none; white-space: nowrap; }
  .jr-root .jr-dots { justify-content: space-between; }
  .jr-root .jr-dots-track, .jr-root .jr-dots-fill { left: 10px; right: 10px; }
  .jr-root .jr-dot { width: 20px; height: 32px; }
}

@media (max-width: 520px) {
  .jr-root .jr-bands { grid-template-columns: minmax(0, 1fr); }
  .jr-root .jr-board-row { grid-template-columns: 70px minmax(0, 1fr); }
  .jr-root .jr-hero-cta .jr-btn { width: 100%; }
  .jr-root .jr-finish-cta .jr-btn { flex: 1 1 100%; }
  .jr-root .jr-stat { flex-basis: 40%; padding: 14px 16px; }
  .jr-root .jr-stat dd { font-size: 26px; }
}

@media (max-width: 359px) {
  .jr-root .jr-stop { padding-left: 42px; }
  .jr-root .jr-dot { width: 17px; }
}