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

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

/* ---------------------------------------------------------------------------
 * Section (Figma 7166:88796, background 7166:88921)
 * ------------------------------------------------------------------------- */
.rt-dx {
  position: relative;
  overflow: hidden;
  font-family: var(--rt-font-heading);
  color: var(--rt-text-primary);
  background: linear-gradient(to bottom, #fff 0%, #fff 70%, #f1f3fd 100%);
  -webkit-font-smoothing: antialiased;
}

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

/* Faint hexes fading out at the top, carried over from the section above */
.rt-dx-hexes {
  position: absolute;
  inset: 0 0 auto;
  height: 360px;
  /* starts from nothing at the section's top edge (the section above fades out the same way) */
  background: linear-gradient(to bottom, rgba(31, 54, 167, 0), rgba(31, 54, 167, 0.1) 30%, rgba(31, 54, 167, 0) 85%);
  mask-size: max(1909px, 140%) auto;
  mask-position: center bottom;
  mask-repeat: no-repeat;
  -webkit-mask-size: max(1909px, 140%) auto;
  -webkit-mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  pointer-events: none;
}

.rt-dx-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: calc(1100px + 2 * 24px);
  margin: 0 auto;
  padding: 96px 24px 0;
}

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

.rt-dx-rating {
  display: block;
  width: 232.38px;
  height: 56px;
}

.rt-dx-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: var(--rt-text-primary);
  text-wrap: balance;
}

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





/* ---------------------------------------------------------------------------
 * Bento: 660 + 420 over 420 + 660, 20px gaps, each card 600 tall (Figma "bento")
 * ------------------------------------------------------------------------- */
/* Row 1 splits 660/420, row 2 420/660 */
.rt-dx-bento {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
}
.rt-dx-row {
  display: grid;
  grid-template-columns: 660fr 420fr;
  gap: 20px;
}
.rt-dx-row-2 {
  grid-template-columns: 420fr 660fr;
}

.rt-dx-card {
  container-type: inline-size;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 32px;
  color: #fff;
}

.rt-dx-card--blue {
  background: var(--rt-hero-blue);
}

.rt-dx-card--navy {
  background: #131b52;
}

/* Each card is a stage in its own Figma units: --u = one Figma px */
.rt-dx-card-stage {
  --u: calc(100cqw / var(--cw));
  position: relative;
  width: 100%;
  aspect-ratio: var(--cw) / 600;
}

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

