/* ==========================================================================
   /raven — product overview (independent exploration B)
   Scoped to .rv-* so existing components (nav, hero scrub, demo-video,
   cta-section, footer, modal) keep working untouched.

   Type: the Graylark site system — ABC Diatype for product headlines/body
   (matching /raven/capabilities/), DM Mono for eyebrows/labels.
   ========================================================================== */

.rv {
  --rv-bg: #000;
  --rv-fg: #f2f2f2;
  --rv-fg-2: #bdbdbd;
  --rv-fg-3: #8a8a8a;
  --rv-line: rgba(255, 255, 255, 0.14);
  --rv-line-soft: rgba(255, 255, 255, 0.08);
  --rv-panel: #0d0d0d;
  --rv-font: var(--font-sans);
  --rv-mono: var(--font-mono);
  background: var(--rv-bg);
  color: var(--rv-fg);
  font-family: var(--rv-font);
}

/* Section rhythm */
.rv-section {
  position: relative;
  padding: 104px 24px;
  scroll-margin-top: 84px;
}
.rv-wrap {
  max-width: 1180px;
  margin: 0 auto;
}
.rv-wrap--wide {
  max-width: 1360px;
  margin: 0 auto;
}

/* Eyebrow: mono, restrained, with a short rule */
.rv-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-family: var(--rv-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rv-fg-3);
}
.rv-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
  flex: none;
}

/* Headlines + body */
.rv-h {
  margin: 0 0 16px;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--rv-fg);
  text-wrap: balance;
}
.rv-sub {
  margin: 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--rv-fg-2);
}
.rv-sub + .rv-sub {
  margin-top: 10px;
}
.rv-sub a,
.rv-link {
  color: var(--rv-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}
.rv-sub a:hover,
.rv-link:hover {
  text-decoration-color: #fff;
}
.rv-head {
  margin-bottom: 48px;
}

/* Product frame: the UI is the visual interest */
.rv-frame {
  border-radius: 12px;
  overflow: hidden;
  background: var(--rv-panel);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.4);
}
.rv-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.rv-frame-cap {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 16px 18px;
  border-top: 1px solid var(--rv-line-soft);
}
.rv-frame-cap .n {
  font-family: var(--rv-mono);
  font-size: 12px;
  color: var(--rv-fg-3);
  flex: none;
}
.rv-frame-cap p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--rv-fg-2);
}
.rv-frame-cap p b {
  color: var(--rv-fg);
  font-weight: 500;
}

/* ============ 03 · Quantitative proof strip ============ */
/* Keyline: Linear-style band separator. A 1px hairline that fades at both
   edges with a faint glow — signs a chapter boundary without boxing content.
   Space does the separating; the keyline just marks it. */
.rv-keyline {
  height: 1px;
  margin: 0 max(24px, calc((100% - 1180px) / 2)) 80px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 18%, rgba(255, 255, 255, 0.16) 82%, transparent);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.07);
}
/* Chapters that open with a keyline get their top space from the previous
   band instead: space, line, space, head. */
.rv-section:has(> .rv-keyline) {
  padding-top: 0;
}
.rv-proof {
  background: #000;
  scroll-margin-top: 90px;
}
.rv-proof[hidden] {
  display: none;
}
.rv-proof-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  max-width: 1180px;
  padding: 0 24px;
}
.rv-metric {
  padding: 72px 32px;
  text-align: left;
}
.rv-metric-v {
  display: block;
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--rv-fg);
}
.rv-metric-l {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--rv-fg-3);
}

/* ============ 04 · Core workflow: capabilities-style docking runway ============
   The capabilities-page transition, reused here. .rv-runway is the scroll
   runway; .rv-pin is one viewport tall and sticky; the first 90vh docks the
   centred frame into the right-hand column while the steps slide in on the
   left; each step then holds ~82vh. page.js maps runway progress to stage
   geometry + the open step; without it the block sits docked with the first
   step open and every link still works. */
