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

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

/* ---------------------------------------------------------------------------
 * Section (Figma 7166:88974, background 7166:88948)
 * ------------------------------------------------------------------------- */
.rt-tp {
  position: relative;
  overflow: hidden;
  font-family: var(--rt-font-heading);
  color: var(--rt-text-primary);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

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

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

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

.rt-tp-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-tp-sub {
  margin: 0;
  font-size: clamp(1.0625rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  text-wrap: pretty;
}





/* ---------------------------------------------------------------------------
 * Showcase: a lavender panel with the four tabs, and the app frame rising out of its bottom
 * ------------------------------------------------------------------------- */
.rt-tp-showcase {
  width: 100%;
  margin-top: 20px;
}

.rt-tp-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 55px;
  overflow: hidden;
  padding: 20px 10px 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(31, 54, 167, 0.05);
}

.rt-tp-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.rt-tp-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  overflow: hidden;
  padding: 22px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: linear-gradient(to bottom, #f4f6ff, #fff);
  font: inherit;
  color: #000;
  text-align: left;
  cursor: pointer;
  opacity: 0.5;
  transition:
    opacity 250ms ease,
    border-color 250ms ease,
    box-shadow 250ms ease;
}

/* On the published site TextNode props (the tab text) are light-DOM <span slot> elements. A click
   on them never reaches React (it can't map that target to the tab), so let it fall through to
   the button. */
.rt-tp-tab ::slotted(*) {
  pointer-events: none;
}

.rt-tp-tab:hover {
  opacity: 0.8;
}

.rt-tp-tab.is-active {
  border-color: var(--rt-indigo-100);
  opacity: 1;
  box-shadow: 0 6px 18px rgba(55, 76, 210, 0.1);
}

.rt-tp-tab:focus-visible {
  outline: 3px solid var(--rt-yellow-200);
  outline-offset: 2px;
}

.rt-tp-tab-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.rt-tp-tab-head img {
  flex: none;
  margin-top: 5.5px;
}

.rt-tp-tab-title {
  font-family: var(--rt-font-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  padding-top: 2.5px;
}

.rt-tp-tab-text {
  font-family: var(--rt-font-body);
  font-size: 18px;
  line-height: 24px;
}

/* Time left on the current demo, along the bottom of the active tab */
.rt-tp-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--rt-indigo-100);
  transform-origin: left;
  animation: rt-tp-progress linear both;
}

@keyframes rt-tp-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---- Stage: blurred map + driver phone + dispatcher cards, 1061 × 562 in Figma units ---- */
.rt-tp-stage-wrap {
  width: 100%;
  max-width: 1061px;
  container-type: inline-size;
}

.rt-tp-stage {
  --u: calc(100cqw / 1061);
  position: relative;
  width: 100%;
  aspect-ratio: 1061 / 562;
  overflow: hidden;
}

.rt-tp-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(24 * var(--u)) calc(24 * var(--u)) 0 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 12%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 12%);
  mask-composite: intersect;
}

.rt-tp-backdrop-svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: blur(calc(5 * var(--u))) saturate(1.1);
  transform: scale(1.04);
}

/* The phone is cropped by the bottom of the stage, as in Figma. */
.rt-tp-phone {
  position: absolute;
  left: calc(335 * var(--u));
  top: calc(55.6 * var(--u));
  width: calc(372 * var(--u));
  height: calc(808.8 * var(--u));
  overflow: hidden;
  border-radius: calc(48 * var(--u));
  background: #fff;
  box-shadow:
    0 0 0 calc(9 * var(--u)) #fff,
    0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(31, 54, 167, 0.28);
}

.rt-tp-phone-svg,
.rt-tp-cards-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.rt-tp-cards-svg {
  pointer-events: none;
}

.rt-tp-phone-svg text,
.rt-tp-cards-svg text {
  font-family: var(--rt-font-body);
  fill: #1d2433;
}

