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

/* Customer logo marquee (Reviews/Logos.tsx): label + two rows of 300 × 125 tiles scrolling in
 * opposite directions. Shared by Reviews and IndustryHero; the parent adds .rt-lg-animate and,
 * while on screen, .is-inview. Tiles are indigo with white artwork, so it sits on a dark band. */
.rt-lg-label {
  margin: 0 auto 28px;
  padding: 0 24px;
  max-width: calc(1120px + 2 * 24px);
  font-family: var(--rt-font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c8d0ff;
}

/* ---- Logo marquee: two rows of 300 × 125 tiles, 32px apart ----
 * Each row starts where Figma puts it (offset from the left edge of the centred 1440 frame) and
 * holds three copies of its logos, so shifting by one copy (--set) loops seamlessly. */
.rt-lg {
  display: flex;
  flex-direction: column;
  gap: 31px;
}

.rt-lg-row {
  position: relative;
  height: 125px;
}

.rt-lg-track {
  position: absolute;
  top: 0;
  left: calc(50% - 720px + var(--offset));
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

.rt-lg-tile {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 125px;
  overflow: hidden;
  padding: 0 32px;
  border-radius: 16px;
  background: #2435a1 /* Indigo/Core */;
}

.rt-lg-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% + 64px);
  height: 100%;
  margin: 0 -32px;
  border-radius: inherit;
  transition: background-color 160ms ease;
}
.rt-lg-link:hover {
  background: #2d40b8;
}
.rt-lg-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.rt-lg-art {
  position: relative;
  flex: none;
  display: block;
}

.rt-lg-art.is-dim {
  opacity: 0.8;
}

.rt-lg-art img {
  position: absolute;
  display: block;
  max-width: none;
}

.rt-lg-custom {
  display: block;
  max-width: 236px;
  max-height: 96px;
  object-fit: contain;
}

/* Colour logos from a URL, shown light on the indigo tiles: greyscale + invert turns dark marks
   light, and the screen blend drops the (now black) background of opaque PNGs/JPGs. */
.rt-lg-custom.is-mono {
  max-width: 200px;
  max-height: 72px;
  filter: grayscale(1) invert(1) contrast(1.3);
  mix-blend-mode: screen;
}

.rt-lg-name {
  font-weight: 700;
  font-size: 22px;
  color: #d3d7ec;
  text-align: center;
}

@keyframes rt-lg-left {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--set))); }
}
@keyframes rt-lg-right {
  from { transform: translateX(calc(-1 * var(--set))); }
  to { transform: translateX(0); }
}

.rt-lg-animate .rt-lg-left {
  animation-name: rt-lg-left;
}
.rt-lg-animate .rt-lg-right {
  animation-name: rt-lg-right;
}
.rt-lg-animate .rt-lg-track {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
/* Scroll only while on screen (hovering doesn't pause it) */
.rt-lg-animate.is-inview .rt-lg-track {
  animation-play-state: running;
}

@media (max-width: 767px) {
  .rt-lg {
    gap: 16px;
  }
  .rt-lg-label {
    padding: 0 16px;
  }
  /* Smaller tiles on phones (a layout Figma doesn't have) */
  .rt-lg-row {
    height: 84px;
  }
  .rt-lg-track {
    transform-origin: 0 0;
    scale: 0.672;
    left: calc(50% - 720px * 0.672 + var(--offset) * 0.672);
  }
}

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

/* ---------------------------------------------------------------------------
 * The outcome pill on product visuals (industry pages), one design everywhere:
 * - a white full pill, one line: a green check disc + a short outcome ("Every delivery window met");
 * - the same size in every section (px, not stage units);
 * - placed by one rule: inside its visual's bottom-right corner, inset from both edges (the
 *   component passes that corner as --l / --t, see pillAt in src/lib/VisualPill.tsx);
 * - at most one per visual, and only where it states a real outcome.
 * Components must @import this file (code components can't share CSS at runtime).
 * ------------------------------------------------------------------------- */
.rt-pill {
  position: absolute;
  z-index: 3;
  left: calc(var(--l) * var(--u));
  top: calc(var(--t) * var(--u));
  translate: -100% -100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 7px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 26, 92, 0.18);
  font-family: var(--rt-font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--rt-text-primary);
  white-space: nowrap;
}

.rt-pill-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1fae6b;
  color: #fff;
}

.rt-pill-icon svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 599px) {
  .rt-pill {
    gap: 6px;
    padding: 5px 11px 5px 5px;
    font-size: 12px;
    line-height: 16px;
  }
  .rt-pill-icon {
    width: 20px;
    height: 20px;
  }
  .rt-pill-icon svg {
    width: 12px;
    height: 12px;
  }
}

/* ---------------------------------------------------------------------------
 * Industry hero (not in Figma: homepage design language, flag for design review)
 * ------------------------------------------------------------------------- */
.rt-ih {
  position: relative;
  font-family: var(--rt-font-body);
  color: var(--rt-text-primary);
  -webkit-font-smoothing: antialiased;
}

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

.rt-ih-top {
  position: relative;
  overflow: hidden;
  padding: var(--pad-top, 150px) 24px 96px;
  /* the homepage hero's white → lilac wash */
  background: linear-gradient(to bottom, #fff 0%, var(--rt-hero-lilac) 100%);
}

/* Soft indigo glow behind the product composition */
.rt-ih-top::before {
  content: "";
  position: absolute;
  top: 8%;
  right: -10%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(102, 122, 250, 0.22), rgba(102, 122, 250, 0));
  pointer-events: none;
}

