/*
 * 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;
}

/*
 * "Discover …" section links: a soft pill with the arrow in its own circle, so they read as an
 * action under the headline instead of a line of body text. Default is for light backgrounds;
 * add .rt-cta-link--on-dark on blue sections (the arrow image is already white there).
 */
.rt-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 9px 9px 9px 20px;
  border: 1.5px solid rgba(55, 76, 210, 0.28);
  border-radius: 999px;
  background: #eef0fd;
  font-family: var(--rt-font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 22px;
  text-align: left;
  color: var(--rt-indigo-100);
  text-decoration: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.rt-cta-link .rt-cta-arrow {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(55, 76, 210, 0.12);
  transition: background-color 180ms ease;
}

.rt-cta-link .rt-cta-arrow img {
  display: block;
  margin: 0;
  overflow: visible;
  transition: transform 200ms ease;
}

.rt-cta-link:hover {
  border-color: var(--rt-indigo-100);
  background: #e4e8fd;
  box-shadow: 0 6px 18px rgba(55, 76, 210, 0.16);
}

.rt-cta-link:hover .rt-cta-arrow {
  background: rgba(55, 76, 210, 0.2);
}

.rt-cta-link:hover .rt-cta-arrow img {
  transform: translateX(2px);
}

.rt-cta-link:focus-visible {
  outline: 2px solid var(--rt-indigo-100);
  outline-offset: 3px;
}

.rt-cta-link--on-dark {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.rt-cta-link--on-dark .rt-cta-arrow {
  background: rgba(255, 255, 255, 0.2);
}

.rt-cta-link--on-dark:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.rt-cta-link--on-dark:hover .rt-cta-arrow {
  background: rgba(255, 255, 255, 0.3);
}

.rt-cta-link--on-dark:focus-visible {
  outline-color: #fff;
}

@media (max-width: 599px) {
  .rt-cta-link {
    gap: 10px;
    padding: 8px 8px 8px 16px;
    font-size: 15.5px;
    line-height: 20px;
  }
  .rt-cta-link .rt-cta-arrow {
    width: 28px;
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rt-cta-link,
  .rt-cta-link * {
    transition: none !important;
  }
}

/* Testimonial attribution: avatar + name + role (src/lib/QuoteAuthor.tsx). */
.rt-qa {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--rt-font-body);
}

.rt-qa-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(31, 54, 167, 0.18);
}

.rt-qa-initials {
  display: grid;
  place-items: center;
  font-family: var(--rt-font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}

.rt-qa-tone-0 { background: linear-gradient(135deg, var(--rt-turquoise), var(--rt-route-sky)); }
.rt-qa-tone-1 { background: linear-gradient(135deg, var(--rt-route-pink), var(--rt-route-violet)); }
.rt-qa-tone-2 { background: linear-gradient(135deg, var(--rt-indigo-200), var(--rt-route-lilac)); }
.rt-qa-tone-3 { background: linear-gradient(135deg, var(--rt-yellow-200), var(--rt-route-pink)); }

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

.rt-qa-name {
  font-weight: 700;
  font-size: 17px;
  line-height: 22px;
  color: #2435a1;
}

.rt-qa-role {
  font-size: 15px;
  line-height: 20px;
  color: var(--rt-text-secondary);
}

/* On blue cards (Reviews) */
.rt-qa--light .rt-qa-avatar {
  width: 44px;
  height: 44px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.rt-qa--light .rt-qa-initials { font-size: 15px; }
.rt-qa--light .rt-qa-name { font-size: 16px; line-height: 22px; color: #fff; }
.rt-qa--light .rt-qa-role { font-size: 14px; line-height: 19px; color: rgba(255, 255, 255, 0.75); }

@media (max-width: 767px) {
  .rt-qa-avatar { width: 48px; height: 48px; }
  .rt-qa-name { font-size: 17px; line-height: 23px; }
  .rt-qa-role { font-size: 14px; line-height: 19px; }
}

/* ---------------------------------------------------------------------------
 * Section — continues the hero's blue, fading out behind the body copy (Figma 7166:92198)
 * ------------------------------------------------------------------------- */
.rt-sp {
  position: relative;
  overflow: hidden;
  font-family: var(--rt-font-heading);
  color: #fff;
  /* Blue continues behind the MIT card, then fades to white under the hex pattern (page render) */
  background: linear-gradient(to bottom, var(--rt-hero-blue) 0, var(--rt-hero-blue) calc(100% - 330px), rgba(31, 54, 167, 0) calc(100% - 70px));
  padding-bottom: 300px;
  -webkit-font-smoothing: antialiased;
}

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

/* Territories hex pattern (white 20% cells, as in the hero) behind the bottom of the section */
.rt-sp-hexes {
  position: absolute;
  left: 50%;
  bottom: -80px;
  width: 1909px;
  height: 955px;
  translate: -50% 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.35) 22%, #000 42%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.35) 22%, #000 42%);
}

.rt-sp-hexes img {
  display: block;
  width: 100%;
  height: 100%;
}

.rt-sp-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
  max-width: calc(1120px + 2 * 24px);
  margin: 0 auto;
  padding: 128px 24px 0;
}

/* ---- Title ---- */
.rt-sp-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 1040px;
  text-align: center;
}

.rt-sp-h2 {
  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;
  color: #fff;
  text-wrap: balance;
}

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

.rt-sp-link:not(.rt-cta-link) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: #fff;
  text-decoration: none;
}