.rt-dx-card-text {
  position: absolute;
  left: calc(40 * var(--u));
  top: calc(40 * var(--u));
  right: calc(40 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
}

.rt-dx-card--eta .rt-dx-card-text {
  right: calc(80 * var(--u));
}

.rt-dx-card--branding .rt-dx-card-text {
  right: calc(99 * var(--u));
}

.rt-dx-card-h {
  margin: 0;
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: max(26px, calc(48 * var(--u)));
  line-height: 1;
  color: #fff;
}

.rt-dx-card-p {
  margin: 0;
  font-family: var(--rt-font-body);
  font-size: max(15px, calc(20 * var(--u)));
  line-height: 1.6;
  color: #fff;
}

/* ---- SVG text (card units) ---- */
.rt-dx-svg text {
  font-family: var(--rt-font-body);
  fill: var(--rt-text-primary);
}

.rt-dx-svg .rt-dx-sms { font-size: 19px; fill: #282828; }
.rt-dx-svg .rt-dx-sms-link { fill: #257af8; }
.rt-dx-svg .rt-dx-note-t,
.rt-dx-svg .rt-dx-note,
.rt-dx-svg .rt-dx-note-time { font-family: var(--rt-font-ui); }
.rt-dx-note-t { font-size: 15px; font-weight: 600; }
.rt-dx-note { font-size: 13.4px; }
.rt-dx-svg .rt-dx-note-time { font-size: 13px; fill: #4d4d4d; }
.rt-dx-set-h { font-size: 10px; font-weight: 600; }
.rt-dx-set-t { font-size: 8.5px; }
.rt-dx-svg .rt-dx-set-k { font-size: 6px; fill: #676d7e; }
.rt-dx-svg .rt-dx-set-link { font-size: 6.2px; fill: #326bfc; }
.rt-dx-logo { font-family: var(--rt-font-display); font-size: 13px; font-weight: 700; }
.rt-dx-svg .rt-dx-logo-sub { font-size: 3.4px; fill: #676d7e; font-style: italic; }
.rt-dx-pv-h { font-size: 13.5px; font-weight: 700; }
.rt-dx-fx-h { font-size: 15px; font-weight: 700; }
.rt-dx-fx-t { font-size: 13px; font-weight: 600; }
.rt-dx-svg .rt-dx-fx-k { font-size: 11px; fill: #676d7e; }
.rt-dx-svg .rt-dx-fx-l { font-size: 11px; font-weight: 600; fill: #676d7e; }
.rt-dx-fx-v { font-size: 12px; }
.rt-dx-svg .rt-dx-fx-seg { font-size: 11.5px; fill: #676d7e; }
.rt-dx-svg .rt-dx-fx-seg-on { font-weight: 600; fill: #326bfc; }
.rt-dx-fx-msg { font-size: 12.5px; }
.rt-dx-svg .rt-dx-fx-tag { font-weight: 600; fill: #326bfc; }
.rt-dx-svg .rt-dx-fx-chip { font-size: 10.5px; font-weight: 600; fill: #326bfc; }

/* Brand colour (Branding card). Base = Figma green; the in-view animation cycles to it. */
.rt-dx-brand-fill { fill: #57a431; }
.rt-dx-brand-stroke { stroke: #57a431; fill: none; }
.rt-dx-svg circle.rt-dx-brand-stroke { fill: #fff; }
.rt-dx-hex-a,
.rt-dx-hex-b { opacity: 0; }

/* ---------------------------------------------------------------------------
 * Testimonial
 * ------------------------------------------------------------------------- */
.rt-dx-quote-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 80px 24px 96px;
}

.rt-dx-quote {
  width: 100%;
  max-width: 760px;
  margin: 0;
  padding: 40px 36px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(31, 54, 167, 0.06);
}

.rt-dx-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-dx-quote .rt-qa {
  margin-top: 22px;
  padding-left: 24px;
}

/* ---------------------------------------------------------------------------
 * Responsive (only the 1440 layout exists in Figma): cards stack below 900px
 * ------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .rt-dx-row,
  .rt-dx-row-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The narrow cards would get very tall at full width: crop them to the 660 proportion */
  .rt-dx-card--eta .rt-dx-card-stage {
    --u: calc(100cqw / 600);
    width: calc(420 * var(--u));
    max-width: none;
    margin-left: calc((100cqw - 420 * var(--u)) / 2);
  }
  /* Branding: the settings panel must still run off the card's right and bottom edges (as on
     desktop) instead of being centred with navy beside it. The stage fills the card (600 units
     wide, cropped to 600 × 560) and the visual is shifted right so it overflows the edge. */
  .rt-dx-card--branding .rt-dx-card-stage {
    --u: calc(100cqw / 600);
    aspect-ratio: 600 / 560;
  }
  .rt-dx-card--branding .rt-dx-svg {
    inset: 0 auto auto calc(160 * var(--u));
    width: calc(420 * var(--u));
    height: calc(600 * var(--u));
    overflow: visible;
  }
}

/* Phones: a 440-unit stage, so the panel is larger; the visual starts at the card's left edge */
@media (max-width: 599px) {
  .rt-dx-card--branding .rt-dx-card-stage {
    --u: calc(100cqw / 440);
    aspect-ratio: 440 / 560;
  }
  .rt-dx-card--branding .rt-dx-svg {
    left: 0;
  }
}

@media (max-width: 767px) {
  .rt-dx-inner {
    padding: 96px 16px 0;
    gap: 28px;
  }
  .rt-dx-card {
    border-radius: 24px;
  }
  .rt-dx-quote-wrap {
    padding: 56px 16px 64px;
  }
  .rt-dx-quote {
    padding: 32px 20px;
  }
}

/* ---------------------------------------------------------------------------
 * Motion: the ETA card's driver pulses; the Branding card cycles its colour once when it
 * scrolls into view. Everything else is static. Base styles = final state.
 * ------------------------------------------------------------------------- */
.rt-dx-pulse {
  transform-box: fill-box;
  transform-origin: center;
}
.rt-dx-animate .rt-dx-pulse { animation: rt-dx-pulse 2.2s ease-out infinite; }

.rt-dx-animate .is-inview .rt-dx-brand-fill { animation: rt-dx-brand-fill 3.2s 300ms ease both; }
.rt-dx-animate .is-inview .rt-dx-brand-stroke { animation: rt-dx-brand-stroke 3.2s 300ms ease both; }
.rt-dx-animate .is-inview .rt-dx-hex-a { animation: rt-dx-hex-a 3.2s 300ms ease both; }
.rt-dx-animate .is-inview .rt-dx-hex-b { animation: rt-dx-hex-b 3.2s 300ms ease both; }
.rt-dx-animate .is-inview .rt-dx-hex-c { animation: rt-dx-hex-c 3.2s 300ms ease both; }

@keyframes rt-dx-pulse {
  0% { transform: scale(0.75); opacity: 1; }
  100% { transform: scale(1.45); opacity: 0; }
}
@keyframes rt-dx-brand-fill {
  0%, 22% { fill: #e8833a; }
  38%, 60% { fill: #326bfc; }
  78%, 100% { fill: #57a431; }
}
@keyframes rt-dx-brand-stroke {
  0%, 22% { stroke: #e8833a; }
  38%, 60% { stroke: #326bfc; }
  78%, 100% { stroke: #57a431; }
}
@keyframes rt-dx-hex-a { 0%, 22% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes rt-dx-hex-b { 0%, 22% { opacity: 0; } 30%, 60% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes rt-dx-hex-c { 0%, 60% { opacity: 0; } 70%, 100% { opacity: 1; } }

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