/* phone (hero phone units) */
.rt-tpp-clock { font-size: 8px; font-weight: 700; text-anchor: middle; }
.rt-tp-phone-svg .rt-tpp-clock { fill: #000; }
.rt-tpp-title { font-size: 8.4px; font-weight: 700; text-anchor: middle; }
.rt-tp-phone-svg .rt-tpp-k { font-size: 5.8px; fill: #676d7e; }
.rt-tpp-v { font-size: 6.6px; font-weight: 600; }
.rt-tpp-stop { font-size: 5.6px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.rt-tp-phone-svg .rt-tpp-stop { fill: inherit; }
.rt-tp-phone-svg .rt-tpp-eyebrow { font-size: 6px; font-weight: 700; fill: #326bfc; letter-spacing: 0.5px; }
.rt-tpp-h2 { font-size: 9.6px; font-weight: 700; }
.rt-tp-phone-svg .rt-tpp-blue { fill: #326bfc; }
.rt-tp-phone-svg .rt-tpp-btn { font-size: 7.2px; font-weight: 600; fill: #fff; text-anchor: middle; }
.rt-tp-phone-svg .rt-tpp-btn-outline { font-size: 6.4px; fill: #326bfc; }
.rt-tp-phone-svg .rt-tpp-btn-sm { font-size: 6.4px; }
.rt-tpp-notif-t { font-size: 8px; font-weight: 700; }
.rt-tp-phone-svg .rt-tpp-notif-time { font-size: 6.6px; fill: #6b7280; }
.rt-tpp-notif { font-size: 7.4px; }
.rt-tp-phone-svg .rt-tpp-tag { font-size: 5.6px; font-weight: 700; letter-spacing: 0.4px; fill: #fff; }
.rt-tp-phone-svg .rt-tpp-note { font-size: 7.4px; font-weight: 600; }
.rt-tp-phone-svg .rt-tpp-lockdate { font-size: 8px; font-weight: 600; fill: #fff; text-anchor: middle; }
.rt-tp-phone-svg .rt-tpp-locktime { font-family: var(--rt-font-display); font-size: 44px; font-weight: 700; fill: #fff; text-anchor: middle; }
.rt-tpp-addr { font-size: 6.4px; }
.rt-tp-phone-svg .rt-tpp-chip { font-size: 5.6px; font-weight: 600; fill: #c62828; }

/* cards (stage units) */
.rt-tp-cards-svg .rt-tp-card-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1px; fill: #8a90a2; }
.rt-tp-card-h { font-size: 16px; font-weight: 700; }
.rt-tp-cards-svg .rt-tp-card-k { font-size: 13px; fill: #5b6274; }
.rt-tp-card-row { font-size: 14px; font-weight: 600; }
.rt-tp-cards-svg .rt-tp-live-route { font-size: 14.232px; font-weight: 600; fill: #282828; }
.rt-tp-cards-svg .rt-tp-live-driver { font-size: 14.232px; font-weight: 400; fill: #000; }
.rt-tp-cards-svg .rt-tp-live-initials { font-size: 10.67px; font-weight: 500; fill: #326bfc; text-anchor: middle; }
.rt-tp-cards-svg .rt-tp-live-status { font-size: 14.232px; font-weight: 400; }
.rt-tp-cards-svg .rt-tp-card-btn { font-size: 16px; font-weight: 700; fill: #fff; text-anchor: middle; }

.rt-tp-live-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: rt-tp-blink 1.4s ease-in-out infinite;
}
@keyframes rt-tp-blink { 50% { opacity: 0.3; } }
.rt-tp-bar {
  transform-box: fill-box;
  transform-origin: left center;
}
.rt-tp-row {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------------------------------------------------------------------------
 * Testimonial + faint hex patterns (Figma 7166:89069, bg 7166:88948)
 * ------------------------------------------------------------------------- */
.rt-tp-quote-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 80px 24px 96px;
}

.rt-tp-hexes {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* fades in and back out, so nothing is left at the section's bottom edge to clash with the next */
  background: linear-gradient(to bottom, rgba(31, 54, 167, 0), rgba(31, 54, 167, 0.16) 40%, rgba(31, 54, 167, 0.16) 55%, rgba(31, 54, 167, 0));
  mask-size: max(1909px, 140%) auto;
  mask-position: center top;
  mask-repeat: no-repeat;
  -webkit-mask-size: max(1909px, 140%) auto;
  -webkit-mask-position: center top;
  -webkit-mask-repeat: no-repeat;
  pointer-events: none;
}

/* Hexes continuing from the section above, fading out behind the title */
.rt-tp-hexes-top {
  inset: 0 0 auto;
  height: 520px;
  /* 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) 80%);
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
}

.rt-tp-quote {
  position: relative;
  z-index: 1;
  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-tp-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-tp-quote .rt-qa {
  margin-top: 22px;
  padding-left: 24px;
}

/* ---------------------------------------------------------------------------
 * Responsive (only the 1440 layout exists in Figma)
 * ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .rt-tp-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .rt-tp-inner {
    padding: 96px 16px 0;
  }
  .rt-tp-panel {
    gap: 24px;
    padding: 12px 8px 0;
  }
  .rt-tp-tabs {
    gap: 8px;
  }
  .rt-tp-tab {
    padding: 14px;
  }
  .rt-tp-tab-title {
    font-size: 17px;
    line-height: 22px;
    padding-top: 1px;
  }
  .rt-tp-tab-head img {
    width: 20px;
    height: 20px;
    margin-top: 1px;
  }
  /* Descriptions only on the active tab, under the grid */
  .rt-tp-tab-text {
    display: none;
  }
  .rt-tp-quote-wrap {
    padding: 72px 16px 64px;
  }
  .rt-tp-quote {
    padding: 32px 20px;
  }
}

/* ---------------------------------------------------------------------------
 * Demo plumbing. Every animated piece is .rt-tp-a with an inline animation-name; the
 * keyframes come from Demos.tsx. Nothing animates until the section is in view.
 * ------------------------------------------------------------------------- */
.rt-tp-a {
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
}
.rt-tp:not(.is-playing) .rt-tp-a {
  animation-name: none !important;
}
.rt-tp .rt-hide {
  opacity: 0;
}
.rt-tp:not(.is-playing) .rt-tp-cursor {
  opacity: 0;
}
.rt-tp-box {
  transform-box: fill-box;
  transform-origin: center;
}
.rt-tp-dash path,
path.rt-tp-dash {
  stroke-dasharray: 1 2;
}
.rt-tp:not(.is-playing) .rt-tp-dash path,
.rt-tp:not(.is-playing) path.rt-tp-dash {
  stroke-dasharray: none;
}
.rt-tp-cursor {
  pointer-events: none;
}

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

/* Phones: crop the stage to the driver phone (shown ~2× larger); the floating dispatcher cards
   don't fit beside it at this width, so they're left out. */
@media (max-width: 599px) {
  .rt-tp-stage-wrap {
    overflow: hidden;
    border-radius: 16px 16px 0 0;
  }
  .rt-tp-stage {
    --u: calc(100cqw / 560);
    width: calc(1061 * var(--u));
    margin-left: calc(-241 * var(--u));
  }
  .rt-tp-cards-svg {
    display: none;
  }
}