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

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

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

/* ---------------------------------------------------------------------------
 * Industry "how it works" (not in Figma: homepage design language, flag for design review)
 * ------------------------------------------------------------------------- */
.rt-hw {
  position: relative;
  padding: 128px 24px;
  background: #fff;
  font-family: var(--rt-font-body);
  color: var(--rt-text-primary);
  -webkit-font-smoothing: antialiased;
}

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

.rt-hw-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.rt-hw-header {
  max-width: 820px;
  margin: 0 auto 72px;
  text-align: center;
}

.rt-hw-h2 {
  margin: 0;
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 2vw, 3rem);
  line-height: 1.2;
  text-wrap: balance;
}

.rt-hw-sub {
  margin: 16px 0 0;
  font-family: var(--rt-font-heading);
  font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--rt-text-secondary);
}

/* ---- Steps: badges are stops on a route (dotted ahead, solid once scrolled past) ---- */
.rt-hw-steps {
  --badge: 40px;
  --rail-x: calc(var(--badge) / 2);
  --rt-hw-p: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 96px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rt-hw-steps::before,
.rt-hw-steps::after {
  content: "";
  position: absolute;
  top: var(--rail-top, 0);
  bottom: var(--rail-bottom, 0);
  left: calc(var(--rail-x) - 1.5px);
  width: 3px;
  border-radius: 2px;
}
/* road ahead */
.rt-hw-steps::before {
  background: repeating-linear-gradient(to bottom, #c9cff5 0 6px, transparent 6px 12px);
}
/* driven */
.rt-hw-steps::after {
  background: var(--rt-indigo-100);
  transform-origin: top;
  transform: scaleY(var(--rt-hw-p));
}

.rt-hw-step {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}

.rt-hw-copy {
  position: relative;
  padding-left: calc(var(--badge) + 24px);
}

.rt-hw-badge {
  position: absolute;
  top: -4px;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--badge);
  height: var(--badge);
  border-radius: 50%;
  background: var(--rt-indigo-100);
  color: #fff;
  font-family: var(--rt-font-heading);
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 0 0 6px #fff, 0 0 0 7px #dfe3fb;
  z-index: 1;
}

.rt-hw-title {
  margin: 0;
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  line-height: 1.25;
}

.rt-hw-text {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.65;
  color: #3c4152;
  text-wrap: pretty;
}

.rt-hw-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--rt-font-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--rt-indigo-100);
  text-decoration: none;
}
.rt-hw-link span {
  transition: transform 160ms ease;
}
.rt-hw-link:hover span {
  transform: translateX(3px);
}
.rt-hw-link:focus-visible {
  outline: 2px solid var(--rt-primary-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Visual panel: a 560 × 400 stage on a lavender card ---- */
.rt-hw-visual {
  container-type: inline-size;
  min-width: 0;
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(102, 122, 250, 0.16), rgba(102, 122, 250, 0) 60%),
    #eef0fd;
}

.rt-hw-stage {
  --u: calc(100cqw / 560);
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 28px;
}

.rt-hw-card,
.rt-hw-phone,
.rt-hw-arrow {
  position: absolute;
  left: calc(var(--l) * var(--u));
  top: calc(var(--t) * var(--u));
}
.rt-hw-card,
.rt-hw-phone,
.rt-hw-arrow {
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}

.rt-hw-card {
  overflow: hidden;
  border-radius: calc(16 * var(--u));
  background: #fff;
  box-shadow: 0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(15, 26, 92, 0.14);
  font-size: calc(12 * var(--u));
  line-height: 1.35;
}

.rt-hw-map svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rt-hw-phone {
  border-radius: calc(13 * 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-hw-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #fff;
}

/* Spreadsheet */
.rt-hw-sheet-bar {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(30 * var(--u));
  padding: 0 calc(12 * var(--u));
  background: #1fae6b;
  color: #fff;
  font-weight: 700;
  font-size: calc(12 * var(--u));
}
.rt-hw-dots {
  display: flex;
  gap: calc(4 * var(--u));
}
.rt-hw-dots i {
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
}
.rt-hw-sheet-head,
.rt-hw-sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  padding: 0 calc(12 * var(--u));
}
.rt-hw-sheet-head {
  height: calc(24 * var(--u));
  border-bottom: 1px solid #e6e9f2;
  font-weight: 700;
  font-size: calc(10 * var(--u));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rt-text-tertiary);
}
.rt-hw-sheet-row {
  height: calc(33.6 * var(--u));
  border-bottom: 1px solid #f0f2f7;
}
.rt-hw-sheet-row > span:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rt-hw-sheet-row strong {
  font-weight: 700;
  font-size: calc(12 * var(--u));
  white-space: nowrap;
}
.rt-hw-sheet-row em {
  font-style: normal;
  font-size: calc(10.5 * var(--u));
  color: var(--rt-text-secondary);
  white-space: nowrap;
}
.rt-hw-window {
  flex: none;
  padding: calc(3 * var(--u)) calc(7 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #eef0fd;
  color: var(--rt-indigo-100);
  font-weight: 700;
  font-size: calc(10.5 * var(--u));
}

/* Chips */
/* Route card (dispatch) */
.rt-hw-route {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(18 * var(--u));
}
.rt-hw-route-head {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}
.rt-hw-route-head > span:last-child {
  display: flex;
  flex-direction: column;
}
.rt-hw-route-head strong {
  font-size: calc(14 * var(--u));
}
.rt-hw-route-head em {
  font-style: normal;
  font-size: calc(11.5 * var(--u));
  color: var(--rt-text-secondary);
}
.rt-hw-avatar {
  display: grid;
  place-items: center;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: 50%;
  background: #eef0fd;
  color: var(--rt-indigo-100);
  font-weight: 700;
  font-size: calc(12 * var(--u));
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) #7547bf;
}
.rt-hw-route-stats {
  display: flex;
  gap: calc(16 * var(--u));
  padding: calc(12 * var(--u)) 0;
  border-top: 1px solid #eef0f6;
  border-bottom: 1px solid #eef0f6;
  font-size: calc(12 * var(--u));
  color: var(--rt-text-secondary);
}
.rt-hw-route-stats strong {
  color: var(--rt-text-primary);
  font-size: calc(14 * var(--u));
}
.rt-hw-route-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  height: calc(36 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--rt-indigo-100);
  color: #fff;
  font-weight: 700;
  font-size: calc(13 * var(--u));
}
.rt-hw-route-btn svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}