.rt-sp-link:not(.rt-cta-link) img {
  display: block;
  overflow: visible;
  transition: transform 200ms ease;
}

.rt-sp-link:not(.rt-cta-link):hover img {
  transform: translateX(3px);
}

.rt-sp-link:not(.rt-cta-link):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 4px;
}

/* The title block and the showcase are 40px apart (the section gap is 80). */
.rt-sp-title + .rt-sp-showcase {
  margin-top: -40px;
}

/* ---------------------------------------------------------------------------
 * Showcase — a 1120 × 599 stage in Figma coordinates (--u = one Figma pixel)
 * ------------------------------------------------------------------------- */
/* Shown at --sp-scale of its Figma size (Compare.tsx SP_SCALE): --u is the shrunk Figma pixel,
   --ui the unshrunk one for things that keep their Figma size (pills, divider, handle). */
.rt-sp-showcase {
  /* how much larger pins, lines and labels are drawn to keep their on-screen size */
  --sp-k: calc(1 / var(--sp-scale, 1));
  width: 100%;
  max-width: calc(1120px * var(--sp-scale, 1));
  margin-inline: auto;
  container-type: inline-size;
}

.rt-sp-stage {
  --u: min(1px, 100cqw / 1120);
  --ui: min(1px, var(--u) * var(--sp-k, 1));
  position: relative;
  width: 100%;
  aspect-ratio: 1120 / var(--stage-h, 599);
}

.rt-sp-panel {
  position: absolute;
  inset: 0;
  border-radius: calc(20 * var(--u));
  background: #172982;
}

/* The app frame rises out of the bottom of the panel: 920 × 530 including a 4px white border. */
.rt-sp-frame {
  position: absolute;
  left: calc(100 * var(--u));
  top: calc(69 * var(--u));
  width: calc(920 * var(--u));
  height: calc(var(--frame-h, 530) * var(--u));
  overflow: hidden;
  border: calc(4 * var(--ui)) solid #fff;
  border-bottom: 0;
  border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0;
  background: #e0e0e0;
  box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.15);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

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

/* Map (traced from the reference screenshots) */
.rt-sp-frame {
  --sp-land: #f1f4f9;
  --sp-park: #d9f0e5;
  --sp-water: #c0d6f4;
  --sp-ring: #f3cf7a;
}

