/* RIDE home page effects, restored from the earlier showcase (548a0f7) on top of the hub design system.
   Loaded by the home page only. Progressive enhancement:
   - anything that starts hidden is gated on html.fx-on, which hub-fx-boot.js sets only when motion is welcome
     (not reduced motion, not Save-Data, not ?fx=static) and which hub-fx.js backs up with html.fx-ready;
   - every animation sits behind prefers-reduced-motion: no-preference;
   - transform and opacity only; nothing loops while off-screen (hub-fx.js pauses it);
   - no inline styles are needed: the script only sets custom properties and transforms through the CSSOM. */
:root { --fx-ease: cubic-bezier(.2, .8, .2, 1); --fx-ease-io: cubic-bezier(.77, 0, .18, 1); }

/* ---------- Contour field: topographic atmosphere behind the hero, the beta band and the road ahead ---------- */
/* Static layer first (the lightweight fallback); hub-gl.js paints a live field over it where graphics allow. */
.fx-contours {
  position: absolute; inset: -10% -6%; z-index: -2; pointer-events: none; opacity: .42;
  background: url("fx/contours.svg") center / 1100px auto repeat;
}
:root[data-theme="dark"] .fx-contours, .band-night .fx-contours { opacity: .5; }
.fx-contours canvas.gl-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; will-change: transform; }
.fx-contours.gl-on { inset: 0; background: none; animation: none !important; opacity: .5; }
:root[data-theme="light"] .fx-contours.gl-on { opacity: .62; }
.band-night { position: relative; isolation: isolate; }
.band-night > .fx-contours { z-index: -1; }
:root[data-theme] .band-night .fx-contours.gl-on { opacity: .5; } /* night bands keep their own strength in the Day theme too */
@media (max-width: 899px) { .fx-contours.gl-on { opacity: .36; } :root[data-theme="light"] .fx-contours.gl-on { opacity: .5; } :root[data-theme] .band-night .fx-contours.gl-on { opacity: .4; } }
@media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
  .fx-on .fx-contours:not(.gl-on) { animation: fx-drift 70s linear infinite alternate; }
  .fx-on .fx-contours.fx-offscreen { animation-play-state: paused; }
  @keyframes fx-drift { to { transform: translate3d(-2.5%, -1.5%, 0) rotate(.4deg); } }
}

/* ---------- Hero: staged entrance, and the mark is a road ---------- */
.hero h1 em { position: relative; display: inline-block; padding-bottom: .04em; }
.hero h1 em::after {
  content: ""; position: absolute; left: .04em; right: .02em; bottom: .02em; height: .085em; border-radius: .03em;
  background: var(--ink); transform: rotate(-1.6deg); transform-origin: left center; pointer-events: none;
}
.hero h1 em::before {
  content: ""; position: absolute; z-index: 1; left: .09em; right: .07em; bottom: .051em; height: .018em; border-radius: .01em;
  background: repeating-linear-gradient(90deg, var(--accent) 0 .16em, transparent .16em .28em);
  transform: rotate(-1.6deg); transform-origin: left center; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .fx-on .hero-copy > *, .fx-on .hero-visual, .fx-on .hero .fact-strip { opacity: 0; transform: translateY(18px); animation: fx-rise .9s var(--fx-ease) forwards; }
  .fx-on .hero-copy > :nth-child(1) { animation-delay: .05s; }
  .fx-on .hero-copy > :nth-child(2) { animation-delay: .12s; }
  .fx-on .hero-copy > :nth-child(3) { animation-delay: .22s; }
  .fx-on .hero-copy > :nth-child(4) { animation-delay: .32s; }
  .fx-on .hero-copy > :nth-child(5) { animation-delay: .42s; }
  .fx-on .hero-visual { transform: translateY(28px) scale(.985); animation-duration: 1.1s; animation-delay: .26s; }
  .fx-on .hero .fact-strip { animation-delay: .55s; }
  .fx-on .hero h1 em::after, .fx-on .hero h1 em::before { animation: fx-road-draw 1.1s var(--fx-ease) .55s both; }
  @keyframes fx-rise { to { opacity: 1; transform: none; } }
  @keyframes fx-road-draw { from { transform: rotate(-1.6deg) scaleX(0); } to { transform: rotate(-1.6deg) scaleX(1); } }
}

/* Bands that host a contour field must clip it (the field is wider than the band). */
.beta-band.band-night, #next.band-night { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }

/* ---------- Reveals: headings word by word, blocks rise once ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fx-on .fx-reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s var(--fx-ease), transform .85s var(--fx-ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .fx-on .fx-reveal.is-in { opacity: 1; transform: none; }
  .fx-on .fx-words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
  .fx-on .fx-words .w > span { display: inline-block; transform: translateY(112%); transition: transform .85s var(--fx-ease); transition-delay: calc(var(--i, 0) * 55ms); }
  .fx-on .fx-words.is-in .w > span { transform: none; }
}

/* ---------- Scroll progress line ---------- */
.fx-progress { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), var(--accent-text)); }

/* ---------- Hero screens: tilt and glare (mouse and pen only; hub-fx.js adds the classes) ---------- */
.fx-tilt { transition: transform .7s var(--fx-ease); }
.fx-tilt.is-tilting { transition: transform .12s linear; will-change: transform; }
.fx-glare {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(60% 42% at var(--gx, 50%) var(--gy, 28%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 72%); mix-blend-mode: soft-light;
}
.fx-tilt.is-tilting .fx-glare { opacity: 1; }

/* ---------- Cursor halo, card spotlight, magnetic buttons ---------- */
.fx-halo {
  position: fixed; left: 0; top: 0; z-index: 70; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid var(--accent); border-radius: 50%;
  pointer-events: none; opacity: 0; will-change: transform;
  transition: opacity .25s ease, width .32s var(--fx-ease), height .32s var(--fx-ease), margin .32s var(--fx-ease), background-color .32s ease;
}
.fx-halo.is-on { opacity: .85; }
.fx-halo.is-hot { width: 60px; height: 60px; margin: -30px 0 0 -30px; background-color: color-mix(in srgb, var(--accent) 15%, transparent); }
.fx-halo.has-label, .fx-halo.is-hot.has-label { width: 76px; height: 76px; margin: -38px 0 0 -38px; background-color: var(--accent); }
.fx-halo.is-on.has-label { opacity: .96; }
.fx-halo::after {
  content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .2s ease;
  font: 800 .7rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--on-accent);
}
.fx-halo.has-label::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .fx-on .fx-spot { position: relative; isolation: isolate; } /* no transition here: cards share this element with the reveal transition */
  .fx-on .fx-spot::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 17%, transparent), transparent 68%);
  }
  .fx-on .fx-spot:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
  .fx-on .fx-spot:hover::after { opacity: 1; }
  .fx-on main .btn:not(.btn--quiet) { transition: transform .55s var(--fx-ease), background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .2s ease; }
  .fx-on main .btn.is-mag { transition: transform .16s ease-out, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .2s ease; }
  .fx-on main .btn:not(.btn--quiet):hover { box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
}