.rv-runway {
  height: calc(190vh + 4 * 82vh);
  /* Air between the section headline and the establishing image — the frame
     should land as its own moment, not collide with the head. */
  margin-top: 88px;
}
.rv-pin {
  position: sticky;
  top: 0;
  height: 100vh;
}
/* Both columns are positioned against this box so the stage can travel from
   the centre to the right without reflowing the steps. The two custom
   properties are the layout constants page.js reads; change them here only. */
.rv-flow-split {
  position: relative;
  height: 100%;
  --rv-rail-w: 328px;
  --rv-gap: 48px;
}
/* Narrow rail measure: short lines, quick scanning */
.rv-runway .rv-step p {
  max-width: 33ch;
}
/* --list-x / --list-o are written by page.js during docking: the steps slide
   out from under the stage as the stage moves right. .is-hidden keeps the
   invisible steps out of the tab order. */
.rv-runway .rv-steps {
  position: absolute;
  left: 0;
  /* Top-anchored for top-down readability: the group starts from one fixed
     high point and reads downward, instead of floating centered so the eye
     enters mid-screen and reads bottom-up. */
  top: 28%;
  width: var(--rv-rail-w);
  transform: translate(var(--list-x, 0px), 0);
  opacity: var(--list-o, 1);
}
.rv-runway .rv-steps.is-hidden {
  visibility: hidden;
}
/* The stage is placed by its centre and width (--stage-x/y/w on .rv-stage),
   so docking is a straight interpolation between two boxes: the centred hero
   box and the docked box the defaults describe. */
.rv-runway .rv-stage {
  position: absolute;
  left: var(--stage-x, calc(var(--rv-rail-w) + var(--rv-gap) + (100% - var(--rv-rail-w) - var(--rv-gap)) / 2));
  top: var(--stage-y, 50%);
  width: var(--stage-w, calc(100% - var(--rv-rail-w) - var(--rv-gap)));
  transform: translate(-50%, -50%);
}
/* While the runway is live the stage carries the source frame, so the static
   establishing copy is removed instead of doubling it (display, not
   visibility — it must not hold open a blank gap). */