/* SMS (notify) */
.rt-hw-sms {
  padding: calc(16 * var(--u)) calc(18 * var(--u));
  border-radius: calc(20 * var(--u));
  background: rgba(255, 255, 255, 0.92);
}
.rt-hw-sms-head {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(12 * var(--u));
}
.rt-hw-sms-head em {
  margin-left: auto;
  font-style: normal;
  color: var(--rt-text-tertiary);
}
.rt-hw-sms-icon {
  display: grid;
  place-items: center;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #34c759;
}
.rt-hw-sms-icon svg {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
}
.rt-hw-sms p {
  margin: calc(10 * var(--u)) 0 0;
  font-size: calc(14 * var(--u));
  line-height: 1.45;
}
.rt-hw-sms-link {
  color: var(--rt-primary-500);
}

/* ---- Tablet / phone ---- */
@media (max-width: 899px) {
  .rt-hw {
    padding: 96px 16px;
  }
  .rt-hw-header {
    margin-bottom: 56px;
  }
  .rt-hw-steps {
    --badge: 34px;
    gap: 72px;
  }
  .rt-hw-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .rt-hw-visual {
    margin-left: calc(var(--badge) + 16px);
  }
  .rt-hw-copy {
    padding-left: calc(var(--badge) + 16px);
  }
  .rt-hw-badge {
    font-size: 16px;
  }
  .rt-hw-text {
    font-size: 17px;
  }
}

@media (max-width: 599px) {
  .rt-hw-visual,
  .rt-hw-stage {
    border-radius: 20px;
  }
}

/* ---------------------------------------------------------------------------
 * Motion: base styles are the final state. Entrances are assigned under .rt-hw-animate and
 * held on their first frame until the step scrolls into view.
 * ------------------------------------------------------------------------- */
@keyframes rt-hw-pop {
  0% { opacity: 0; transform: scale(0); }
  70% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes rt-hw-row {
  0% { background: #fff; }
  30% { background: #eef0fd; }
  100% { background: #fff; }
}
@keyframes rt-hw-rise {
  from { opacity: 0; transform: translateY(calc(12 * var(--u))); }
  to { opacity: 1; transform: none; }
}
@keyframes rt-hw-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes rt-hw-tangle {
  0%, 40% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
@keyframes rt-hw-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

.rt-hw-tangle {
  opacity: 0;
}
.rt-hw-draw {
  stroke-dasharray: 1;
}

.rt-hw-animate .rt-hw-pop { animation: rt-hw-pop 420ms cubic-bezier(0.34, 1.4, 0.64, 1) both; }
.rt-hw-animate .rt-hw-sheet-row { animation: rt-hw-row 900ms ease both; }
.rt-hw-animate .rt-hw-rise { animation: rt-hw-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.rt-hw-animate .rt-hw-tangle { animation: rt-hw-tangle 2s ease both; }
.rt-hw-animate .rt-hw-draw { animation: rt-hw-draw 1.3s cubic-bezier(0.45, 0, 0.2, 1) both; }
.rt-hw-animate .rt-hw-recolor { animation: rt-hw-fade-in 500ms ease both; }

.rt-hw-animate .rt-hw-step:not(.is-inview) :is(.rt-hw-pop, .rt-hw-sheet-row, .rt-hw-rise, .rt-hw-tangle, .rt-hw-draw, .rt-hw-recolor) {
  animation-play-state: paused;
}

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