/* ---------- Theme switch ripple ---------- */
.fx-theme-wave {
  position: fixed; left: var(--tw-x); top: var(--tw-y); width: var(--tw-size); height: var(--tw-size); z-index: 19; pointer-events: none; opacity: 0;
  border: 2px solid var(--accent); border-radius: 50%; background: color-mix(in srgb, var(--accent) 5%, transparent);
  transform: translate(-50%, -50%) scale(.015); animation: fx-theme-wave 600ms cubic-bezier(.22, .8, .2, 1) forwards;
}
@keyframes fx-theme-wave { 0% { opacity: .35; transform: translate(-50%, -50%) scale(.015); } 60% { opacity: .15; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }

/* ---------- Ribbons (decorative, hidden unless motion is welcome) ---------- */
html:not(.fx-ready) .marquee { display: none; } /* fx-ready is set by hub-fx.js only when motion is welcome and the script runs */
.marquee { position: relative; overflow: hidden; contain: paint; padding-block: clamp(1.9rem, 4.6vw, 3.9rem); background: var(--ground); border-block: 1px solid var(--line); }
.marquee-skew { display: block; margin-block: clamp(2px, .8vw, 8px); transform: rotate(-1.2deg); transform-origin: 50% 50%; }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-set { display: flex; flex: none; align-items: center; gap: clamp(1.4rem, 3.2vw, 3rem); padding-right: clamp(1.4rem, 3.2vw, 3rem); }
.marquee-set span { display: block; white-space: nowrap; font-size: clamp(2.5rem, 7.2vw, 6.6rem); font-weight: 800; line-height: 1.06; letter-spacing: -.05em; color: var(--ink); }
.marquee-set span:nth-of-type(even) { color: var(--ground); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.marquee-set i { display: block; flex: none; width: clamp(26px, 3.4vw, 46px); height: 6px; border-radius: 2px; background: var(--accent); transform: rotate(-14deg); }
.marquee--b { background: var(--accent); border-color: var(--accent); }
.marquee--b .marquee-set span { color: var(--on-accent); }
.marquee--b .marquee-set span:nth-of-type(even) { color: var(--accent); -webkit-text-stroke: 3px var(--on-accent); }
.marquee--b .marquee-set i { background: var(--on-accent); }

/* ---------- Odometer ---------- */
.big[data-odo] { position: relative; }
.odo { display: inline-flex; height: 1em; overflow: hidden; overflow: clip; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.odo-col { display: block; height: 1em; overflow: hidden; overflow: clip; margin-right: -.03em; }
.odo-strip { display: block; transform: translateY(calc(var(--n, 0) * -1em)); transition: transform 1.7s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0s); }
.odo-strip span { display: block; height: 1em; line-height: 1; text-align: center; }

/* ---------- Scene picture: curtain and drift on wide screens, a fade-up on phones ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fx-on .fx-scene figcaption { opacity: 0; transition: opacity .8s ease .5s; }
  .fx-on .fx-scene.is-in figcaption { opacity: 1; }
  .fx-on .fx-scene picture { display: block; opacity: 0; transform: translateY(24px); transition: opacity .75s var(--fx-ease), transform .85s var(--fx-ease); }
  .fx-on .fx-scene.is-in picture { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
  .fx-on .fx-scene picture { overflow: hidden; border: 1px solid var(--line); border-radius: calc(var(--radius) + .25rem); opacity: 1; transform: none; clip-path: inset(0 50% 0 50% round calc(var(--radius) + .25rem)); transition: clip-path 1.3s var(--fx-ease-io); }
  .fx-on .fx-scene.is-in picture { clip-path: inset(0 0 0 0 round calc(var(--radius) + .25rem)); }
  .fx-on .fx-scene img { border: 0; border-radius: 0; transform: scale(1.12) translate3d(0, calc(var(--p, 0) * 5%), 0); will-change: transform; }
}

/* ---------- Hidden tab: the decorative loops stop (hub-fx.js toggles html.fx-tab-hidden, home page only) and go on when it returns ---------- */
html.fx-tab-hidden .fx-contours,
html.fx-tab-hidden .road-stops .road-lit,
html.fx-tab-hidden .road-stops .road-marker-ring,
html.fx-tab-hidden .road-stops .stop-node::after,
html.fx-tab-hidden .fm-road::before,
html.fx-tab-hidden .road-lab .rl-dash { animation-play-state: paused !important; }

/* ---------- Print and forced colors: decoration off ---------- */
@media print { .marquee, .fx-contours, .fx-progress, .fx-halo, .fx-theme-wave { display: none !important; } }
@media (forced-colors: active) { .marquee, .fx-contours, .fx-glare, .fx-halo, .fx-theme-wave { display: none !important; } }

/* ---------- The road ahead (night band): stops on a road that lights up as you scroll ---------- */
.roadmap > .wrap { position: relative; z-index: 1; }
.road-track { position: relative; margin-bottom: 2rem; }
.road-stops { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.1rem, 3vw, 2.1rem); }
.road-stops::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, var(--line-strong) 0 10px, transparent 10px 20px); opacity: .7; }
.road-stops.has-road::before { display: none; }
.road-stop { position: relative; z-index: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: .9rem; align-items: start; margin: 0; }
.stop-node {
  grid-column: 1; grid-row: 1; justify-self: center; align-self: start; position: relative; z-index: 2; margin-top: 1.5rem; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid var(--line-strong); background: var(--ground); box-shadow: 0 0 0 6px var(--ground);
  transition: box-shadow .6s ease, border-color .6s ease, opacity .6s ease;
}
.road-stop[data-status="prep"] .stop-node { background: var(--accent); border-color: var(--accent); }
.road-stop[data-status="dev"] .stop-node { border-color: var(--ink); background: linear-gradient(90deg, var(--ink) 28%, var(--ground) 28%); }
.road-stop[data-status="explore"] .stop-node { border: 2px dashed var(--ink-2); }
.road-stop[data-status="prep"] .stop-node::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; }
.has-road .road-stop:not(.is-reached) .stop-node { opacity: .5; }
.road-stop.is-reached .stop-node { box-shadow: 0 0 0 6px var(--ground), 0 0 22px 3px color-mix(in srgb, var(--accent) 50%, transparent); }
.stop-card { grid-column: 2; grid-row: 1; min-width: 0; padding: clamp(1.1rem, 2.4vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--frame); box-shadow: var(--shadow); transition: border-color .6s ease; }
.has-road .road-stop.is-reached .stop-card { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.stop-card h3 { margin: .65rem 0 .4rem; }
.stop-card p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.has-road .road-stop:nth-child(odd) .stop-node { left: -8px; }
.has-road .road-stop:nth-child(even) .stop-node { left: 8px; }
@media (min-width: 900px) {
  .road-stops::before { left: 50%; margin-left: -1px; }
  .road-stop { grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr); column-gap: 0; }
  .stop-node { grid-column: 2; margin-top: 1.9rem; }
  .road-stop:nth-child(odd) .stop-card { grid-column: 1; }
  .road-stop:nth-child(even) .stop-card { grid-column: 3; }
  .road-stop::before { content: ""; position: absolute; top: 38px; height: 2px; width: 70px; background: var(--line-strong); opacity: .6; transition: background-color .6s ease, opacity .6s ease; }
  .road-stop:nth-child(odd)::before { left: calc(50% - 70px); }
  .road-stop:nth-child(even)::before { left: 50%; }
  .has-road .road-stop::before { width: 22px; }
  .has-road .road-stop:nth-child(even)::before { left: calc(50% + 48px); }
  .has-road .road-stop.is-reached::before { background: var(--accent); opacity: 1; }
  .has-road .road-stop:nth-child(odd) .stop-node { left: -48px; }
  .has-road .road-stop:nth-child(even) .stop-node { left: 48px; }
  .fx-on .road-stop:nth-child(odd) .stop-card.fx-reveal { transform: translateX(-46px); }
  .fx-on .road-stop:nth-child(even) .stop-card.fx-reveal { transform: translateX(46px); }
  .fx-on .road-stop .stop-card.fx-reveal.is-in { transform: none; }
}
.road-svg { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.road-edge, .road-bed, .road-dash, .road-glow, .road-lit { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.road-edge { stroke: var(--raise); stroke-width: 22px; }
.road-bed { stroke: var(--frame); stroke-width: 18px; }
.road-dash { stroke: var(--accent); stroke-opacity: .3; stroke-width: 2px; stroke-dasharray: 10 12; stroke-linecap: butt; }
.road-glow { stroke: var(--accent); stroke-opacity: .15; stroke-width: 26px; }
.road-lit { stroke: var(--accent); stroke-width: 2.6px; stroke-dasharray: 10 12; stroke-linecap: butt; }
.road-marker-dot, .road-marker-arrow { fill: var(--accent); }
.road-marker-ring { fill: none; stroke: var(--accent); stroke-opacity: .6; stroke-width: 1.5px; transform-box: fill-box; transform-origin: center; }
.road-lean {
  position: absolute; left: 0; top: 0; z-index: 2; display: none; padding: 5px 10px 5px 9px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 999px; background: color-mix(in srgb, var(--ground) 92%, transparent); color: var(--accent-text); pointer-events: none; will-change: transform;
  font: 600 .72rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (min-width: 900px) { .road-stops.has-road ~ .road-lean { display: block; } }
@media (prefers-reduced-motion: no-preference) {
  .fx-on .has-road .road-lit { animation: fx-march .9s linear infinite; }
  .fx-on .has-road .road-marker-ring { animation: fx-ring 1.7s ease-out infinite; }
  .fx-on .road-stop[data-status="prep"] .stop-node::after { animation: fx-pulse 2.6s ease-out infinite; }
  .road-stops.fx-offscreen .road-lit, .road-stops.fx-offscreen .road-marker-ring, .road-stops.fx-offscreen .stop-node::after { animation-play-state: paused; }
  @keyframes fx-march { to { stroke-dashoffset: -22; } }
  @keyframes fx-ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.55); opacity: 0; } }
  @keyframes fx-pulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
}
@media (forced-colors: active) { .road-svg, .road-lean { display: none; } }