.rt-ih-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 48px;
  max-width: 1232px;
  margin: 0 auto;
}

.rt-ih-h1 {
  margin: 0;
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.2rem + 2.4vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.rt-ih-sub {
  margin: 20px 0 0;
  max-width: 560px;
  font-family: var(--rt-font-heading);
  font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.65;
  color: #3c4152;
  text-wrap: pretty;
}

.rt-ih-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}

/* The homepage hero's buttons */
.rt-ih-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-ih-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(31, 54, 167, 0.18);
}
.rt-ih-btn:focus-visible {
  outline: 2px solid var(--rt-primary-500);
  outline-offset: 3px;
}
.rt-ih-btn-primary {
  background: var(--rt-yellow-200);
  border-color: var(--rt-yellow-border);
  color: var(--rt-text-primary);
}
.rt-ih-btn-secondary {
  border-color: var(--rt-indigo-100);
  color: var(--rt-indigo-100);
}
.rt-ih-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* ---- Product composition: a 760 × 580 stage; --u is one stage unit ----
 * The column bleeds into the page gutter up to the right edge of the screen (.rt-ih-top clips it),
 * and the dispatcher overhangs the stage, so the app runs off the edge. */
.rt-ih-visual {
  --gutter: calc((100vw - min(1232px, 100vw - 48px)) / 2);
  container-type: inline-size;
  min-width: 0;
  margin-right: calc(-1 * var(--gutter));
}

.rt-ih-stage {
  --u: calc(100cqw / 760);
  position: relative;
  width: 100%;
}

.rt-ih-photo,
.rt-ih-device {
  position: absolute;
  left: calc(var(--l) * var(--u));
  top: calc(var(--t) * var(--u));
}

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

.rt-ih-photo {
  overflow: hidden;
  border-radius: calc(22 * var(--u));
  background: #dfe3f6;
  box-shadow: 0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(31, 54, 167, 0.18);
}
.rt-ih-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Devices: a white stroke outside the frame plus a soft shadow, as on the homepage */
.rt-ih-device {
  border-radius: calc(12 * var(--u));
  box-shadow:
    0 0 0 calc(5 * var(--u)) #fff,
    0 calc(14 * var(--u)) calc(36 * var(--u)) rgba(15, 26, 92, 0.2);
}
.rt-ih-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #fff;
}

/* ---- Dark band: customer logos + quote ---- */
.rt-ih-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  overflow: hidden;
  padding: 80px 0 96px;
  background: #131b52; /* the Reviews section's dark indigo */
}
.rt-ih-band .rt-lg {
  width: 100%;
}
.rt-ih-band .rt-lg-label {
  text-align: center;
}

.rt-ih-quote {
  width: calc(100% - 48px);
  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);
}
.rt-ih-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-ih-quote .rt-qa {
  margin-top: 22px;
  padding-left: 24px;
}

/* ---- Tablet / phone (layouts Figma doesn't have) ---- */
@media (max-width: 1023px) {
  .rt-ih-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .rt-ih-copy {
    max-width: 680px;
  }
  .rt-ih-visual {
    --gutter: 24px;
    width: calc(100% + var(--gutter));
    max-width: 820px;
  }
}

@media (max-width: 599px) {
  .rt-ih-visual {
    --gutter: 16px;
    container-type: normal;
  }
  /* Phones: a larger composition that runs further off the right edge */
  .rt-ih-stage {
    --u: calc((100vw - 16px) * 1.22 / 760);
    width: calc((100vw - 16px) * 1.22);
  }
  .rt-ih-top {
    padding: calc(var(--pad-top, 150px) - 40px) 16px 64px;
  }
  .rt-ih-btn {
    flex: 1 1 100%;
  }
  .rt-ih-band {
    gap: 40px;
    padding: 56px 0 64px;
  }
  .rt-ih-quote {
    width: calc(100% - 32px);
    padding: 28px 20px 24px;
  }
}

/* ---------------------------------------------------------------------------
 * Motion: base styles are the final state.
 * ------------------------------------------------------------------------- */
@keyframes rt-ih-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes rt-ih-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.rt-ih-animate .rt-ih-h1 { animation: rt-ih-up 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.rt-ih-animate .rt-ih-sub { animation: rt-ih-up 700ms 100ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.rt-ih-animate .rt-ih-ctas { animation: rt-ih-up 700ms 200ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.rt-ih-animate .rt-ih-photo { animation: rt-ih-fade 900ms 250ms ease-out both; }
.rt-ih-animate .rt-dispatcher { animation: rt-ih-up 900ms 350ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.rt-ih-animate .rt-ih-pill { animation: rt-ih-up 700ms 800ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* The dispatcher's drivers pulse, as on the homepage hero */
@keyframes rt-ih-pulse {
  0% { opacity: 0.35; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.4); }
}
.rt-ih-animate .rt-pulse,
.rt-ih-animate .rt-pulse-ring {
  animation: rt-ih-pulse 2.2s ease-out infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .rt-ih *,
  .rt-ih .rt-lg-track {
    animation: none !important;
    transition: none !important;
  }
}