html.rv-dock .rv-establish {
  display: none;
}
.rv-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rv-step {
  padding: 32px 0 40px;
  border-top: 1px solid var(--rv-line-soft);
  opacity: 0.42;
  transition: opacity 0.25s ease;
}
.rv-step:last-child {
  border-bottom: 1px solid var(--rv-line-soft);
}
.rv-step.is-active {
  opacity: 1;
}
.rv-step-k {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--rv-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rv-fg-3);
}
.rv-step-k .n {
  color: inherit;
}
.rv-step.is-active .rv-step-k {
  color: var(--rv-fg);
}
.rv-step h3 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.018em;
}
.rv-step p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--rv-fg-2);
  max-width: 44ch;
}
.rv-step-link {
  margin: 14px 0 0;
  font-size: 14.5px;
}
.rv-step-link a {
  color: var(--rv-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}
.rv-step-link a:hover {
  text-decoration-color: #fff;
}
.rv-runway .rv-step {
  padding: 30px 0 34px;
  border-top-color: rgba(255, 255, 255, 0.16);
}
.rv-runway .rv-step:last-child {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
/* Scroll progress on the divider (OpenAI recipe): the hairline is the track,
   a 1px white fill draws left-to-right with slot progress (--p, written by
   page.js). Only the active step's fill is visible. */
.rv-runway .rv-step { position: relative; }
.rv-runway .rv-step::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: #fff;
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  opacity: 0;
}
.rv-runway .rv-step.is-active::after { opacity: 1; }
/* Rail confidence (capabilities-index scale, runway-scoped): larger kickers,
   longer dashes, bigger active headline — the names carry the section. */
.rv-runway .rv-step-k {
  font-size: 13px;
  margin-bottom: 16px;
}
.rv-runway .rv-step h3 {
  font-size: 30px;
  margin-bottom: 12px;
}
.rv-runway .rv-step p {
  font-size: 16.5px;
}
/* Accordion (capabilities recipe): every step name stays visible at all
   times — dimmed when inactive, full contrast when active. The active body
   opens beneath its own name and nudges its siblings aside; nothing glides,
   nothing dissolves, nothing leaves the tab order. */
.rv-runway .rv-step-body {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 460ms cubic-bezier(.32,.72,0,1), visibility 0s linear 460ms;
}
.rv-runway .rv-step-body > div { overflow: hidden; }
.rv-runway .rv-step.is-active .rv-step-body {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}
/* Persistent source thread: the same source image across every state */
/* Frame crossfade: only the active state is visible */
.rv-states {
  position: relative;
}
/* Pinned crossfade (capabilities recipe): while the runway is live the states
   stack in a fixed 16:9 window and the active frame dissolves in over ~500ms
   with full opacity and no travel. Everywhere else the classic show-one
   layout stands. */
html.rv-dock .rv-runway .rv-states {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
html.rv-dock .rv-runway .rv-state {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.52s ease;
}
html.rv-dock .rv-runway .rv-state.is-active {
  opacity: 1;
}
html.rv-dock .rv-runway .rv-state picture {
  display: block;
  height: 100%;
}
html.rv-dock .rv-runway .rv-state picture img {
  height: 100%;
  object-fit: cover;
}
/* Nodock runway (Vehicle Intelligence): same pinned recipe — grouped compact
   rail, accordion bodies, crossfading frame, divider progress — but the stage
   starts docked, so there is no establish figure and no dock travel. Track =
   one viewport of pin plus one slot per step. The crossfade is gated on the
   JS-set live class so stacked fallbacks keep the show-one layout. */
.rv-runway--nodock {
  height: calc(100vh + 2 * 82vh);
  margin-top: 40px;
}
html.rv-vehicle-live .rv-runway--nodock .rv-states {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
html.rv-vehicle-live .rv-runway--nodock .rv-state {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.52s ease;
}
html.rv-vehicle-live .rv-runway--nodock .rv-state.is-active {
  opacity: 1;
}
html.rv-vehicle-live .rv-runway--nodock .rv-state picture {
  display: block;
  height: 100%;
}
html.rv-vehicle-live .rv-runway--nodock .rv-state picture img {
  height: 100%;
  object-fit: cover;
}
.rv-state {
  margin: 0;
}
.rv-flow-stage .rv-state {
  display: none;
}
.rv-flow-stage .rv-state.is-active {
  display: block;
}
.rv-trail {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  opacity: var(--list-o, 1);
  font-family: var(--rv-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rv-fg-3);
}
.rv-trail span {
  padding: 6px 0;
  flex: 1;
  text-align: center;
  border-top: 1px solid var(--rv-line-soft);
}
.rv-trail span.is-active {
  color: var(--rv-fg);
  border-top-color: #fff;
}

/* ============ 05 · Identifier workflow ============ */
.rv-id-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
}
.rv-id-grid > div > .rv-sub:first-child {
  margin-top: 28px;
}
.rv-id-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin: 26px 0 0;
  font-size: 15.5px;
}
.rv-guard-note {
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.65;
  color: var(--rv-fg-3);
}
.rv-watch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 20px;
  border: 1px solid var(--rv-line);
  border-radius: 999px;
  background: transparent;
  color: var(--rv-fg);
  font-family: var(--rv-font);
  font-size: 15px;
  cursor: pointer;
}
.rv-watch:hover {
  border-color: #fff;
}
.rv-watch .play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 11px;
}
.rv-watch small {
  color: var(--rv-fg-3);
}

/* Establishing frame: the section's front-and-center product moment, before
   the steps dock the UI to the right rail. Same artifact the workflow then
   follows, so the eye connects the two. */
.rv-establish {
  margin: 56px auto 0;
}
.rv-establish img {
  width: 100%;
}