/* ---------- Road-style lab (an interactive illustration in the Plan section; hub-lab.js reveals it) ---------- */
.road-lab { display: grid; gap: .9rem; width: 100%; max-width: 38rem; margin: 1.4rem 0 .4rem; padding: clamp(1rem, 2vw, 1.4rem); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--frame); box-shadow: var(--shadow); }
.road-lab-title { margin: 0; font-size: .72rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; color: var(--accent-text); }
.road-lab-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
@media (max-width: 26.2rem) { .road-lab-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.road-chip { position: relative; display: flex; align-items: center; justify-content: center; min-height: 2.75rem; margin: 0; padding: .4rem .5rem; border: 1px solid var(--line-strong); border-radius: .7rem; font-size: .84rem; font-weight: 700; line-height: 1.2; text-align: center; color: var(--ink); cursor: pointer; user-select: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.road-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.road-chip:hover { border-color: var(--accent); }
.road-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.road-chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.road-lab-stage { position: relative; border: 1px solid var(--line); border-radius: .7rem; background: var(--sunk); overflow: hidden; }
.road-lab-svg { display: block; width: 100%; height: auto; }
.rl-edge, .rl-bed, .rl-dash { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rl-edge { stroke: var(--line); stroke-width: 22; }
.rl-bed { stroke: var(--raise); stroke-width: 18; }
.rl-dash { stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 10 10; stroke-linecap: butt; }
.rl-a { fill: var(--data); }
.rl-b { fill: var(--ink); }
.rl-dot { fill: var(--accent); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 80%, transparent)); }
.road-lab-tag { position: absolute; right: .6rem; bottom: .4rem; margin: 0; font-size: .66rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.road-lab-read { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .6rem 1.1rem; }
.road-lab-blurb { flex: 1 1 14rem; min-height: 3em; margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink); }
.road-lab-meter { display: inline-flex; align-items: center; gap: .6rem; margin: 0; font-size: .72rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.rl-pips { display: inline-flex; gap: 4px; }
.rl-pips i { width: 16px; height: 6px; border-radius: 2px; background: var(--line); transition: background-color .3s ease; }
.road-lab[data-style="0"] .rl-pips i:nth-child(-n+1), .road-lab[data-style="1"] .rl-pips i:nth-child(-n+2),
.road-lab[data-style="2"] .rl-pips i:nth-child(-n+3), .road-lab[data-style="3"] .rl-pips i:nth-child(-n+4) { background: var(--accent); }
.road-lab-note { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .fx-on .road-lab.is-live .rl-dash { animation: fx-lab-march 1.2s linear infinite; }
  @keyframes fx-lab-march { to { stroke-dashoffset: -20; } }
}
@media (forced-colors: active) { .road-chip.is-on { background: Highlight; color: HighlightText; border-color: Highlight; } .rl-edge { stroke: GrayText; } .rl-bed { stroke: Canvas; } .rl-dash { stroke: Highlight; } .rl-dot { fill: Highlight; } }
@media print { .road-lab { display: none !important; } }

/* ---------- Lean gauge you can play (cockpit section; the card stays dark in both themes, like the cockpit itself) ---------- */
.feature-media > .lean-stage { grid-column: 1 / -1; width: 100%; max-width: 28rem; }
.lean-stage { --data: #B6F2D8; position: relative; margin: 0; border: 1px solid var(--line-strong); border-radius: 1.2rem; background: radial-gradient(120% 90% at 50% 0%, var(--raise) 0%, var(--ground) 70%); color: var(--ink); overflow: hidden; overflow: clip; box-shadow: var(--shadow); }
.lean-canvas { position: relative; padding: 1.6rem clamp(.9rem, 4vw, 1.9rem) .5rem; }
.lean-tag { position: absolute; left: 1rem; top: 1rem; z-index: 1; padding: .2rem .65rem; border: 1px solid var(--line-strong); border-radius: 999px; background: color-mix(in srgb, var(--ground) 86%, transparent); font-size: .66rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; color: var(--ink); }
.lean-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.lean-track { fill: none; stroke: var(--line); stroke-width: 12; stroke-linecap: round; }
.lean-sweep { fill: none; stroke: var(--data); stroke-width: 12; stroke-linecap: round; }
.lean-tip { fill: var(--data); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--data) 75%, transparent)); }
.lean-num { fill: var(--ink); font-size: 68px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.lean-lr { fill: var(--ink-2); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .06em; transition: fill .5s ease; }
.lean-lr.is-new { fill: var(--data); }
.lean-end-l, .lean-end-r { fill: var(--ink-2); font-size: 13px; font-weight: 700; letter-spacing: .14em; }
.lean-ground { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.lean-ghost { color: var(--accent); opacity: .45; stroke-dasharray: 4 6; }
.lean-bike { color: var(--ink); }
.lb-solid { fill: var(--ground); }
.lb-lamp { fill: var(--accent); stroke: none; }
.lean-tread { stroke: var(--accent); stroke-width: 2.4; }
.lean-hit { fill: transparent; cursor: grab; touch-action: pan-y; }
.lean-stage.is-dragging .lean-hit { cursor: grabbing; }
.lean-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; padding: .25rem clamp(.9rem, 4vw, 1.9rem) 1.1rem; }
@media (max-width: 24.9rem) { .lean-controls { grid-template-columns: auto minmax(0, 1fr) auto; } .lean-reset { grid-column: 1 / -1; justify-self: center; } }
.lean-end { font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--ink-2); }
.lean-range { -webkit-appearance: none; appearance: none; width: 100%; height: 2.75rem; margin: 0; background: transparent; cursor: pointer; }
.lean-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--line) 0, var(--line) calc(50% - 1px), var(--accent) calc(50% - 1px), var(--accent) calc(50% + 1px), var(--line) calc(50% + 1px), var(--line) 100%); }
.lean-range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--line) 0, var(--line) calc(50% - 1px), var(--accent) calc(50% - 1px), var(--accent) calc(50% + 1px), var(--line) calc(50% + 1px), var(--line) 100%); }
.lean-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 26px; height: 26px; margin-top: -11px; border: 3px solid var(--ground); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 4px 14px rgba(0, 0, 0, .6); }
.lean-range::-moz-range-thumb { box-sizing: border-box; width: 26px; height: 26px; border: 3px solid var(--ground); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 4px 14px rgba(0, 0, 0, .6); }
.lean-range:focus-visible { border-radius: 8px; outline: 3px solid var(--focus); outline-offset: 2px; }
.lean-reset { min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.lean-reset:hover { border-color: var(--accent); color: var(--accent-text); }
.lean-stage figcaption { padding: .9rem clamp(.9rem, 4vw, 1.9rem) 1.1rem; border-top: 1px solid var(--line); font-size: .8rem; line-height: 1.55; color: var(--ink-2); }
.lean-hint[hidden] { display: none; }
@media (forced-colors: active) { .lean-track { stroke: GrayText; } .lean-sweep { stroke: Highlight; } .lean-tip, .lb-lamp { fill: Highlight; } .lean-num, .lean-lr { fill: CanvasText; } .lean-bike, .lean-ghost { color: CanvasText; } .lb-solid { fill: Canvas; } }
@media print { .lean-stage { display: none !important; } }

/* ---------- Footer wordmark (injected by hub-fx.js, home page only): tone-on-tone letters, a road stripe that moves while visible ---------- */
.site-footer:has(.footer-mark) { padding-bottom: 0; overflow: hidden; overflow: clip; }
.footer-mark { margin-top: clamp(2rem, 5vw, 4.5rem); padding-inline: 1.25rem; user-select: none; -webkit-user-select: none; pointer-events: none; }
.fm-word { display: flex; justify-content: center; padding-right: .06em; font-size: clamp(4rem, 41vw, 30rem); font-weight: 800; line-height: .8; letter-spacing: -.04em; color: var(--raise); -webkit-text-stroke: 1px var(--line); }
.fm-l { display: block; flex: none; text-align: center; }
.fm-l:nth-child(1) { width: .63em; }
.fm-l:nth-child(2) { width: .25em; }
.fm-l:nth-child(3) { width: .68em; }
.fm-l:nth-child(4) { width: .57em; }
.fm-road { display: block; position: relative; height: 8px; margin-block: clamp(.6rem, 1.8vw, 1.4rem) calc(clamp(1rem, 2.4vw, 1.9rem) + env(safe-area-inset-bottom)); overflow: hidden; }
.fm-road::before { content: ""; position: absolute; left: 0; top: 0; width: calc(100% + 76px); height: 100%; background: repeating-linear-gradient(90deg, var(--accent) 0 44px, transparent 44px 76px); }
@media (prefers-reduced-motion: no-preference) {
  .fx-on .footer-mark.is-live .fm-road::before { animation: fx-road 1.4s linear infinite; }
  @keyframes fx-road { to { transform: translateX(-76px); } }
}
@media print, (forced-colors: active) { .footer-mark { display: none !important; } }