/*
 * Reroute site: dark only. Night-drive asphalt, road-sign orange, lane paint.
 * Tokens follow the Reroute Design System (dark theme); layout follows the Product Hunt gallery
 * images (big type, glowing orange, glass-edged app windows on asphalt).
 * Loaded only on Reroute's own pages (app/reroute.php); the template admin keeps styles.css.
 */

/* Brand fonts, self-hosted (SIL Open Font License 1.1): latin subset, variable weight. No
 * unicode-range, so nothing gates the download; glyphs the subset lacks (→, ✓) use the fallback. */
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../third-party/fonts/reroute/overpass.woff2") format("woff2"); }
@font-face { font-family: "Overpass Mono"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../third-party/fonts/reroute/overpass-mono.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../third-party/fonts/reroute/public-sans.woff2") format("woff2"); }

:root {
  --asphalt: #111316;
  --asphalt-2: #17191c;
  --raised: #1d2024;
  --raised-2: #24282d;
  --kerb: #2a2e34;
  --line: #3a3f46;
  --paint: #f2f0ea;
  --muted: #a6abb2;
  --dim: #868c94;
  --sign: #f6871f;
  --sign-deep: #e05f06;
  --sign-hi: #ffb15c;
  --on-sign: #1b1206;
  --go: #4fc07a;
  --stop: #ef5b52;
  --lane: #f2c94c;
  --glow: 0 0 0 1px rgba(246, 135, 31, 0.35), 0 30px 120px -30px rgba(246, 135, 31, 0.45);
  --shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.75);
  --display: "Overpass", "Arial Narrow", system-ui, sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Overpass Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --measure: 62ch;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--asphalt); }
body.rr {
  margin: 0; color: var(--paint); font: 400 1.0625rem/1.65 var(--body); -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 620px at 85% -8%, rgba(246, 135, 31, 0.16), transparent 70%),
    radial-gradient(900px 600px at -10% 18%, rgba(242, 201, 76, 0.05), transparent 70%),
    var(--asphalt);
  background-repeat: no-repeat;
}
:where(.rr) a { color: inherit; }
.rr a:focus-visible, .rr button:focus-visible, .rr summary:focus-visible { outline: 3px solid var(--sign); outline-offset: 3px; border-radius: 8px; }
.rr img { max-width: 100%; }
.rr code { font: 0.92em var(--mono); color: var(--sign-hi); }
/* Off-screen reveal offsets (.rv-right) mustn't widen the page on phones. */
.rr main { overflow-x: clip; }
.rr-wrap { width: min(1200px, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
.rr-narrow { width: min(780px, 100%); }
.rr-center { text-align: center; display: grid; justify-items: center; }
.rr-skip { position: absolute; left: -999px; top: 8px; background: var(--sign); color: var(--on-sign); padding: 10px 14px; border-radius: 8px; z-index: 50; }
.rr-skip:focus { left: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Header ───────────────────────────────────────── */
.rr-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); background: rgba(17, 19, 22, 0.72); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.rr-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.rr-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.rr-brand img { width: 38px; height: 38px; }
.rr-brand b { font: 900 1.3rem/1 var(--display); letter-spacing: -0.01em; }
.rr-brand small { display: block; font: 600 0.68rem/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.rr-nav { display: flex; gap: 26px; align-items: center; font: 600 0.95rem/1 var(--display); }
.rr-nav a { text-decoration: none; color: var(--muted); transition: color 0.15s; }
.rr-nav a:hover { color: var(--paint); }
.rr-nav .rr-buy-mini { color: var(--on-sign); background: var(--sign); padding: 11px 16px; border-radius: 10px; white-space: nowrap; }
.rr-nav .rr-buy-mini:hover { color: var(--on-sign); background: var(--sign-hi); }
/* Phone menu: a <details> disclosure, shown below 860px where the inline links hide. */
.rr-menu { display: none; position: relative; }
.rr-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); color: var(--paint); }
.rr-menu summary::-webkit-details-marker { display: none; }
.rr-menu-ico { width: 14px; height: 10px; border-block: 2px solid currentColor; position: relative; }
.rr-menu-ico::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid currentColor; }
.rr-menu[open] summary { border-color: var(--sign); }
.rr-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; display: grid; padding: 8px; border-radius: 14px; background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow); }
.rr-nav .rr-menu-panel a { display: block; padding: 12px 14px; border-radius: 9px; color: var(--paint); }
.rr-nav .rr-menu-panel a:hover { background: var(--raised-2); }

/* ── Type ─────────────────────────────────────────── */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 0.8rem/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--sign); margin: 0; padding: 9px 14px; border: 1px solid rgba(246, 135, 31, 0.35); border-radius: 999px; background: rgba(246, 135, 31, 0.08); }
.pulse { width: 8px; height: 8px; border-radius: 99px; background: var(--sign); box-shadow: 0 0 0 0 rgba(246, 135, 31, 0.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(246, 135, 31, 0); } 100% { box-shadow: 0 0 0 0 rgba(246, 135, 31, 0); } }
.rr h1 { font: 900 clamp(3rem, 8.2vw, 6.6rem)/0.93 var(--display); letter-spacing: -0.035em; margin: 22px 0 22px; text-wrap: balance; }
.rr h1 em, .h-xl em { font-style: normal; color: var(--sign); }
.h-xl { font: 900 clamp(2.2rem, 5.2vw, 4.1rem)/1 var(--display); letter-spacing: -0.03em; margin: 0 0 22px; text-wrap: balance; max-width: 18ch; }
.lede { font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.55; color: var(--muted); max-width: 44ch; margin: 0 0 34px; }
.lede strong { color: var(--paint); font-weight: 600; }
.sub { font-size: 1.15rem; color: var(--muted); max-width: 56ch; margin: -6px 0 40px; }
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 600 0.82rem/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.kicker .sign-ico { width: 30px; height: 30px; }
.fineprint { font: 400 0.85rem/1.5 var(--body); color: var(--dim); margin-top: 16px; }
.fineprint a { color: var(--sign); }

