/*
 * Design tokens from the Routific Website Figma file (variables on node 7166:92349).
 * Code components render inside Shadow DOM, so tokens are declared on :host as well as :root
 * (:root covers the local preview and Webflow's own page; :host covers the shadow tree).
 */
:host,
:host {
  /* Brand */
  --rt-indigo-100: #374cd2;
  --rt-indigo-200: #667afa;
  --rt-yellow-200: #ffad0a;
  --rt-yellow-border: #b97b01;
  --rt-turquoise: #45c4d7;
  --rt-primary-500: #326bfc;
  --rt-primary-600: #1750e3;
  --rt-hero-blue: #1f36a7;
  --rt-hero-lilac: #eceefb;

  /* Text */
  --rt-text-primary: #282828;
  --rt-text-secondary: #676d7e;
  --rt-text-tertiary: #9da1af;

  /* Route colours */
  --rt-route-violet: #7547bf;
  --rt-route-pink: #ff85a9;
  --rt-route-sky: #269ed1;
  --rt-route-lilac: #a770db;

  /* Type — Proxima Nova is expected to be loaded by the Webflow site (Adobe Fonts);
     Plus Jakarta Sans and Figtree are loaded from Google Fonts by useDocumentFonts(). */
  --rt-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --rt-font-heading: "Figtree", system-ui, sans-serif;
  --rt-font-body: "proxima-nova", "Proxima Nova", "Figtree", system-ui, sans-serif;
  --rt-font-ui: "SF Pro Text", -apple-system, "Inter", system-ui, sans-serif;

  /* Radii */
  --rt-radius-md: 8px;
  --rt-radius-lg: 16px;

  /* Vector map (Hero/showcase/MapBase.tsx): Mapbox-light look of the current Routific UI */
  --map-land: #edeff3;
  --map-street: #fcfdfe;
  --map-park: #d3e9d1;
  --map-water: #b3caf3;
  --map-industrial: #f2e4c6;
  --map-highway: #aab3c7;
  --map-highway-edge: #fcfdfe;
}

/* ---------------------------------------------------------------------------
 * Testimonial card (src/lib/TestimonialCard.tsx): frosted deep-blue card with a quote mark, the
 * quote, and the author (avatar or initials, name, role). Used by the Hero and Reviews sections.
 * Needs tokens.css.
 * ------------------------------------------------------------------------- */
.rt-card {
  display: flex;
  border-radius: var(--rt-radius-lg);
  /* Frosted glass over a deep-blue base, so the white text stays readable where the cards
     sit on the lighter part of the gradient (stacked on mobile). */
  background:
    linear-gradient(160deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.05)),
    rgb(31 54 167 / 0.85);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    0 24px 48px -24px rgb(8 16 70 / 0.55);
  color: #fff;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.rt-figure {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 28px 28px 24px;
}

.rt-quote-mark {
  width: 28px;
  height: 21px;
  fill: var(--rt-turquoise);
}

.rt-quote {
  flex: 1;
  margin: 0;
}

.rt-quote p {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  text-wrap: pretty;
}

.rt-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

.rt-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85);
}

.rt-avatar-initials {
  display: grid;
  place-items: center;
  font-family: var(--rt-font-heading);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}
.rt-tone-0 { background: linear-gradient(135deg, var(--rt-turquoise), var(--rt-route-sky)); }
.rt-tone-1 { background: linear-gradient(135deg, var(--rt-route-pink), var(--rt-route-violet)); }
.rt-tone-2 { background: linear-gradient(135deg, var(--rt-indigo-200), var(--rt-route-lilac)); }
.rt-tone-3 { background: linear-gradient(135deg, var(--rt-yellow-200), var(--rt-route-pink)); }

.rt-author-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rt-author-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.rt-author-role {
  font-size: 14px;
  line-height: 20px;
  color: rgb(255 255 255 / 0.72);
}