/* Zoom beat: STATE 01 settles on the listing post, then scroll progress pushes
   INTO the car within the same image — one continuous photograph, no cut to
   a separate photo. Driven by --zp (0 → 1); no transition, the scroll handler
   sets every frame. Cover-crop keeps the 16:9 frame geometry fixed. */
.rv-zoom {
  position: relative;
  overflow: hidden;
}
html.rv-dock .rv-runway .rv-zoom img {
  transform: scale(calc(1 + var(--zp, 0) * 0.9));
  transform-origin: 58% 74%;
  will-change: transform;
}

/* Lightbox for the optional workflow video */
.rv-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.82);
}
.rv-lightbox.is-open {
  display: flex;
}
.rv-lightbox-box {
  width: min(960px, 100%);
}
.rv-lightbox video {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rv-line);
  border-radius: 12px;
  background: #000;
}
.rv-lightbox-close {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 18px;
  border: 1px solid var(--rv-line);
  border-radius: 999px;
  background: transparent;
  color: var(--rv-fg);
  font-family: var(--rv-font);
  font-size: 14px;
  cursor: pointer;
}

/* ============ 06/07 · Split product stories (deliberately asymmetric) ============
   Vehicle Intelligence: copy left, large UI right (~2/3 of the row).
   Image Verification: large UI left, copy right, different ratio.
   Copy leads in the DOM so mobile reads headline-first in both. */
.rv-split {
  display: grid;
  gap: 48px;
  align-items: center;
}
.rv-split--ui-right {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}
.rv-split--ui-left {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.rv-split--ui-left .rv-frame {
  order: -1;
}
.rv-split-copy .rv-sub {
  max-width: 38ch;
}
.rv-more {
  margin: 22px 0 0;
  font-size: 15.5px;
}

/* ============ 08 · Explore: compact capability index ============ */
.rv-index {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border-top: 1px solid var(--rv-line);
}
.rv-index li a {
  display: grid;
  grid-template-columns: 240px 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 20px 4px;
  border-bottom: 1px solid var(--rv-line-soft);
  text-decoration: none;
  color: var(--rv-fg);
}
.rv-index li a:hover .rv-index-name {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.rv-index-name {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.rv-index-name .beta {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 8px;
  border: 1px solid var(--rv-line);
  border-radius: 999px;
  font-family: var(--rv-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rv-fg-3);
  vertical-align: 2px;
}
.rv-index-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--rv-fg-2);
}
.rv-index-go {
  font-family: var(--rv-mono);
  font-size: 13px;
  color: var(--rv-fg-3);
}
.rv-index li a:hover .rv-index-go {
  color: #fff;
}
.rv-all {
  display: inline-block;
  margin-top: 26px;
  font-size: 16px;
}

/* ============ 09 · Trust ============ */
.rv-trust {
  border-top: 1px solid var(--rv-line-soft);
}
.rv-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}
.rv-trust-item {
  border-top: 1px solid var(--rv-line);
  padding-top: 18px;
}
.rv-trust-item b {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 400;
}
.rv-trust-item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rv-fg-2);
}
.rv-trust-item p a {
  color: var(--rv-fg);
}
.rv-trust-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 36px;
  font-size: 15px;
}

/* ============ CTA headline override (keep component, match site type) ============ */
.rv-cta .cta-h {
  font-family: var(--rv-font);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 3.6vw, 44px);
}
.rv-cta .cta-p {
  font-family: var(--rv-font);
}

/* Legacy anchor spans preserved for inbound links */
.rv-anchor {
  position: absolute;
  top: -90px;
}

/* Pinned stages sit beside the step rail, so frame captions would only repeat
   the step copy — hide them there. Stacked layouts (mobile, reduced motion)
   keep captions, since frames need their own context. */
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  .rv-flow-stage .rv-frame-cap {
    display: none;
  }
}