/* Road-sign icons */
.sign-ico { width: 46px; height: 46px; flex: none; overflow: visible; }
.sign-ico-plate { fill: var(--sign); }
.sign-ico-glyph { fill: none; stroke: var(--on-sign); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sign-ico-glyph circle { fill: none; }

/* ── Buttons ──────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 10px; font: 800 1.05rem/1 var(--display); text-decoration: none; padding: 16px 22px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.btn-lg { padding: 19px 26px; font-size: 1.12rem; }
.btn-primary { background: var(--sign); color: var(--on-sign); box-shadow: 0 12px 40px -12px rgba(246, 135, 31, 0.7); }
.btn-primary:hover { background: var(--sign-hi); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line); color: var(--paint); background: rgba(255, 255, 255, 0.02); }
.btn-ghost:hover { border-color: var(--paint); }
.btn-ink { background: var(--on-sign); color: var(--sign); }
.btn-ink:hover { background: #000; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ctas-center { justify-content: center; }

/* ── Hero ─────────────────────────────────────────── */
.hero { padding-block: clamp(32px, 5vw, 64px) clamp(40px, 6vw, 72px); }
.hero-copy { display: grid; justify-items: start; }
.trust { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: var(--muted); font-size: 0.92rem; }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust li::before { content: ""; width: 7px; height: 7px; background: var(--sign); transform: rotate(45deg); border-radius: 1.5px; }

.scene { position: relative; margin: clamp(32px, 4vw, 52px) 0 0; padding: clamp(14px, 2.4vw, 28px); border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), var(--asphalt-2); border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: var(--shadow), 0 0 120px -40px rgba(246, 135, 31, 0.35); overflow: hidden; }
.scene::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); pointer-events: none; }
.scene-status { position: absolute; top: clamp(14px, 2.4vw, 26px); right: clamp(14px, 2.4vw, 26px); z-index: 2; display: flex; align-items: center; gap: 8px; font: 600 0.82rem/1 var(--display); padding: 9px 13px; border-radius: 999px; background: rgba(79, 192, 122, 0.12); color: var(--go); border: 1px solid rgba(79, 192, 122, 0.35); }
.dot-on { width: 8px; height: 8px; border-radius: 99px; background: var(--go); box-shadow: 0 0 10px var(--go); flex: none; }
.map { position: relative; width: 100%; height: auto; display: block; }
.map text { font-family: var(--display); fill: var(--paint); text-anchor: middle; }
.road-bed { fill: none; stroke: #2a2e34; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
.road-lane { fill: none; stroke: var(--lane); stroke-opacity: 0.55; stroke-width: 2; stroke-dasharray: 10 12; animation: drive 1.4s linear infinite; }
.road-lane-turn { stroke: var(--sign); stroke-opacity: 0.9; }
.feeder { fill: none; stroke: #2a2e34; stroke-width: 6; stroke-linecap: round; }
.chip { fill: var(--raised-2); stroke: var(--line); stroke-width: 1.2; }
.chip { transition: fill 0.35s, stroke 0.35s; }
.app { cursor: pointer; outline: none; }
.app.is-hot .chip { stroke: var(--sign); fill: rgba(246, 135, 31, 0.14); }
.app:hover .chip { stroke: var(--sign-hi); stroke-width: 2; }
.app:focus-visible .chip { stroke: var(--paint); stroke-width: 3; }
.app text { transition: fill 0.35s; }
.app.is-hot text { fill: var(--sign-hi); }
.apps text { font: 700 14px var(--display); }
.map-sign { fill: var(--sign); filter: drop-shadow(0 0 14px rgba(246, 135, 31, 0.55)); }
.map-sign-arrow { fill: none; stroke: var(--on-sign); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.node { fill: var(--raised); stroke: var(--line); stroke-width: 1.3; }
.node-hot { stroke: var(--sign); fill: #22201d; }
.t-label { font: 600 11px var(--display) !important; letter-spacing: 0.14em; fill: var(--muted) !important; }
.t-road { fill: var(--dim) !important; }
.t-title { font: 800 17px var(--display); }
.t-small { font-size: 14px; }
.t-mono { font: 400 12px var(--mono) !important; fill: var(--muted) !important; }
.t-away { font: 800 12px var(--display); fill: var(--sign) !important; letter-spacing: 0.04em; }
.t-home { font: 800 12px var(--display); fill: var(--go) !important; letter-spacing: 0.04em; }
.pkt-hot { fill: var(--sign-hi); filter: drop-shadow(0 0 6px var(--sign)); }
.pkt-cold { fill: #cfd3d8; opacity: 0.75; }
.traffic.is-live .pkt-hot { filter: none; }
.traffic.is-live .pkt-hot circle:first-child { filter: drop-shadow(0 0 7px var(--sign)); }
.trail-1 { opacity: 0.5; }
.trail-2 { opacity: 0.22; }
.cap-tip { display: none; color: var(--sign); font-weight: 600; }
.js .cap-tip { display: inline-flex; }
.cap-tip::before { content: ""; width: 7px; height: 7px; background: var(--sign); transform: rotate(45deg); border-radius: 1.5px; }
.map-scroll { position: relative; }
.map-hint { display: none; }
.cap-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.scene-cap { position: relative; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: center; margin-top: 6px; color: var(--muted); font-size: 0.88rem; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 99px; vertical-align: middle; }
.key-hot { background: var(--sign); box-shadow: 0 0 8px var(--sign); }
.key-cold { background: #cfd3d8; }
@keyframes drive { to { stroke-dashoffset: -22; } }

/* ── Works-with strip ─────────────────────────────── */
.strip { border-block: 1px solid var(--kerb); background: rgba(255, 255, 255, 0.015); overflow: hidden; padding-block: 18px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.strip-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.strip ul { list-style: none; display: flex; gap: 46px; margin: 0; padding: 0 23px; }
.strip li { font: 700 1rem/1 var(--display); color: var(--muted); white-space: nowrap; display: flex; align-items: center; gap: 46px; }
.strip li::after { content: ""; width: 8px; height: 8px; background: var(--sign); transform: rotate(45deg); border-radius: 2px; opacity: 0.8; }
.strip:hover .strip-track, .strip:focus-within .strip-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Sections ─────────────────────────────────────── */
.sec { padding-block: clamp(72px, 11vw, 140px); position: relative; }
.sec + .sec { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.split-top { align-items: start; }

/* Versus */
.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 46px; }
.vs { border-radius: 22px; padding: clamp(22px, 3vw, 34px); background: var(--raised); border: 1px solid var(--kerb); min-width: 0; }
.vs h3 { font: 800 1.35rem/1.2 var(--display); margin: 0 0 18px; }
.vs-bad h3 { color: var(--muted); }
.vs-good { background: linear-gradient(180deg, rgba(246, 135, 31, 0.08), rgba(246, 135, 31, 0.01)), var(--raised); box-shadow: var(--glow); border-color: transparent; }
.mini { width: 100%; height: auto; display: block; margin-bottom: 18px; }
.mini-road { fill: none; stroke: #2a2e34; stroke-width: 22; stroke-linecap: round; }
.mini-lane { fill: none; stroke: var(--lane); stroke-opacity: 0.5; stroke-width: 2; stroke-dasharray: 8 10; animation: drive 1.4s linear infinite; }
.mini-lane-hot { stroke: var(--sign); stroke-opacity: 0.9; }
.mini-node { fill: var(--raised-2); stroke: var(--stop); stroke-width: 1.4; }
.mini-t { font: 800 14px var(--display); fill: var(--paint); text-anchor: middle; }
.mini-cap { font: 600 12px var(--display); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--muted); }
.mini-cap-hot { fill: var(--sign); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: var(--paint); }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font: 800 0.75rem/1 var(--display); background: var(--sign); color: var(--on-sign); margin-top: 3px; }
.ticks-bad li { color: var(--muted); }
.ticks-bad li::before { content: "✕"; background: rgba(239, 91, 82, 0.15); color: var(--stop); }

/* Steps */
.steps { list-style: none; padding: 0; margin: 50px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: step; }
.step { display: grid; grid-template-rows: auto auto 1fr; gap: 12px; padding: 26px; border-radius: 22px; background: var(--raised); border: 1px solid var(--kerb); min-width: 0; }
.step-head { display: flex; align-items: center; gap: 14px; }
.step-n { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--sign); color: var(--on-sign); font: 900 1.2rem/1 var(--display); flex: none; }
.step h3 { font: 800 1.35rem/1.2 var(--display); margin: 0; }
.step p { margin: 0 0 8px; color: var(--muted); }
.glass { align-self: end; border-radius: 16px; background: var(--asphalt); border: 1px solid var(--line); box-shadow: 0 20px 50px -25px rgba(0, 0, 0, 0.8); padding: 14px; font-size: 0.9rem; min-width: 0; }
.mp-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.mp-ico { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--sign); position: relative; }
.mp-ico::after { content: ""; position: absolute; inset: 6px; border-top: 2px solid var(--sign); border-bottom: 2px solid var(--sign); }
.mp-row b { display: block; font-weight: 600; }
.mp-row small { display: block; color: var(--muted); font: 0.78rem var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-row em { display: block; font-style: normal; color: var(--go); font-size: 0.76rem; margin-top: 3px; }
.mp-btn { font: 700 0.8rem/1 var(--display); padding: 8px 11px; border-radius: 8px; background: var(--raised-2); border: 1px solid var(--line); }
.mr-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; }
.mr-row .pick { grid-column: 1 / -1; justify-self: start; }
.mr-row b { display: block; font-weight: 600; }
.mr-row small { display: block; color: var(--muted); font-size: 0.78rem; }
.tile { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font: 900 1rem/1 var(--display); background: var(--raised-2); color: var(--paint); border: 1px solid var(--line); flex: none; }
.pick { display: inline-flex; align-items: center; gap: 8px; font: 700 0.85rem/1 var(--display); color: var(--sign); padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(246, 135, 31, 0.6); background: rgba(246, 135, 31, 0.08); white-space: nowrap; }
.pick i { font-style: normal; opacity: 0.7; }
.pick-muted { color: var(--muted); border-color: var(--line); background: transparent; }
.mock-menu { padding: 8px; }
.mm-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 0.86rem; }
.mm-line:first-child { justify-content: flex-start; color: var(--go); font-weight: 600; }
.mm-sep { border-top: 1px solid var(--kerb); margin-top: 4px; padding-top: 12px; }
.sw { width: 34px; height: 20px; border-radius: 99px; background: var(--sign); position: relative; flex: none; }
.sw::after { content: ""; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 99px; background: #fff; }
.sw-off { background: var(--line); }
.sw-off::after { right: auto; left: 2px; background: #cfd3d8; }

/* App window */
.sec-window { background: radial-gradient(900px 500px at 50% 0%, rgba(246, 135, 31, 0.09), transparent 70%); }
.appshot { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: center; margin-top: 10px; }
.win { background: var(--raised); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, 0.4); min-width: 0; }
.win-bar { display: flex; align-items: center; gap: 9px; padding: 15px 20px; border-bottom: 1px solid var(--kerb); background: rgba(255, 255, 255, 0.02); }
.win-bar i { width: 13px; height: 13px; border-radius: 99px; background: #ff5f57; }
.win-bar i:nth-child(2) { background: #febc2e; }
.win-bar i:nth-child(3) { background: #28c840; }
.win-bar b { font: 700 1rem/1 var(--display); color: var(--paint); margin-left: 14px; }
.win-plus { margin-left: auto; width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); font: 600 1.1rem/1 var(--body); }
.win-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 380px; }
.win-side { background: rgba(0, 0, 0, 0.18); border-right: 1px solid var(--kerb); padding: 14px 10px; display: grid; align-content: start; gap: 4px; position: relative; }
.side-item { font: 600 0.95rem/1 var(--body); color: var(--muted); padding: 10px 12px; border-radius: 9px; display: flex; align-items: center; gap: 10px; }
.side-item::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--sign); border-radius: 4px; opacity: 0.75; }
.side-item.is-on { background: rgba(255, 255, 255, 0.07); color: var(--paint); }
.side-switch { margin-top: auto; position: absolute; left: 10px; right: 10px; bottom: 14px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 12px; display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.side-switch b { font: 800 0.95rem/1 var(--display); }
.side-switch small { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--muted); }
.side-switch .dot-on { width: 6px; height: 6px; }
.win-main { padding: 10px 14px; min-width: 0; }
.wrow { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 10px; }
.wrow + .wrow { border-top: 1px solid var(--kerb); }
.wrow-who { min-width: 0; }
.wrow-who b { display: block; font-weight: 600; }
.wrow-who small { display: block; color: var(--muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow.is-off .tile, .wrow.is-off .wrow-who { opacity: 0.5; }
.callouts { list-style: none; padding: 0; margin: 0; display: grid; gap: 26px; counter-reset: c; }
.callouts li { position: relative; padding-left: 48px; color: var(--muted); counter-increment: c; }
.callouts li::before { content: counter(c); position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(246, 135, 31, 0.12); border: 1px solid rgba(246, 135, 31, 0.5); color: var(--sign); font: 900 0.95rem/1 var(--display); }
.callouts b { display: block; color: var(--paint); font: 800 1.12rem/1.3 var(--display); margin-bottom: 4px; }

/* Uses */
.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 46px; }
.use { padding: 26px; border-radius: 20px; background: var(--raised); border: 1px solid var(--kerb); transition: border-color 0.2s, transform 0.2s; min-width: 0; }
.use:hover { border-color: rgba(246, 135, 31, 0.5); transform: translateY(-2px); }
.use h3 { font: 800 1.2rem/1.25 var(--display); margin: 18px 0 8px; }
.use p { margin: 0; color: var(--muted); }

/* Activity */
.facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.facts li { border-top: 2px solid var(--sign); padding-top: 12px; }
.facts b { display: block; font: 800 1.15rem/1.2 var(--display); }
.facts span { color: var(--muted); font-size: 0.9rem; }
.log { font: 400 0.88rem/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.log-row { display: grid; grid-template-columns: 0.8fr 1.6fr 1fr 0.7fr; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--kerb); align-items: center; animation: logIn 9.6s calc(var(--i, 0) * 1.1s) infinite both; }
.log-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-row:last-child { border-bottom: 0; }
.log-head { font: 600 0.72rem/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); animation: none; }
.log .via { color: var(--sign); }
.st { font: 700 0.75rem/1 var(--display); padding: 5px 8px; border-radius: 6px; justify-self: start; }
.st-open { color: var(--go); background: rgba(79, 192, 122, 0.12); }
.st-closed { color: var(--muted); background: rgba(255, 255, 255, 0.06); }
.st-blocked { color: #ff7b72; background: rgba(239, 91, 82, 0.12); }
@keyframes logIn { 0% { opacity: 0.25; background: rgba(246, 135, 31, 0.10); } 6% { opacity: 1; background: rgba(246, 135, 31, 0.10); } 16%, 100% { opacity: 1; background: transparent; } }

/* Rules */
.rules-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 36px; margin-top: 46px; }
.rules-grid article { min-width: 0; }
.rules-grid h3 { font: 800 1.22rem/1.25 var(--display); margin: 16px 0 8px; }
.rules-grid p { margin: 0; color: var(--muted); }

/* Under the hood */
.sec-nerd { background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent); }
.nerd { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--kerb); }
.nerd > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--kerb); }
.nerd dt { font: 600 0.78rem/1.6 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sign); }
.nerd dd { margin: 0; color: var(--muted); }

