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

/* ---------------------------------------------------------------------------
 * 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(1.875rem, 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));
}

/* Barcode step: the orders' barcode column, and a package label being scanned */
.rt-hw-code {
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  font-size: calc(10.5 * var(--u));
  color: var(--rt-text-secondary);
}
.rt-hw-sheet-row.is-scanned {
  background: #ecfaf3;
}
.rt-hw-sheet-row.is-scanned .rt-hw-code {
  color: #0e7a62;
}
.rt-hw-label {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(16 * var(--u));
}
.rt-hw-label-head,
.rt-hw-label-to {
  display: flex;
  flex-direction: column;
}
.rt-hw-label-head {
  padding-bottom: calc(8 * var(--u));
  border-bottom: 1px dashed #d5d9e8;
}
.rt-hw-label strong {
  font-weight: 700;
  font-size: calc(13 * var(--u));
}
.rt-hw-label em {
  font-style: normal;
  font-size: calc(10.5 * var(--u));
  color: var(--rt-text-secondary);
}
.rt-hw-barcode {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3 * var(--u));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(10 * var(--u));
  letter-spacing: 0.12em;
}
.rt-hw-barcode svg {
  display: block;
  width: 100%;
  height: calc(40 * var(--u));
  fill: var(--rt-text-primary);
}
/* the scanner's red line sweeps the barcode once (in its final state it's gone) */
.rt-hw-scanline {
  position: absolute;
  left: calc(-4 * var(--u));
  right: calc(-4 * var(--u));
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: #e2445c;
  box-shadow: 0 0 calc(6 * var(--u)) rgba(226, 68, 92, 0.7);
  opacity: 0;
}
.rt-hw-found {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: calc(6 * var(--u));
  padding: calc(5 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
  background: #d9f5ee;
  color: #0e7a62;
  font-weight: 700;
  font-size: calc(11 * var(--u));
}
.rt-hw-found svg {
  width: calc(13 * var(--u));
  height: calc(13 * 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-scan {
  0% { top: 0; opacity: 1; }
  50% { top: calc(40 * var(--u)); opacity: 1; }
  100% { top: 0; opacity: 0; }
}
@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-step.is-inview .rt-hw-scanline { animation: rt-hw-scan 900ms ease-in-out 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;
  }
}

/* Phones: tighter section spacing (mobile QA, Oct 2026). */
@media (max-width: 599px) {
  .rt-hw {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}