.rt-sp-label {
  font-family: var(--rt-font-body);
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(241, 244, 249, 0.9);
  stroke-width: calc(2.4px * var(--sp-k, 1));
  stroke-linejoin: round;
}
.rt-sp-label-city { font-size: calc(12.5px * var(--sp-k, 1)); fill: #3a4256; }
.rt-sp-label-area { font-size: calc(9px * var(--sp-k, 1)); fill: #5b6274; letter-spacing: 0.04em; }
.rt-sp-label-water { font-size: calc(10.5px * var(--sp-k, 1)); fill: #4a6fb0; letter-spacing: 0.12em; stroke: none; }
.rt-sp-label-park { font-size: calc(11px * var(--sp-k, 1)); fill: #3f9a6b; }

.rt-sp-pin {
  transform-box: fill-box;
  transform-origin: center;
  scale: var(--sp-k, 1);
}

/* the depot pin grows from its tip */
.rt-sp-depot {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  scale: var(--sp-k, 1);
}

.rt-sp-stop {
  font-family: var(--rt-font-body);
  font-size: 10.69px;
  text-anchor: middle;
  dominant-baseline: central;
  fill: #282828;
}

.rt-sp-stop-light {
  fill: #fff;
}

/* ---- Labels ---- */
.rt-sp-pill {
  position: absolute;
  top: calc(20 * var(--ui));
  padding: calc(8 * var(--ui)) calc(20 * var(--ui));
  border-radius: calc(28.25 * var(--ui));
  font-family: var(--rt-font-body);
  font-weight: 700;
  font-size: calc(16 * var(--ui));
  line-height: calc(22.275 * var(--ui));
  white-space: nowrap;
  pointer-events: none;
  filter: drop-shadow(0 0 calc(4.641 * var(--ui)) rgba(0, 0, 0, 0.06)) drop-shadow(0 0 calc(6.497 * var(--ui)) rgba(0, 0, 0, 0.05))
    drop-shadow(0 calc(4.641 * var(--ui)) calc(2.32 * var(--ui)) rgba(0, 0, 0, 0.07));
}

.rt-sp-pill-routific {
  left: calc(20 * var(--ui));
  background: var(--rt-indigo-100);
  color: #fff;
}

.rt-sp-pill-competitor {
  right: calc(20 * var(--ui));
  background: #fff;
  color: var(--rt-text-primary);
}

/* Each label is clipped with its side of the map, so it slides away with it. */
.rt-sp-left,
.rt-sp-right {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rt-sp-left {
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}

.rt-sp-right {
  clip-path: inset(0 0 0 var(--split));
}

/* ---- Divider + handle ---- */
.rt-sp-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: calc(6 * var(--ui));
  translate: -50% 0;
  background: #fff;
  box-shadow: calc(-6 * var(--ui)) 0 calc(14 * var(--ui)) rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.rt-sp-handle {
  position: absolute;
  top: 50%;
  left: var(--split);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(64 * var(--ui));
  height: calc(64 * var(--ui));
  min-width: 40px;
  min-height: 40px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #fff;
  filter: drop-shadow(0 calc(4 * var(--ui)) calc(2 * var(--ui)) rgba(0, 0, 0, 0.25));
  cursor: ew-resize;
  transition: scale 200ms ease;
}

.rt-sp-handle svg {
  width: calc(18 * var(--ui));
  height: auto;
  min-width: 12px;
}

.rt-sp-frame:hover .rt-sp-handle,
.rt-sp-frame.is-dragging .rt-sp-handle {
  scale: 1.08;
}

.rt-sp-handle:focus-visible {
  outline: 3px solid var(--rt-yellow-200);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Body + MIT benchmark card
 * ------------------------------------------------------------------------- */
.rt-sp-body {
  margin: 0;
  max-width: 800px;
  font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.5rem);
  line-height: 1.4583;
  text-align: center;
  color: #fff;
  text-wrap: pretty;
}

/* ---- Customer quote under the comparison: the white quote card used across the page ---- */
.rt-sp-quote {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  margin: 0;
  padding: 36px 36px 32px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 48px rgba(10, 16, 60, 0.28);
  font-family: var(--rt-font-body);
}

.rt-sp-quote blockquote {
  margin: 0;
  padding-left: 20px;
  border-left: 4px solid var(--rt-yellow-200);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.55;
  color: var(--rt-text-primary);
}

.rt-sp-quote .rt-qa {
  margin-top: 22px;
  padding-left: 24px;
}

@media (max-width: 599px) {
  .rt-sp-quote {
    padding: 28px 20px 24px;
  }
}

.rt-sp-mit {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1098px;
  min-height: 220px;
  padding: 25px 24px;
  border-radius: 20px;
  background: var(--rt-indigo-100);
}

.rt-sp-mit-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  flex: none;
  width: 351px;
}

.rt-sp-mit-logo {
  display: block;
  width: 338px;
  max-width: 100%;
  height: auto;
}

.rt-sp-mit-link {
  margin-left: 14px;
}

.rt-sp-mit-rule {
  flex: none;
  align-self: stretch;
  width: 2px;
  margin: 0 43px 0 0;
  background: #ffa900;
}

.rt-sp-mit-text {
  margin: 0;
  max-width: 574px;
  font-size: clamp(1.125rem, 0.95rem + 0.45vw, 1.5rem);
  line-height: 1.4583;
}

@media (max-width: 991px) {
  .rt-sp-mit {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 32px 24px;
  }
  .rt-sp-mit-brand {
    width: auto;
    gap: 20px;
  }
  .rt-sp-mit-logo {
    width: 260px;
  }
  .rt-sp-mit-rule {
    align-self: stretch;
    width: auto;
    height: 2px;
    margin: 0;
  }
}

/* Phones: drop the panel so the comparison uses the full column (layout not in Figma). */
@media (max-width: 599px) {
  .rt-sp-showcase {
    --sp-k: 1;
  }
  .rt-sp-stage {
    --u: calc(100cqw / 920);
    aspect-ratio: 920 / var(--frame-h, 530);
  }
  .rt-sp-panel {
    display: none;
  }
  .rt-sp-frame {
    left: 0;
    top: 0;
    border-bottom: calc(4 * var(--u)) solid #fff;
    border-radius: 12px;
  }
  .rt-sp-pill {
    font-size: 11px;
    line-height: 14px;
    padding: 5px 10px;
  }
}

@media (max-width: 767px) {
  .rt-sp {
    padding-bottom: 200px;
  }
  .rt-sp-inner {
    gap: 56px;
    padding: 96px 16px 0;
  }
  .rt-sp-title + .rt-sp-showcase {
    margin-top: -24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rt-sp *,
  .rt-sp *::before,
  .rt-sp *::after {
    animation: none !important;
    transition: none !important;
  }
}