/* Pricing */
.sec-price { background: radial-gradient(800px 480px at 22% 40%, rgba(246, 135, 31, 0.12), transparent 70%); }
.price-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: 30px; }
.plate { position: relative; background: linear-gradient(160deg, #ff9a3a, var(--sign) 40%, #e9700f); color: var(--on-sign); border-radius: 26px; padding: clamp(28px, 4vw, 46px); box-shadow: 0 40px 120px -40px rgba(246, 135, 31, 0.8); }
.plate::before { content: ""; position: absolute; inset: 12px; border: 3px solid var(--on-sign); border-radius: 16px; pointer-events: none; }
.plate-amount { font: 900 clamp(4rem, 10vw, 6.6rem)/0.85 var(--display); letter-spacing: -0.04em; }
.plate-once { font: 800 1.15rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 12px; }
.plate ul { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 9px; font: 600 1.02rem/1.4 var(--body); }
.plate li::before { content: "→ "; font-weight: 800; }
.plate .btn { position: relative; width: 100%; }
.plate-trial { position: relative; display: block; text-align: center; margin-top: 14px; font: 700 0.95rem/1 var(--display); color: var(--on-sign); }
.rr .plate :focus-visible { outline-color: var(--on-sign); }
.compare-wrap { min-width: 0; }
.compare-title { font: 800 1.35rem/1.2 var(--display); margin: 0 0 16px; }
.table-scroll { overflow-x: auto; border-radius: 18px; border: 1px solid var(--kerb); background: var(--raised); }
.compare { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 640px; }
.compare th, .compare td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--kerb); vertical-align: top; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th { font: 600 0.72rem/1.2 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.compare tbody th { font-weight: 600; color: var(--paint); }
.compare td { color: var(--muted); }
.compare .us { color: var(--sign); font-weight: 700; background: rgba(246, 135, 31, 0.07); }
.compare thead .us { color: var(--sign); }

/* FAQ */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 30px; }
.faq details { border-bottom: 1px solid var(--kerb); padding-block: 22px; }
.faq summary { cursor: pointer; font: 800 1.15rem/1.3 var(--display); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--sign); font-size: 1.5rem; line-height: 1; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--muted); margin: 12px 0 0; max-width: var(--measure); }

