/*
 * 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 value props (not in Figma: homepage design language, flag for design review)
 * ------------------------------------------------------------------------- */
.rt-vp {
  padding: 128px 24px;
  background: #fff;
  font-family: var(--rt-font-body);
  color: var(--rt-text-primary);
  -webkit-font-smoothing: antialiased;
}

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

.rt-vp-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: center;
  gap: 72px;
  max-width: 1180px;
  margin: 0 auto;
}

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

/* ---- Accordion ---- */
.rt-vp-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rt-vp-item {
  border: 1.5px solid transparent;
  border-radius: 20px;
  background: #f4f5fe;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.rt-vp-item.is-open {
  border-color: #d9ddfb;
  background: #fff;
  box-shadow: 0 14px 36px rgba(31, 54, 167, 0.1);
}

.rt-vp-item-h {
  margin: 0;
}

.rt-vp-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 22px 24px;
  border: 0;
  background: none;
  font: inherit;
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.375rem);
  line-height: 1.3;
  color: var(--rt-text-primary);
  text-align: left;
  cursor: pointer;
}
/* On the published site a TextNode is a slotted span; let clicks reach the button */
.rt-vp-toggle ::slotted(*) {
  pointer-events: none;
}
.rt-vp-toggle:focus-visible {
  outline: 2px solid var(--rt-primary-500);
  outline-offset: -2px;
  border-radius: 18px;
}
.rt-vp-item.is-open .rt-vp-toggle {
  padding-bottom: 8px;
  color: #2435a1;
}

.rt-vp-chevron {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--rt-indigo-100);
  transition: transform 220ms ease;
}
.rt-vp-item.is-open .rt-vp-chevron {
  transform: rotate(180deg);
}

.rt-vp-panel {
  padding: 0 24px 24px;
}
.rt-vp-panel p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: #3c4152;
  text-wrap: pretty;
}

/* ---- Visual: a 600 × 560 stage; the scenes cross-fade ---- */
.rt-vp-visual {
  container-type: inline-size;
  min-width: 0;
}
.rt-vp-stage {
  --u: calc(100cqw / 600);
  position: relative;
  width: 100%;
}
.rt-vp-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 380ms ease, visibility 0s linear 380ms;
}
.rt-vp-scene.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 380ms ease;
}

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

/* The photo layer is the original composite, rounded corners included */
.rt-vp-photo {
  overflow: hidden;
}
/* Keeps the driver phone inside the photo (cut off at its bottom edge, as in the original) */
.rt-vp-clip {
  overflow: hidden;
  border-radius: calc(22 * var(--u));
}
.rt-vp-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rt-vp-card {
  border-radius: calc(16 * var(--u));
  background: #fff;
  box-shadow: 0 calc(14 * var(--u)) calc(36 * var(--u)) rgba(15, 26, 92, 0.18);
  font-size: calc(12 * var(--u));
  line-height: 1.35;
}

.rt-vp-phone {
  border-radius: calc(14 * var(--u));
  box-shadow:
    0 0 0 calc(5 * var(--u)) #fff,
    0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(15, 26, 92, 0.25);
}
.rt-vp-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #fff;
}

/* Route with time windows */
.rt-vp-route {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(var(--h) * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
}
.rt-vp-route-head {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding-bottom: calc(10 * var(--u));
  border-bottom: 1px solid #eef0f6;
}
.rt-vp-route-head > span:last-child {
  display: flex;
  flex-direction: column;
}
.rt-vp-route-head strong {
  font-size: calc(14 * var(--u));
}
.rt-vp-route-head em,
.rt-vp-stop em {
  font-style: normal;
  font-size: calc(11 * var(--u));
  color: var(--rt-text-secondary);
}
.rt-vp-avatar {
  display: grid;
  place-items: center;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  border-radius: 50%;
  background: #eef0fd;
  color: var(--rt-indigo-100);
  font-weight: 700;
  font-size: calc(11.5 * var(--u));
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) #7547bf;
}
.rt-vp-stop {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) 0;
  border-bottom: 1px solid #f2f3f8;
}
.rt-vp-stop:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.rt-vp-num {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border-radius: 50%;
  background: #7547bf;
  color: #fff;
  font-weight: 700;
  font-size: calc(11 * var(--u));
}
.rt-vp-stop-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.rt-vp-stop strong {
  font-size: calc(13 * var(--u));
}
.rt-vp-window {
  align-self: flex-start;
  margin-bottom: calc(3 * var(--u));
  padding: calc(1 * var(--u)) calc(6 * var(--u));
  border-radius: calc(5 * var(--u));
  background: #eef0fd;
  color: var(--rt-indigo-100);
  font-weight: 700;
  font-size: calc(10.5 * var(--u));
}
.rt-vp-status {
  flex: none;
  padding: calc(3 * var(--u)) calc(7 * var(--u));
  border-radius: 999px;
  background: #e3f6ec;
  color: #127a4a;
  font-weight: 700;
  font-size: calc(10.5 * var(--u));
}
.rt-vp-status.is-eta {
  background: #fff3dc;
  color: #9a5d00;
}

/* Chips */

/* SMS bubble + proof of delivery */
.rt-vp-sms p {
  margin: 0;
}
.rt-vp-sms {
  display: flex;
  align-items: center;
  height: calc(var(--h) * var(--u));
  padding: calc(16 * var(--u)) calc(22 * var(--u));
  border-radius: calc(20 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)) calc(6 * var(--u));
  background: #fff; /* opaque: it covers the old bubble in the photo */
  font-size: max(12px, calc(24 * var(--u)));
  line-height: 1.45;
}
.rt-vp-sms span {
  color: var(--rt-primary-500);
}

/* No-photo scenes: a map of optimized routes, an Engine API request */
.rt-vp-mapcard {
  height: calc(480 * var(--u));
  overflow: hidden;
  border-radius: calc(26 * var(--u));
}
.rt-vp-mapcard svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rt-vp-code {
  overflow: hidden;
  border-radius: calc(20 * var(--u));
  background: #131b52;
  color: #c9d0ff;
  box-shadow: 0 calc(20 * var(--u)) calc(48 * var(--u)) rgba(15, 26, 92, 0.3);
}
.rt-vp-code-bar {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  background: rgba(255, 255, 255, 0.06);
  font-size: calc(12 * var(--u));
  color: #8f99d8;
}
.rt-vp-code-bar i {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.rt-vp-code-bar span {
  margin-left: calc(8 * var(--u));
}
.rt-vp-code pre {
  margin: 0;
  padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(28 * var(--u));
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: max(10px, calc(14 * var(--u)));
  line-height: 1.75;
  white-space: pre;
  overflow: hidden;
}
.rt-vp-code pre span {
  display: block;
}
.rt-vp-code b { color: var(--rt-yellow-200); font-weight: 700; }
.rt-vp-code i { color: #8fd3ff; font-style: normal; }
.rt-vp-code s { color: #a6e3a1; text-decoration: none; }
.rt-vp-code u { color: #ffb4c8; text-decoration: none; }

/* ---- Tablet / phone ---- */
@media (max-width: 959px) {
  .rt-vp {
    padding: 96px 16px;
  }
  .rt-vp-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .rt-vp-visual {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
}
@media (max-width: 599px) {
  .rt-vp-toggle {
    padding: 18px 18px;
  }
  .rt-vp-panel {
    padding: 0 18px 20px;
  }
  .rt-vp-panel p {
    font-size: 16px;
  }
}

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