/* ============ Responsive ============ */
@media (max-width: 960px) {
  .rv-id-grid,
  .rv-split {
    grid-template-columns: 1fr;
  }
  .rv-split {
    gap: 28px;
  }
  .rv-split--ui-left .rv-frame {
    order: 0;
  }
  .rv-flow-stage {
    position: static;
  }
  /* Docking runway goes fully static: steps stack, every state shows */
  .rv-runway {
    height: auto;
    margin-top: 40px;
  }
  .rv-pin {
    position: static;
    height: auto;
  }
  .rv-flow-split {
    position: static;
    height: auto;
  }
  .rv-runway .rv-steps {
    position: static;
    width: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    margin-bottom: 36px;
  }
  .rv-runway .rv-stage {
    position: static;
    width: auto;
    transform: none;
  }
  /* Mobile: stack all states naturally, no sticky, no hidden frames */
  .rv-flow-stage .rv-state {
    display: block;
    margin-bottom: 28px;
  }
  .rv-flow-stage .rv-state:last-child {
    margin-bottom: 0;
  }
  .rv-trail {
    display: none;
  }
  .rv-step {
    opacity: 1;
    padding: 22px 0 26px;
  }
  /* No pin, no accordion: every body stays open */
  .rv-runway .rv-step-body {
    grid-template-rows: 1fr;
    visibility: visible;
  }
  /* Mobile editorial interleave: each step reads with its own frame
     (text, image, text, image) instead of all text followed by all
     images. Wrappers flatten; attribute order pairs each step with
     its frame. Desktop pinning is untouched. */
  .rv-runway .rv-flow-split {
    display: flex;
    flex-direction: column;
  }
  .rv-runway .rv-steps,
  .rv-runway .rv-stage,
  .rv-runway .rv-states {
    display: contents;
  }
  .rv-runway [data-rv-step="source"] { order: 1; }
  .rv-runway [data-rv-state="source"] { order: 2; }
  .rv-runway [data-rv-step="region"] { order: 3; }
  .rv-runway [data-rv-state="region"] { order: 4; }
  .rv-runway [data-rv-step="street"] { order: 5; }
  .rv-runway [data-rv-state="street"] { order: 6; }
  .rv-runway [data-rv-step="case"] { order: 7; }
  .rv-runway [data-rv-state="case"] { order: 8; }
  .rv-runway [data-rv-step="interior"] { order: 1; }
  .rv-runway [data-rv-state="interior"] { order: 2; }
  .rv-runway [data-rv-step="exterior"] { order: 3; }
  .rv-runway [data-rv-state="exterior"] { order: 4; }
  /* The establishing image doubles the source frame once everything
     stacks — the step's own frame carries the moment on mobile. */
  .rv-establish {
    display: none;
  }
  .rv-trust-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .rv-index li a {
    grid-template-columns: 1fr auto;
  }
  .rv-index-name {
    grid-column: 1;
    grid-row: 1;
  }
  .rv-index-go {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .rv-index-desc {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 700px) {
  .rv-section {
    padding: 72px 20px;
  }
  .rv-proof-row {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
  .rv-metric {
    padding: 32px 0;
  }
}

/* ============ Reduced motion: static frames, no transitions ============ */
@media (prefers-reduced-motion: reduce) {
  .rv-flow-stage {
    position: static;
  }
  .rv-runway {
    height: auto;
    margin-top: 40px;
  }
  .rv-pin {
    position: static;
    height: auto;
  }
  .rv-flow-split {
    position: static;
    height: auto;
  }
  .rv-runway .rv-steps {
    position: static;
    width: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    margin-bottom: 36px;
  }
  .rv-runway .rv-stage {
    position: static;
    width: auto;
    transform: none;
  }
  .rv-flow-stage .rv-state {
    display: block;
    margin-bottom: 28px;
  }
  .rv-step {
    opacity: 1;
  }
  /* Reduced motion: no pin, no accordion — every body stays open */
  .rv-runway .rv-step-body {
    grid-template-rows: 1fr;
    visibility: visible;
  }
  .rv-step,
  .rv-watch,
  .rv-index li a {
    transition: none;
  }
}