/* Final CTA */
.final { padding-block: clamp(90px, 13vw, 170px); border-top: 1px solid rgba(255, 255, 255, 0.05); background: radial-gradient(700px 420px at 50% 30%, rgba(246, 135, 31, 0.2), transparent 70%); text-align: center; }
.final-inner { display: grid; justify-items: center; }
.final .h-xl { max-width: none; font-size: clamp(3rem, 8vw, 6rem); margin-top: 26px; }
.final .sub { margin: 0 auto 36px; }
.final-sign svg { width: 140px; height: 140px; filter: drop-shadow(0 0 40px rgba(246, 135, 31, 0.6)); animation: bob 5s ease-in-out infinite; }
.final-plate { fill: var(--sign); }
.final-arrow { fill: none; stroke: var(--on-sign); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* Inner pages: legal, thanks, soon, 404 */
.rr-page { padding-block: clamp(48px, 9vw, 110px); }
.rr-page h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-top: 18px; }
.rr-page .signpost { display: flex; align-items: center; gap: 12px; }
.rr-page .signpost .diamond { width: 20px; height: 20px; background: var(--sign); transform: rotate(45deg); border-radius: 5px; }
.rr-page .signpost span { font: 600 0.8rem/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.rr-center .signpost { justify-content: center; }
article.rr-legal h2 { font: 800 1.4rem/1.25 var(--display); margin: 40px 0 10px; }
article.rr-legal p, article.rr-legal li { color: var(--muted); }
article.rr-legal strong { color: var(--paint); }
article.rr-legal a, .rr-steps a { color: var(--sign); }
.rr-list { padding-left: 1.2em; display: grid; gap: 8px; }
.rr-steps { list-style: none; counter-reset: step; padding: 0; margin: 8px 0 24px; display: grid; gap: 14px; }
.rr-steps li { counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; background: var(--raised); border: 1px solid var(--kerb); border-radius: 16px; padding: 18px 20px; }
.rr-steps li::before { content: counter(step); grid-row: span 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--sign); color: var(--on-sign); font: 900 1.1rem/1 var(--display); }
.rr-steps b { font: 800 1.12rem/1.3 var(--display); }
.rr-steps span { color: var(--muted); }
article.rr-legal h3 { font: 800 1.12rem/1.3 var(--display); margin: 26px 0 6px; }
.rr-help section, .rr-changelog section { scroll-margin-top: 90px; }
.rr-help .rr-steps { margin-top: 14px; }
.rr-toc { margin: 8px 0 12px; padding: 20px 24px; border-radius: 16px; background: var(--raised); border: 1px solid var(--kerb); }
article.rr-legal .rr-toc h2 { font: 600 0.75rem/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.rr-toc ol { margin: 0; padding-left: 1.3em; columns: 2 220px; column-gap: 32px; }
.rr-toc li { padding: 3px 0; break-inside: avoid; color: var(--muted); }
/* Guides (/guides, /guides/<slug>): help-page prose plus code blocks, a trial box and link cards. */
.rr-crumbs { font: 600 0.82rem/1.4 var(--display); color: var(--dim); margin-bottom: 14px; }
article.rr-legal .rr-crumbs a { color: var(--muted); text-decoration: none; }
article.rr-legal .rr-crumbs a:hover { color: var(--paint); }
.rr-guide section { scroll-margin-top: 90px; }
.rr-guide .fineprint { margin-top: 6px; }
.rr-code { margin: 14px 0 18px; padding: 16px 18px; border-radius: 14px; background: var(--raised); border: 1px solid var(--kerb); overflow-x: auto; white-space: pre; }
.rr-code code { font: 0.9rem/1.6 var(--mono); color: var(--paint); }
.rr-guide :not(pre) > code { overflow-wrap: anywhere; }
.rr-cta-box { margin: 48px 0 8px; padding: clamp(22px, 3vw, 30px); border-radius: 22px; display: grid; gap: 18px; background: linear-gradient(180deg, rgba(246, 135, 31, 0.08), rgba(246, 135, 31, 0.01)), var(--raised); box-shadow: var(--glow); }
article.rr-legal .rr-cta-box h2 { margin: 0 0 6px; }
.rr-cta-box p { margin: 0; }
article.rr-legal .rr-cta-box .btn-primary { color: var(--on-sign); }
article.rr-legal .rr-cta-box .btn-ghost { color: var(--paint); }
.rr-guide .faq { grid-template-columns: minmax(0, 1fr); margin-top: 6px; }
.rr-related { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 14px; }
.rr-related-list { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
article.rr-legal .rr-related a { color: var(--paint); }
.rr-related a { display: grid; align-content: start; gap: 6px; padding: 18px 20px; border-radius: 16px; background: var(--raised); border: 1px solid var(--kerb); text-decoration: none; transition: border-color 0.15s; }
.rr-related a:hover { border-color: var(--sign); }
article.rr-legal .rr-related b { font: 800 1.05rem/1.3 var(--display); color: var(--paint); }
.rr-related span { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.rr-release-date { font: 600 0.8rem/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-left: 10px; vertical-align: middle; }
.rr-sign-big { width: 104px; height: 104px; background: var(--sign); transform: rotate(45deg); border-radius: 18px; margin: 18px auto 46px; box-shadow: 0 0 0 7px var(--asphalt), 0 0 0 10px var(--sign), 0 0 80px rgba(246, 135, 31, 0.6); }

/* Pause animations toggle (home page; site.js wires it up) */
.rr-pause { display: none; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; align-items: center; gap: 8px; font: 600 0.78rem/1 var(--display); color: var(--muted); padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(17, 19, 22, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; }
.js .rr-pause { display: inline-flex; }
.rr-pause:hover, .rr-pause[aria-pressed="true"] { color: var(--paint); border-color: var(--muted); }
.rr-pause-ico { width: 9px; height: 10px; border-inline: 3px solid currentColor; }
.rr-pause[aria-pressed="true"] .rr-pause-ico { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; }
/* Paused: looping animations stop (one-off entrances still finish, so nothing is left hidden). */
html.rr-paused :is(.road-lane, .mini-lane, .strip-track, .pulse, .hero-lights i, .map-glow, .final-sign svg) { animation: none !important; }

/* Footer */
.rr-footer { border-top: 1px solid var(--kerb); padding-block: 56px 40px; color: var(--muted); font-size: 0.92rem; background: rgba(0, 0, 0, 0.18); }
.rr-footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.rr-footer-brand p { max-width: 34ch; margin: 14px 0 0; }
.rr-footer-brand .rr-brand img { width: 32px; height: 32px; }
.rr-footer nav { display: grid; gap: 9px; align-content: start; }
.rr-footer h2 { font: 600 0.72rem/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--paint); margin: 0 0 8px; }
.rr-footer nav a { text-decoration: none; color: var(--muted); overflow-wrap: anywhere; }
.rr-footer nav a:hover { color: var(--paint); }
.rr-footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--kerb); font-size: 0.82rem; color: var(--dim); }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1000px) {
  .appshot { grid-template-columns: minmax(0, 1fr); }
  .callouts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .uses, .rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .rr-nav > a:not(.rr-buy-mini) { display: none; }
  .rr-nav { gap: 8px; }
  .rr-nav .rr-buy-mini { padding-inline: 12px; }
  .rr-menu { display: block; }
  .split, .price-grid, .versus, .steps { grid-template-columns: minmax(0, 1fr); }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .callouts { grid-template-columns: minmax(0, 1fr); }
  .win-body { grid-template-columns: minmax(0, 1fr); }
  .win-side { display: none; }
  .nerd > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rr-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rr-footer-brand { grid-column: 1 / -1; }
  .scene-status { position: relative; top: 0; right: 0; justify-self: start; display: inline-flex; margin-bottom: 8px; }
}
@media (max-width: 560px) {
  .uses, .rules-grid, .facts { grid-template-columns: minmax(0, 1fr); }
  .wrow { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .wrow .sw { display: none; }
  .log-row { grid-template-columns: 0.9fr 1.5fr 0.8fr; }
  .log-row > span:nth-child(3) { display: none; }
  .btn-lg { width: 100%; }
  .map-scroll { overflow-x: auto; margin: 0 calc(-1 * clamp(14px, 2.4vw, 28px)); padding: 0 clamp(14px, 2.4vw, 28px); scrollbar-width: none; overscroll-behavior-x: contain; }
  .map-scroll::-webkit-scrollbar { display: none; }
  .map-scroll .map { width: 760px; max-width: none; }
  .map-hint { display: block; position: relative; margin: 4px 0 0; text-align: center; font: 600 0.8rem/1 var(--display); color: var(--sign); letter-spacing: 0.04em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .road-lane, .mini-lane, .strip-track, .pulse, .final-sign svg, .log-row { animation: none; }
  .traffic { display: none; }
  .js .cap-tip { display: none; }
  .js .rr-pause { display: none; }
}

/* ══ Motion ═══════════════════════════════════════════════════════
 * Load-in choreography for the hero and map, scroll reveals (site.js adds .rv/.in), and the small
 * live touches. All of it sits behind prefers-reduced-motion: no-preference.
 */
.map-glow { transform-box: fill-box; transform-origin: center; }
.node-wrap, .app, .sign-wrap, .sign-face { transform-box: fill-box; transform-origin: center; }
.hero { position: relative; isolation: isolate; }
.hero-lights { position: absolute; inset: 0 0 auto; height: 900px; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-lights i { position: absolute; width: 760px; height: 760px; border-radius: 50%; filter: blur(40px); background: radial-gradient(circle, rgba(246, 135, 31, 0.16), transparent 65%); }
.hero-lights i:first-child { top: -280px; right: -160px; }
.hero-lights i:last-child { top: 260px; left: -320px; background: radial-gradient(circle, rgba(242, 201, 76, 0.07), transparent 65%); }
.rr h1 .ln { display: inline-block; overflow: hidden; padding: 0.04em 0.02em 0.1em; margin: -0.04em -0.02em -0.1em; vertical-align: bottom; }
.rr h1 .ln > * { display: inline-block; }
.rr-header { transition: background 0.3s, box-shadow 0.3s, border-color 0.3s; }
.rr-header.is-scrolled { background: rgba(17, 19, 22, 0.86); box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.9); }
.win { position: relative; }
.fake-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -3px 0 0 -4px; pointer-events: none; z-index: 3; transition: transform 0.9s cubic-bezier(0.65, 0, 0.25, 1); background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M4 2 L4 18 L8.4 14 L11.4 20.4 L14 19.2 L11 12.9 L17 12.9 Z' fill='%23fff' stroke='%23111' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
.fake-cursor::after { content: ""; position: absolute; left: 4px; top: 3px; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid var(--sign); opacity: 0; }
.fake-cursor.is-click::after { animation: clickRing 0.6s ease-out; }
.wrow { transition: background 0.4s, opacity 0.4s; border-radius: 12px; }
.wrow.is-flash { background: rgba(246, 135, 31, 0.1); }
.wrow .tile, .wrow .wrow-who { transition: opacity 0.4s; }
.sw::after { right: auto; left: 2px; transform: translateX(14px); transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), background 0.3s; }
.sw { transition: background 0.3s; }
.sw-off::after { left: 2px; transform: none; }
.log.is-live .log-row { animation: none; }
.swap { display: inline-grid; height: 1.1em; overflow: hidden; line-height: 1.1; }
.swap > span { grid-area: 1 / 1; transition: transform 0.5s cubic-bezier(0.3, 1.3, 0.5, 1), opacity 0.4s; }
.swap > span:first-child { transform: translateY(-120%); opacity: 0; }
.spot { position: relative; isolation: isolate; }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.3s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(246, 135, 31, 0.1), transparent 45%); }
.spot:hover::after { opacity: 1; }
.plate, .js .plate.rv { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0s), scale 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0s), opacity 0.9s var(--rd, 0s); }
.plate.is-tilting, .js .plate.rv.is-tilting { transition: transform 0.1s linear, opacity 0.9s; }
.plate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s; background: radial-gradient(500px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.28), transparent 45%); mix-blend-mode: soft-light; }
.plate.is-tilting::after { opacity: 1; }
.js .h-xl em, .js .rr h1 em { background: linear-gradient(100deg, var(--sign) 0 42%, #ffe2c2 50%, var(--sign) 58% 100%) 100% 0 / 260% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }

/* The scene itself still rises in; only its contents wait. */
.scene.is-waiting * { animation-play-state: paused !important; }

@keyframes rise { from { opacity: 0; translate: 0 24px; } }
@keyframes lineUp { from { translate: 0 110%; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; scale: 0.6; } }
@keyframes slideL { from { opacity: 0; translate: 40px 0; } }
@keyframes signIn { 0% { opacity: 0; scale: 0.2; rotate: -120deg; } 70% { opacity: 1; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes draw { 0% { opacity: 0; stroke-dashoffset: 1; } 2% { opacity: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes breathe { 50% { opacity: 0.72; scale: 1.08 0.94; } }
@keyframes shine { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes chipPing { 0% { fill: rgba(246, 135, 31, 0.45); } 100% { } }
@keyframes chipPingCold { 0% { fill: rgba(255, 255, 255, 0.16); } 100% { } }
@keyframes nodeHot { 0% { stroke: #ffd2a3; fill: #3a2a1a; } 100% { } }
@keyframes nodeAway { 0% { stroke: var(--sign); fill: #2d241b; } 100% { } }
@keyframes nodeHome { 0% { stroke: var(--go); fill: #1c2a22; } 100% { } }
@keyframes wiggle { 20% { rotate: -14deg; scale: 1.12; } 50% { rotate: 9deg; } 75% { rotate: -4deg; } }
@keyframes clickRing { 0% { opacity: 1; scale: 0.3; } 100% { opacity: 0; scale: 1.4; } }
@keyframes spinIn { from { opacity: 0; rotate: -90deg; scale: 0.5; } }

@media (prefers-reduced-motion: no-preference) {
  /* Hero copy */
  .hero .eyebrow { animation: rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .rr h1 .ln > * { animation: lineUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; }
  .rr h1 .ln + .ln > * { animation-delay: 0.2s; }
  .js .rr h1 em { animation: lineUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both, shine 1.6s ease-in-out 1s both; }
  .hero .lede { animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
  .hero .ctas { animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
  .hero .trust li { animation: rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero .trust li:nth-child(1) { animation-delay: 0.5s; } .hero .trust li:nth-child(2) { animation-delay: 0.56s; }
  .hero .trust li:nth-child(3) { animation-delay: 0.62s; } .hero .trust li:nth-child(4) { animation-delay: 0.68s; }
  .scene { animation: rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
  .hero-lights i:first-child { animation: drift1 18s ease-in-out infinite alternate; }
  .hero-lights i:last-child { animation: drift2 22s ease-in-out infinite alternate; }
  .btn-primary { background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); background-size: 250% 100%; background-position: 150% 0; background-repeat: no-repeat; }
  .btn-primary:hover { background-position: -50% 0; transition: background-position 0.8s, transform 0.15s, background-color 0.15s; }

  /* Map build */
  .road-bed { stroke-dasharray: 1 1; animation: draw 1.3s cubic-bezier(0.65, 0, 0.35, 1) 0.75s both; }
  .road-bed-turn { animation-delay: 1.05s; animation-duration: 1.4s; }
  .feeder { stroke-dasharray: 1 1; animation: draw 0.5s ease-out calc(0.6s + var(--i) * 0.06s) both; }
  .road-lane { animation: drive 1.4s linear infinite, fadeIn 0.8s 1.9s both; }
  .app { animation: pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.5s + var(--i) * 0.08s) both; }
  .app.ping .chip { animation: chipPingCold 0.7s ease-out; }
  .app.is-hot.ping .chip { animation: chipPing 0.7s ease-out; }
  .sign-wrap { animation: signIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both; }
  .sign-face.wiggle { animation: wiggle 0.6s ease-in-out; }
  .node-proxy { animation: pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.55s both; }
  .node-away { animation: slideL 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.9s both; }
  .node-home { animation: slideL 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2s both; }
  .node-proxy.ping .node { animation: nodeHot 0.7s ease-out; }
  .node-away.ping .node { animation: nodeAway 0.6s ease-out; }
  .node-home.ping .node { animation: nodeHome 0.6s ease-out; }
  .map-glow { animation: fadeIn 1.2s 1.5s both, breathe 4.5s ease-in-out 2.7s infinite; }
  .traffic { animation: fadeIn 0.6s 1.9s both; }
  .t-road { animation: fadeIn 0.8s 2.1s both; }
  .scene-status { animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 2.2s both; }
  .scene-cap { animation: fadeIn 0.8s 2.3s both; }

  /* Scroll reveals */
  .js .rv { opacity: 0; translate: 0 32px; transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0s), translate 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0s), scale 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0s); }
  .js .rv.rv-left { translate: -48px 0; }
  .js .rv.rv-right { translate: 48px 0; }
  .js .rv.rv-zoom { translate: 0 48px; scale: 0.94; }
  .js .rv.in { opacity: 1; translate: none; scale: none; }
  .js .rv.rv-sign svg { opacity: 0; }
  .js .rv-sign.in svg { animation: spinIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) both, bob 5s ease-in-out 1s infinite; opacity: 1; }
  .js .kicker.rv .sign-ico { rotate: -90deg; scale: 0.4; transition: rotate 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s, scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s; }
  .js .kicker.rv.in .sign-ico { rotate: none; scale: none; }
  .js .h-xl.rv.in em { animation: shine 1.6s ease-in-out 0.5s both; }
  .js .use .sign-ico { transition: rotate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .js .use:hover .sign-ico { rotate: 90deg; }

  /* Versus minis draw their roads */
  .js .vs.rv .mini path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js .vs.rv .mini .mini-lane { stroke-dasharray: 8 10; stroke-dashoffset: 0; opacity: 0; }
  .js .vs.rv.in .mini .mini-road { animation: draw 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both; }
  .js .vs.rv.in .mini .mini-lane { animation: drive 1.4s linear infinite, fadeIn 0.6s 1.2s both; }

  /* Step mocks come alive */
  .js .step.rv .mp-row em { clip-path: inset(0 100% 0 0); transition: clip-path 1s steps(28) 1.3s; }
  .js .step.rv.in .mp-row em { clip-path: inset(0 0 0 0); }
  .js .step.rv.in .mp-btn { animation: press 0.5s ease 0.9s; }
  .js .step.rv .swap > span:first-child { transform: none; opacity: 1; }
  .js .step.rv.in .swap > span:first-child { animation: swapOut 0.6s cubic-bezier(0.3, 1.3, 0.5, 1) 1.2s both; }
  .js .step.rv .swap > span:last-child { transform: translateY(120%); opacity: 0; }
  .js .step.rv.in .swap > span:last-child { transform: none; opacity: 1; transition-delay: 1.25s; }
  .js .step.rv .mock-menu .sw { background: var(--line); }
  .js .step.rv .mock-menu .sw::after { transform: none; background: #cfd3d8; }
  .js .step.rv.in .mock-menu .sw { background: var(--sign); transition-delay: calc(1s + var(--k, 0) * 0.25s); }
  .js .step.rv.in .mock-menu .sw::after { transform: translateX(14px); background: #fff; transition-delay: calc(1s + var(--k, 0) * 0.25s); }
  .mock-menu .mm-line:nth-child(3) .sw { --k: 1; }
  .mock-menu .mm-line:nth-child(4) .sw { --k: 2; }
  .js .step.rv .mm-line:first-child .dot-on { background: var(--dim); box-shadow: none; transition: background 0.3s 1.8s, box-shadow 0.3s 1.8s; }
  .js .step.rv.in .mm-line:first-child .dot-on { background: var(--go); box-shadow: 0 0 10px var(--go); }

  /* App window rows slide in */
  .js .win.rv .wrow { opacity: 0; translate: 24px 0; transition: opacity 0.6s, translate 0.7s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s; }
  .js .win.rv.in .wrow { opacity: 1; translate: none; }
  .js .win.rv.in .wrow:nth-child(2) { transition-delay: 0.08s; } .js .win.rv.in .wrow:nth-child(3) { transition-delay: 0.16s; }
  .js .win.rv.in .wrow:nth-child(4) { transition-delay: 0.24s; } .js .win.rv.in .wrow:nth-child(5) { transition-delay: 0.32s; }
}
@keyframes press { 40% { scale: 0.9; background: var(--sign); color: var(--on-sign); } }
@keyframes swapOut { to { transform: translateY(-120%); opacity: 0; } }
@keyframes drift1 { to { translate: -180px 120px; scale: 1.15; } }
@keyframes drift2 { to { translate: 220px -60px; scale: 0.9; } }

/* Install note after a Mac download (assets/reroute/cta.js). Built from the site's tokens. */
.rr-toast {
  position: fixed; right: clamp(12px, 3vw, 28px); bottom: clamp(12px, 3vw, 28px); z-index: 60;
  width: min(400px, calc(100vw - 24px)); padding: 18px 44px 16px 20px;
  background: var(--raised); color: var(--paint); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow), 0 0 0 1px rgba(246, 135, 31, 0.25);
  font: 400 0.95rem/1.5 var(--body);
  opacity: 0; transform: translateY(12px); transition: opacity 0.2s ease, transform 0.2s ease;
}
.rr-toast.is-in { opacity: 1; transform: none; }
.rr-toast strong { display: block; font: 700 1.05rem/1.3 var(--display); color: var(--sign-hi); margin-bottom: 6px; }
.rr-toast ol { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.rr-toast a { color: var(--sign-hi); text-decoration: underline; text-underline-offset: 2px; }
.rr-toast-x {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.rr-toast-x:hover { background: var(--raised-2); color: var(--paint); }
@media (prefers-reduced-motion: reduce) { .rr-toast { transition: none; transform: none; } }

/* Smallest phones (320–374px): the wordmark, Buy and Menu didn't fit, so Buy covered "Reroute".
   Menu keeps its icon (the label stays for screen readers) and the bar tightens. */
@media (max-width: 374px) {
  .rr-bar { gap: 10px; }
  .rr-brand { gap: 9px; flex-shrink: 0; }
  .rr-brand b { font-size: 1.2rem; }
  .rr-menu summary { padding-inline: 11px; }
  .rr-menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}