/* Shared styles for the vector map (Hero/showcase/MapBase.tsx). Colours are in tokens.css. */
.rt-map-labels text {
  font-family: var(--rt-font-heading);
  font-weight: 700;
  fill: #8a90a2;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.6px;
}

/* ---------------------------------------------------------------------------
 * The Routific driver app (2026 redesign), shared by the hero and Track progress phones.
 * Drawn by src/components/Hero/showcase/DriverUi.tsx in Figma px (Figtree, the app's colours).
 * Selectors carry `svg` so they beat each phone's own `… text` defaults.
 * ------------------------------------------------------------------------- */
svg .rt-da text {
  font-family: var(--rt-font-heading);
  font-weight: 400;
  fill: #282828;
}

svg .rt-da .rt-da-body { font-size: 16px; }
svg .rt-da .rt-da-strong { font-weight: 500; }
svg .rt-da .rt-da-semi { font-weight: 600; }
svg .rt-da .rt-da-muted { fill: #676d7e; }
svg .rt-da .rt-da-cap { font-size: 14px; fill: #676d7e; }
svg .rt-da .rt-da-label { font-size: 14px; font-weight: 600; fill: #676d7e; }
svg .rt-da .rt-da-small { font-size: 12px; fill: #676d7e; }
svg .rt-da .rt-da-ok { fill: #32a67f; }
svg .rt-da .rt-da-title { font-size: 18px; font-weight: 600; text-anchor: middle; }
svg .rt-da .rt-da-h { font-size: 20px; font-weight: 600; }

svg .rt-da .rt-da-seg { font-size: 16px; fill: #8babfc; }
svg .rt-da .rt-da-seg-on { font-weight: 600; fill: #1750e3; }

svg .rt-da .rt-da-btn { font-size: 18px; font-weight: 500; fill: #fff; }
svg .rt-da .rt-da-btn-outline { fill: #326bfc; }
svg .rt-da .rt-da-btn-off { fill: #ccd0db; }
svg .rt-da .rt-da-link { font-size: 16px; font-weight: 500; fill: #326bfc; }

svg .rt-da .rt-da-badge { font-size: 14px; text-anchor: middle; dominant-baseline: central; }
svg .rt-da .rt-da-badge-lg { font-size: 16px; }
svg .rt-da .rt-da-badge-next { fill: #fff; }
svg .rt-da .rt-da-badge-done { fill: #676d7e; }

/* camera */
svg .rt-da .rt-da-count { font-size: 18px; fill: #fff; }

/* the current-location dot's pulse */
.rt-da-pulse {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: rt-da-pulse 2.2s ease-out infinite;
}
@keyframes rt-da-pulse {
  0% { opacity: 0.45; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.6); }
}
@media (prefers-reduced-motion: reduce) {
  .rt-da-pulse { animation: none; }
}

/* ---------------------------------------------------------------------------
 * Device internals (SVG). Sizes are in each SVG's own units (Figma frame px).
 * ------------------------------------------------------------------------- */

.rt-d-svg,
.rt-p-svg {
  overflow: hidden;
}

.rt-d-svg {
  font-family: var(--rt-font-body);
  font-weight: 500;
}


.rt-stop-label {
  font-size: 5.675px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
}

.rt-d-t8 { font-size: 8px; }
.rt-d-menu { font-size: 10px; font-weight: 500; }
.rt-d-strong { font-weight: 700; }
.rt-d-t9 { font-size: 9.5px; fill: #282828; }
.rt-d-t75 { font-size: 7.5px; fill: #3d4354; }
.rt-d-h1 { font-size: 13px; font-weight: 700; fill: #1d2433; letter-spacing: -0.2px; }
.rt-d-date { font-size: 8px; font-weight: 600; fill: #1d2a52; text-anchor: middle; }
.rt-d-colhead { font-size: 6.4px; fill: #9da1af; }
.rt-d-stat { font-size: 8px; fill: #3d4354; }
.rt-d-tick { font-size: 6.6px; fill: #9da1af; text-anchor: middle; }
.rt-d-badge { font-size: 5.2px; font-weight: 700; fill: #fff; text-anchor: middle; }
.rt-d-avatar { font-size: 6.4px; font-weight: 700; fill: #2fa36f; text-anchor: middle; }

/* ---- Phones ---- */
.rt-p-svg {
  font-family: var(--rt-font-ui);
  font-weight: 500;
  fill: #1d2433;
}

.rt-p-clock { font-size: 8px; font-weight: 700; text-anchor: middle; letter-spacing: -0.2px; }
.rt-p-title { font-size: 8.4px; font-weight: 700; text-anchor: middle; }
.rt-p-k { font-size: 5.8px; fill: #676d7e; }
.rt-p-v { font-size: 6.6px; font-weight: 600; }
.rt-p-stop { font-size: 5.6px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.rt-p-stop-lg { font-size: 7.4px; }
.rt-p-addr { font-size: 6.6px; }
.rt-p-name { font-size: 6.8px; font-weight: 600; }
.rt-p-btn { font-size: 7.4px; font-weight: 600; fill: #fff; text-anchor: middle; }
.rt-p-eyebrow { font-size: 5.4px; font-weight: 700; fill: #326bfc; letter-spacing: 0.5px; }
.rt-p-h2 { font-size: 10.3px; font-weight: 700; }
.rt-p-label { font-size: 6.9px; font-weight: 700; }
.rt-p-blue { fill: #326bfc; }
.rt-p-camtitle { font-size: 7.2px; font-weight: 600; fill: #fff; text-anchor: middle; }
.rt-p-maplabel { font-size: 6px; font-weight: 600; fill: #8a90a0; text-anchor: middle; }
.rt-p-maplabel-sm { font-size: 4.6px; letter-spacing: 0.6px; }
.rt-p-street { font-size: 4.6px; fill: #96a0b8; text-anchor: middle; dominant-baseline: central; }
.rt-p-step { font-size: 8.456px; }
.rt-p-lockdate { font-size: 8px; font-weight: 600; fill: #fff; text-anchor: middle; }
.rt-p-locktime { font-family: var(--rt-font-display); font-size: 44px; font-weight: 700; fill: #fff; text-anchor: middle; }
.rt-p-notif-title { font-size: 8px; font-weight: 700; }
.rt-p-notif-time { font-size: 6.6px; fill: #6b7280; }
.rt-p-notif { font-size: 7.6px; }
.rt-p-eta { font-size: 15px; font-weight: 800; letter-spacing: -0.3px; }
/* the customer's screens: subtext large enough to read at the hero's 1:1 phone size */
.rt-customer .rt-p-k { font-size: 7px; }
.rt-p-avatar { font-size: 8px; font-weight: 700; fill: #fff; text-anchor: middle; }

/* ---------------------------------------------------------------------------
 * Hover demos. Every animated piece has .rt-demo plus an inline animation-name;
 * the keyframes are generated from each device's timeline (see showcase/*.tsx).
 * Base styles are the rest state, demo-only pieces start hidden (.rt-hide).
 * ------------------------------------------------------------------------- */
.rt-demo {
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
}
.rt-hide { opacity: 0; }
.rt-fill-box,
.rt-flip,
.rt-tap,
.rt-brackets {
  transform-box: fill-box;
  transform-origin: center;
}
.rt-flip { opacity: 0; }
.rt-tap { opacity: 0; }
.rt-linear { animation-timing-function: linear; }
.rt-spring { animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }

/* A demo plays once while its device is "playing" (its play button was pressed). When it ends
   or is stopped, the screen fades out, resets to the rest state, and fades back in
   (see useDemoPhase in Hero.tsx). */
.rt-item:not(.is-playing) .rt-device .rt-demo {
  animation-name: none !important;
}
.rt-device .rt-fill {
  transition: opacity 260ms ease;
}
.rt-item.is-resetting .rt-device .rt-fill {
  opacity: 0;
  transition-duration: 200ms;
}
.rt-dispatcher .rt-demo {
  animation-timing-function: linear;
}
.rt-dispatcher .rt-demo.rt-once {
  animation-duration: 0.8s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}
.rt-dispatcher .rt-cursor {
  animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
}

/* Dispatcher demo bits */
.rt-dx-line path,
path.rt-dx-line {
  stroke-dasharray: 1;
}
.rt-progress {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
}
.rt-d-empty {
  font-size: 9px;
  fill: #9da1af;
  text-anchor: middle;
}
.rt-spin,
.rt-gps,
.rt-live-ring {
  transform-box: fill-box;
  transform-origin: center;
}
.rt-spin { animation: rt-spin 0.9s linear infinite; }
.rt-gps { opacity: 0; animation: rt-gps 1.8s ease-out infinite; }
.rt-live-ring { animation: rt-gps 1.6s ease-out infinite; }
@keyframes rt-spin { to { transform: rotate(360deg); } }
@keyframes rt-gps {
  0% { opacity: 0.4; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(2.6); }
}

.rt-pd-sheet { transform: translateY(410.6px); }
.rt-camera { transform-origin: 94.42px 190.5px; }
.rt-pc-page { transform: translateY(420px); }
.rt-pc-pod { transform: translateY(130px); }
.rt-pc-bar {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
}
.rt-sign {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* ---- Intro animation helpers (SVG) ---- */
.rt-pop-box {
  transform-box: fill-box;
  transform-origin: center;
}
.rt-driver {
  transform-origin: 0 0;
}
.rt-pulse-ring {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.rt-pulse {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.rt-bar {
  transform-box: fill-box;
  transform-origin: top;
}

@media (prefers-reduced-motion: reduce) {
  .rt-hero .rt-demo,
  .rt-hero .rt-spin,
  .rt-hero .rt-gps,
  .rt-hero .rt-live-ring {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * Section + background
 * ------------------------------------------------------------------------- */
.rt-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--rt-font-body);
  color: var(--rt-text-primary);
  /* Figma "grad": white → lilac (39.3%) → hero blue (70.1%) over the 1529px section */
  background: linear-gradient(
    to bottom,
    #fff 0%,
    var(--rt-hero-lilac) 39.304%,
    var(--rt-hero-blue) 70.114%,
    var(--rt-hero-blue) 100%
  );
  -webkit-font-smoothing: antialiased;
}

.rt-hero *,
.rt-hero *::before,
.rt-hero *::after {
  box-sizing: border-box;
}

.rt-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Soft lilac glow behind the headline (Figma vector 7166:92406, blur included in the SVG) */
.rt-bg-glow {
  position: absolute;
  top: -26.5px;
  left: 50%;
  width: 3204px;
  max-width: none;
  height: 1157.55px;
  transform: translateX(-50%);
}

/* ---------------------------------------------------------------------------
 * Content column
 * ------------------------------------------------------------------------- */
.rt-inner {
  position: relative;
  width: 100%;
  max-width: calc(1100px + 2 * 24px);
  margin: 0 auto;
  padding: var(--pad-top, 180px) 24px 33px;
}

.rt-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1040px;
  margin: 0 auto;
}

.rt-h1 {
  margin: 0;
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1rem + 3.5vw, 3.75rem);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--rt-text-primary);
}

.rt-sub {
  margin: 12px 0 0;
  max-width: 788px;
  font-family: var(--rt-font-heading);
  font-size: clamp(1.0625rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--rt-text-primary);
  text-wrap: pretty;
}

.rt-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
}

.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border: 1.5px solid transparent;
  border-radius: var(--rt-radius-lg);
  font-family: var(--rt-font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.rt-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(31, 54, 167, 0.18);
}

.rt-btn:focus-visible {
  outline: 2px solid var(--rt-primary-500);
  outline-offset: 3px;
}

.rt-btn-primary {
  background: var(--rt-yellow-200);
  border-color: var(--rt-yellow-border);
  color: var(--rt-text-primary);
}

.rt-btn-secondary {
  border-color: var(--rt-indigo-100);
  color: var(--rt-indigo-100);
}

.rt-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* ---------------------------------------------------------------------------
 * Product showcase — a 1130×612 stage in Figma coordinates.
 * --u is "one Figma pixel", scaling with the container so the composition scales
 * without JS (and renders correctly server-side). The stage is allowed to grow a
 * little past the 1100px content column (up to 1.12×) so the devices read larger.
 * ------------------------------------------------------------------------- */
.rt-showcase {
  position: relative;
  margin-top: 80px;
}

/* The query container is its own wrapper: container-type creates a stacking context, and the
   hex pattern must stay in the hero's context so the lilac glow can sit above it (as in Figma). */
.rt-stage-wrap {
  --stage-w: min(1266px, 100vw - 48px);
  container-type: inline-size;
  width: var(--stage-w);
  margin-inline: calc((100% - var(--stage-w)) / 2);
}

/* Hex "territories" pattern (Figma 7166:92353) — fixed size, centred behind the stage */
.rt-bg-territories {
  position: absolute;
  top: -82px;
  left: 50%;
  width: 1909px;
  height: 955.24px;
  transform: translateX(-50%);
  z-index: -2;
  pointer-events: none;
}

.rt-bg-territories img {
  display: block;
  width: 100%;
  height: 100%;
}

.rt-stage {
  --u: min(1.12px, 100cqw / 1130);
  position: relative;
  width: 100%;
  aspect-ratio: 1130 / 612;
}

.rt-device,
.rt-pill,
.rt-connector {
  position: absolute;
  left: calc(var(--l) * var(--u));
  top: calc(var(--t) * var(--u));
  margin: 0;
}

.rt-device {
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}

.rt-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Devices: Figma strokes are 6px white *outside* the frame, plus a soft drop shadow.
   --lift is an extra shadow layer, transparent at rest, deepened when the device is focused. */
.rt-device {
  --lift: 0 0 0 0 rgba(31, 54, 167, 0);
  border-radius: calc(13.369 * var(--u));
  box-shadow:
    0 0 0 calc(6 * var(--u)) #fff,
    0 calc(3.342 * var(--u)) calc(6.685 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.15),
    var(--lift);
  transition: box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rt-dispatcher {
  border-radius: calc(12 * var(--u));
}

.rt-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #fff;
}

/* Each item scales from its device's centre (stage units, set inline as --ox / --oy). */
.rt-item {
  transform-origin: calc(var(--ox) * var(--u)) calc(var(--oy) * var(--u));
}

/* ---- Items: a device + its label pill + the connector between them ----
 * Each item spans the whole stage (so scaling it from the device's centre moves the label
 * with the device) but only its children take the pointer. */
.rt-item {
  --focus-scale: 1.04;
  --active-scale: 1.15;
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition:
    scale 550ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 400ms ease;
}
.rt-item > * {
  pointer-events: auto;
}
.rt-item--dispatcher {
  --focus-scale: 1.02;
  --active-scale: 1.07;
}

/* ---- Label pill with a beacon ---- */
.rt-pill {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(var(--h) * var(--u));
  padding: 0 calc(22 * var(--u)) 0 calc(14 * var(--u));
  translate: -50% 0;
  transform-origin: 50% 100%;
  border: calc(1 * var(--u)) solid rgba(55, 76, 210, 0.14);
  border-radius: calc(20 * var(--u));
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(31, 54, 167, 0.1);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--rt-font-heading);
  font-weight: 700;
  font-size: max(11.5px, calc(15 * var(--u)));
  line-height: max(14px, calc(18 * var(--u)));
  color: var(--rt-text-primary);
  white-space: nowrap;
  cursor: default;
  transition:
    scale 450ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 300ms ease,
    box-shadow 300ms ease,
    opacity 300ms ease;
}

.rt-pill-text {
  /* Labels keep the line breaks typed into the prop (e.g. "Customer⏎Delivery tracker" if an editor adds one) */
  white-space: pre;
}

.rt-beacon {
  position: relative;
  flex: none;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}

/* Core dot, plus two rings that ping outwards, staggered */
.rt-beacon::before,
.rt-beacon::after,
.rt-beacon i {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.rt-beacon::before {
  inset: calc(3 * var(--u));
  background: var(--c);
  box-shadow: 0 0 0 calc(3 * var(--u)) color-mix(in srgb, var(--c) 18%, transparent);
  transition: box-shadow 300ms ease;
}
.rt-beacon::after,
.rt-beacon i {
  border: calc(1.5 * var(--u)) solid var(--c);
  opacity: 0;
  animation: rt-beacon 2.6s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.rt-beacon i {
  animation-delay: 1.3s;
}

/* ---- Connector: a dashed line from the pill down to the device, ending in a dot ---- */
.rt-connector {
  width: calc(1.5 * var(--u));
  height: calc(var(--h) * var(--u));
  translate: -50% 0;
  background: repeating-linear-gradient(to bottom, var(--c) 0 calc(3 * var(--u)), transparent calc(3 * var(--u)) calc(6 * var(--u)));
  opacity: 0.6;
  transition: opacity 300ms ease;
}
.rt-connector::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-3.5 * var(--u));
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  translate: -50% 0;
  border: calc(1.5 * var(--u)) solid #fff;
  border-radius: 50%;
  background: var(--c);
}
/* A wider invisible hit area so moving between the pill and the device keeps the hover */
.rt-connector::before {
  content: "";
  position: absolute;
  inset: 0 calc(-14 * var(--u));
}

/* ---- Focus states ----
 * The item scales from the device centre with the individual `scale` property (the intro
 * keyframes animate `transform` on the device, which would override a hover transform). */
.rt-item.is-focused {
  z-index: 2;
}
.rt-item.is-active {
  z-index: 3;
}
.rt-item.is-focused .rt-device {
  --lift: 0 calc(16 * var(--u)) calc(36 * var(--u)) calc(-8 * var(--u)) rgba(31, 54, 167, 0.25);
}
.rt-item.is-active .rt-device {
  --lift: 0 calc(28 * var(--u)) calc(56 * var(--u)) calc(-6 * var(--u)) rgba(31, 54, 167, 0.35);
}
.rt-item.is-focused .rt-pill,
.rt-item.is-active .rt-pill {
  scale: 1.06;
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) color-mix(in srgb, var(--c) 28%, transparent);
  background: #fff;
}
.rt-item.is-focused .rt-beacon::before,
.rt-item.is-active .rt-beacon::before {
  box-shadow: 0 0 0 calc(4 * var(--u)) color-mix(in srgb, var(--c) 28%, transparent);
}
.rt-item.is-active .rt-beacon::after,
.rt-item.is-active .rt-beacon i {
  animation-duration: 1.5s;
}
.rt-item.is-active .rt-beacon i {
  animation-delay: 0.75s;
}
.rt-item.is-focused .rt-connector {
  opacity: 1;
}
.rt-item.is-active .rt-connector {
  opacity: 1;
  animation: rt-flow 700ms linear infinite;
}

.rt-item.is-dimmed {
  filter: blur(calc(2.5 * var(--u))) saturate(0.5) brightness(0.93);
}
.rt-item.is-dimmed .rt-pill,
.rt-item.is-dimmed .rt-connector {
  opacity: 0.5;
}

@media (prefers-reduced-motion: no-preference) {
  .rt-item.is-focused { scale: var(--focus-scale); }
  .rt-item.is-active { scale: var(--active-scale); }
  .rt-item.is-dimmed { scale: 0.93; }
}

/* ---- Play button: centred on the device; shows on hover / focus, hidden while playing ---- */
.rt-device-hit .rt-device {
  cursor: pointer;
}
.rt-item.is-active .rt-device-hit .rt-device {
  cursor: default;
}

.rt-play {
  position: absolute;
  left: calc(var(--l) * var(--u));
  top: calc(var(--t) * var(--u));
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--u));
  translate: -50% -50%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  opacity: 0;
  scale: 0.85;
  pointer-events: none;
  transition:
    opacity 250ms ease,
    scale 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rt-play-disc {
  display: grid;
  place-items: center;
  width: calc(76 * var(--u));
  height: calc(76 * var(--u));
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--c);
  box-shadow:
    0 0 0 calc(8 * var(--u)) color-mix(in srgb, var(--c) 22%, transparent),
    0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(31, 54, 167, 0.3);
  transition: scale 200ms ease;
}

.rt-play-disc svg {
  width: 42%;
  height: 42%;
}

.rt-play-text {
  padding: calc(5 * var(--u)) calc(12 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(17, 24, 39, 0.78);
  font-family: var(--rt-font-heading);
  font-weight: 700;
  font-size: max(11px, calc(14 * var(--u)));
  line-height: max(14px, calc(18 * var(--u)));
  color: #fff;
  white-space: nowrap;
}

.rt-item.is-focused:not(.is-active) .rt-play,
.rt-play:focus-visible {
  opacity: 1;
  scale: 1;
  pointer-events: auto;
}
.rt-play:hover .rt-play-disc {
  scale: 1.06;
}
.rt-play:focus-visible {
  outline: none;
}
.rt-play:focus-visible .rt-play-disc {
  outline: 3px solid var(--rt-yellow-200);
  outline-offset: 4px;
}
.rt-item.is-active .rt-play {
  opacity: 0;
  pointer-events: none;
}

/* Small play hint in each label pill, so the devices read as playable before hovering */
.rt-pill-play {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  margin-left: calc(2 * var(--u));
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  transition: opacity 250ms ease;
}
.rt-pill-play svg {
  width: 56%;
  height: 56%;
  margin-left: 6%;
}
.rt-item.is-active .rt-pill-play {
  opacity: 0;
}

/* Touch screens have no hover: the play buttons are always there (smaller), one tap plays */
@media (hover: none) and (pointer: coarse) {
  .rt-item:not(.is-active) .rt-play {
    opacity: 1;
    scale: 0.8;
    pointer-events: auto;
  }
  .rt-play-text {
    display: none;
  }
}

/* No demos for visitors who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rt-play,
  .rt-pill-play {
    display: none;
  }
  .rt-device-hit .rt-device {
    cursor: default;
  }
}

@keyframes rt-beacon {
  0% { opacity: 0.75; transform: scale(0.45); }
  100% { opacity: 0; transform: scale(2.3); }
}
@keyframes rt-flow {
  from { background-position: 0 0; }
  to { background-position: 0 calc(6 * var(--u)); }
}

/* ---------------------------------------------------------------------------
 * Testimonials
 * ------------------------------------------------------------------------- */
/* Same width as the showcase stage, so the cards line up with the devices rather than the
   narrower text column. */
.rt-testimonials {
  --row-w: min(1266px, 100vw - 48px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  width: var(--row-w);
  margin: 80px calc((100% - var(--row-w)) / 2) 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 991px) {
  .rt-testimonials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .rt-h1 {
    text-wrap: balance;
  }
  .rt-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
  .rt-showcase {
    margin-top: 56px;
  }
  .rt-testimonials {
    --row-w: 100%;
    margin-top: 56px;
  }
}

@media (max-width: 479px) {
  .rt-testimonials {
    grid-template-columns: 1fr;
  }
  .rt-btn {
    flex: 1 1 100%;
  }
}

/* ---------------------------------------------------------------------------
 * Motion. Base styles above are the *final* state, so with animations off
 * (prop, reduced motion, or no CSS animation support) the hero is complete.
 * ------------------------------------------------------------------------- */
@keyframes rt-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes rt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rt-from-left {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}
@keyframes rt-from-right {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes rt-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes rt-pop {
  0% { opacity: 0; transform: scale(0); }
  70% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes rt-pulse {
  0% { opacity: 0.35; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes rt-step {
  from { opacity: 0.2; }
  to { opacity: 1; }
}
@keyframes rt-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.rt-animate .rt-h1 { animation: rt-fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.rt-animate .rt-sub { animation: rt-fade-up 700ms 100ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.rt-animate .rt-ctas { animation: rt-fade-up 700ms 200ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* The product showcase just fades in, static, so the headline gets read first. The only motion
   on landing is the drivers' location pulse; each device's story plays when its play button
   is pressed. */
.rt-animate .rt-dispatcher { animation: rt-fade 900ms 300ms ease-out both; }
.rt-animate .rt-driver-phone { animation: rt-fade 900ms 400ms ease-out both; }
.rt-animate .rt-customer { animation: rt-fade 900ms 500ms ease-out both; }
.rt-animate .rt-pill,
.rt-animate .rt-connector { animation: rt-fade 600ms 900ms ease-out both; }

.rt-animate .rt-pulse,
.rt-animate .rt-pulse-ring {
  animation: rt-pulse 2.2s ease-out infinite both;
}

.rt-animate .rt-card { animation: rt-fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.rt-animate .rt-card:nth-child(1) { animation-delay: 1.1s; }
.rt-animate .rt-card:nth-child(2) { animation-delay: 1.2s; }
.rt-animate .rt-card:nth-child(3) { animation-delay: 1.3s; }
.rt-animate .rt-card:nth-child(4) { animation-delay: 1.4s; }

@media (prefers-reduced-motion: reduce) {
  .rt-animate *,
  .rt-animate *::before,
  .rt-animate *::after,
  .rt-beacon::after,
  .rt-beacon i,
  .rt-connector {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * Phones (< 600px): a stacked showcase — dispatcher across the top, the two phones
 * side by side below — in an 800-unit stage, with readable label pills.
 * Positions come from MOBILE in Hero.tsx (--ml / --mt / --mw / --mh).
 * ------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .rt-stage-wrap {
    --stage-w: calc(100vw - 32px);
  }
  .rt-stage {
    --u: calc(100cqw / 800);
    aspect-ratio: var(--mobile-ratio);
  }
  .rt-device,
  .rt-play {
    left: calc(var(--ml) * var(--u));
    top: calc(var(--mt) * var(--u));
  }
  .rt-device {
    width: calc(var(--mw) * var(--u));
    height: calc(var(--mh) * var(--u));
  }
  .rt-item {
    transform-origin: calc(var(--mox) * var(--u)) calc(var(--moy) * var(--u));
  }
  /* label pills sit just above their device, at a readable size */
  .rt-pill {
    left: calc(var(--ml) * var(--u));
    top: calc(var(--mt) * var(--u) - 10px);
    height: auto;
    translate: -50% -100%;
    gap: 6px;
    padding: 5px 12px 5px 8px;
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 16px;
  }
  .rt-pill-text {
    white-space: nowrap;
  }
  .rt-beacon {
    width: 12px;
    height: 12px;
  }
  .rt-pill-play {
    width: 16px;
    height: 16px;
  }
  .rt-connector {
    display: none;
  }
  .rt-item {
    --focus-scale: 1;
    --active-scale: 1.04;
  }
  .rt-item--dispatcher {
    --active-scale: 1.02;
  }
}