/* ==========================================================================
   PrimeOMS scenes — section layouts for the living landing page
   ========================================================================== */

/* ---- Shared helpers ----------------------------------------------------- */

.av--md { width: 36px; height: 36px; }
.av--lg { width: 48px; height: 48px; }
.av--xl { width: 76px; height: 76px; }

.sh--left { margin-left: 0; text-align: left; }
.sh--left .lead { margin-left: 0; }

.sh--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 24px 64px;
  align-items: end;
  text-align: left;
}
.sh--split .lead { margin: 0; max-width: 520px; justify-self: end; font-size: 21px; }

.feat-list { display: grid; gap: 18px; margin-top: 32px; }
.feat-list li { display: flex; gap: 14px; align-items: flex-start; }
.feat-list .icon { font-size: 22px; margin-top: 2px; color: var(--primary-on-dark); }
.feat-list b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.374px; }
.feat-list span { display: block; color: var(--body-muted); }

/* ---- Hero --------------------------------------------------------------- */

.hero2 { position: relative; padding: 72px 0 104px; overflow: hidden; background: var(--canvas); }

.hero2__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 64px;
  align-items: center;
}

.presence {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--canvas);
  font-size: 13px;
  letter-spacing: -0.12px;
  color: var(--ink-80);
}
.presence__stack { display: flex; }
.presence__stack .av { width: 26px; height: 26px; margin-left: -8px; box-shadow: 0 0 0 2px var(--canvas); }
.presence__stack .av:first-child { margin-left: 0; }

.hero2__title { margin-top: 22px; font-size: 60px; letter-spacing: -1px; }
.hero2__accent {
  position: relative;
  color: var(--primary);
  white-space: nowrap;
  padding-bottom: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9c40-6 80-7 120-3s90 5 176-4' fill='none' stroke='%236fcaa8' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 0% 12px no-repeat;
  animation: underline 1s 0.6s cubic-bezier(0.6, 0, 0.2, 1) forwards;
}
@keyframes underline { to { background-size: 100% 12px; } }

.hero2__lead { margin-top: 22px; max-width: 520px; font-size: 21px; line-height: 1.45; letter-spacing: -0.2px; color: var(--ink-80); }
.hero2__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero2__ticks { display: grid; gap: 8px; margin-top: 28px; font-size: 15px; letter-spacing: -0.2px; color: var(--ink-80); }
.hero2__ticks li { display: flex; align-items: center; gap: 8px; }
.hero2__ticks .icon { font-size: 16px; stroke-width: 2.2; color: var(--st-green); }

/* Stage: tilted live window */
.hero2__stage { position: relative; perspective: 1800px; }
.hero2__stage::before {
  content: "";
  position: absolute;
  inset: -48px -80px -56px -32px;
  border-radius: 40px;
  background-color: var(--av-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%230b4aa8' fill-opacity='.18'/%3E%3C/svg%3E");
}
.stage {
  position: relative;
  transform: rotateY(var(--ry, -10deg)) rotateX(var(--rx, 4deg));
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.stage__window { position: relative; }

.bar-presence { display: flex; margin-left: auto; }
.bar-presence .av { margin-left: -5px; box-shadow: 0 0 0 1.5px var(--parchment); }

.mini-app { display: grid; grid-template-columns: 52px minmax(0, 1fr); }
.rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
  border-right: 1px solid var(--divider-soft);
}
.rail img { height: 22px; width: auto; margin-bottom: 8px; }
.rail i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--ink-48); font-size: 15px; }
.rail i.is-active { background: var(--st-blue-bg); color: var(--primary); }
.mini-app__main { min-width: 0; padding: 14px 16px 6px; background: var(--parchment); }
.m-orders--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.m-kpi { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.m-kpi.is-hover { border-color: var(--primary-focus); box-shadow: 0 0 0 3px var(--st-blue-bg); }
.m-kpi b { display: inline-block; }
.m-courier { transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease; }
.m-courier.is-pressed { transform: scale(0.92); }
.m-courier.is-sent { background: var(--primary); color: var(--body-on-dark); }
.chip { transition: background-color 0.3s ease, color 0.3s ease; }

/* Multiplayer cursors */
.mp-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  pointer-events: none;
  transform: translate(var(--x, 300px), var(--y, 200px));
  transition: transform 1.1s cubic-bezier(0.45, 0.05, 0.2, 1);
}
.mp-cursor--a { --c: var(--primary); }
.mp-cursor--b { --c: var(--ink); }
.mp-cursor__arrow {
  display: block;
  width: 18px;
  height: 18px;
  fill: var(--c);
  stroke: #ffffff;
  stroke-width: 1.4;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}
.mp-cursor.is-click .mp-cursor__arrow { transform: scale(0.82); }
.mp-cursor__tag {
  position: absolute;
  left: 13px;
  top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 2px;
  border-radius: var(--r-pill);
  background: var(--c);
  color: var(--body-on-dark);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.mp-cursor__tag .av { background: var(--canvas); }
.mp-cursor__ripple { position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; background: var(--c); opacity: 0; }
.mp-cursor.is-click .mp-cursor__ripple { animation: ripple 0.6s ease-out; }

/* Floating chips around the stage */
.stage__bubble,
.stage__check {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--hairline);
  background: var(--canvas);
  box-shadow: 0 14px 34px -12px rgba(29, 29, 31, 0.28);
  font-size: 12.5px;
  letter-spacing: -0.12px;
  color: var(--ink-80);
  white-space: nowrap;
}
.stage__bubble { left: -36px; top: -30px; padding: 5px 14px 5px 5px; border-radius: var(--r-pill); }
.stage__bubble b,
.stage__check b { color: var(--ink); font-weight: 600; }
.stage__bubble .typing { color: var(--ink-48); }
.stage__check { right: -26px; bottom: 44px; padding: 9px 13px; border-radius: 14px; }
.stage__check .icon { font-size: 16px; color: var(--st-green); stroke-width: 2; }

/* Toasts */
.toasts {
  position: absolute;
  z-index: 7;
  right: -34px;
  top: 58px;
  width: 264px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -14px rgba(29, 29, 31, 0.3);
  font-size: 12.5px;
  line-height: 1.3;
  letter-spacing: -0.12px;
  color: var(--ink-80);
  animation: pop-in 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
.toast b { color: var(--ink); font-weight: 600; }
.toast small { display: block; margin-top: 1px; font-size: 11px; color: var(--ink-48); }
.toast.is-leaving { animation: pop-out 0.35s ease forwards; }
.toast__icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--st-blue-bg); color: var(--primary); font-size: 17px; }

/* ---- Activity ticker ---------------------------------------------------- */

.ticker { padding: 14px 0; background: var(--canvas); border-top: 1px solid var(--divider-soft); border-bottom: 1px solid var(--divider-soft); }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__list { display: flex; gap: 12px; padding-right: 12px; }
.ticker__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 5px;
  border-radius: var(--r-pill);
  background: var(--parchment);
  font-size: 14px;
  letter-spacing: -0.2px;
  white-space: nowrap;
  color: var(--ink-80);
}
.ticker__list b { color: var(--ink); font-weight: 600; }
.ticker__list em { font-style: normal; font-weight: 600; color: var(--primary); }
.ticker__list em.up { color: var(--st-green); }
.ticker__list time { font-size: 12px; color: var(--ink-48); }
.ticker__icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--st-blue-bg); color: var(--primary); font-size: 15px; }

/* ---- Storyboard (How it works) ----------------------------------------- */

.story__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.story__step { position: relative; display: flex; flex-direction: column; gap: 18px; transition: opacity 0.4s ease; }
.story__track.is-playing .story__step:not(.is-active) { opacity: 0.55; }
.story__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 165px;
  right: -30px;
  width: 28px;
  border-top: 2px dashed var(--av-tint-2);
}

.story__panel {
  position: relative;
  height: 340px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--canvas);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: -0.12px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.story__step.is-active .story__panel { border-color: var(--primary-focus); box-shadow: 0 0 0 4px var(--st-blue-bg), 0 26px 50px -26px rgba(11, 74, 168, 0.4); }

.story__label { display: flex; gap: 12px; align-items: flex-start; }
.story__num {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--body-on-dark);
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}
.story__step.is-active .story__num { background: var(--primary); }
.story__label b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.374px; }
.story__label small { display: block; font-size: 14px; color: var(--ink-48); }

/* Chat */
.chat { display: flex; flex-direction: column; padding: 0; }
.chat__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--divider-soft); }
.chat__head b { display: block; font-size: 13px; font-weight: 600; }
.chat__head small { display: block; font-size: 11px; color: var(--st-green); }
.chat__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.msg {
  max-width: 84%;
  padding: 8px 12px;
  border-radius: 18px;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.msg.is-shown { opacity: 1; transform: none; }
.msg--in { align-self: flex-start; background: var(--parchment); color: var(--ink); border-bottom-left-radius: 6px; }
.msg--out { align-self: flex-end; background: var(--primary); color: var(--body-on-dark); border-bottom-right-radius: 6px; }
.msg--typing { align-self: flex-start; padding: 11px 13px; background: var(--parchment); color: var(--ink-48); }
.msg--typing.is-out { align-self: flex-end; background: var(--primary); color: var(--body-on-dark); }
.msg--typing:not([hidden]) { opacity: 1; transform: none; }
.msg.is-hidden { display: none; }
.chat__foot { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--divider-soft); font-size: 11.5px; color: var(--ink-48); }
.chat__foot b { color: var(--ink); }

/* Draft */
.pdraft { display: flex; flex-direction: column; gap: 12px; }
.pdraft__head { display: flex; align-items: center; justify-content: space-between; }
.pdraft__head b { font-size: 15px; font-weight: 600; letter-spacing: -0.3px; }
.pdraft__who { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-48); }
.pdraft__line,
.pdraft__row,
.pdraft__check { opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease, background-color 0.3s ease, color 0.3s ease; }
.pdraft__line { padding: 10px; border: 1px solid var(--hairline); border-radius: var(--r-md); }
.pdraft__row { display: flex; justify-content: space-between; color: var(--ink-80); }
.pdraft__free { font-weight: 600; color: var(--st-green); }
.pdraft__check { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--parchment); }
.pdraft__check .icon { font-size: 15px; color: var(--primary); }
.pdraft__check b { margin-left: auto; font-weight: 600; }
.pdraft__check.is-done { background: var(--st-green-bg); color: var(--st-green); }
.pdraft__check.is-done .icon { color: var(--st-green); }
.pdraft__scan { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(0, 102, 204, 0.16), transparent); transform: translateX(-100%); }
.pdraft__check.is-scanning .pdraft__scan { animation: scan 0.9s linear infinite; }
.is-shown.pdraft__line,
.is-shown.pdraft__row,
.is-shown.pdraft__check { opacity: 1; transform: none; }
.pdraft__total { display: flex; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--divider-soft); font-size: 13px; }
.pdraft__total b { font-weight: 600; }
.pdraft__btn { justify-content: center; padding: 10px; font-size: 12px; transition: transform 0.15s ease, background-color 0.3s ease; }
.pdraft__btn.is-pressed { transform: scale(0.95); }
.pdraft__btn.is-done { background: var(--st-green); }

/* Ship */
.pship { display: flex; flex-direction: column; gap: 18px; }
.pship__road { position: relative; height: 6px; margin: 22px 8px 0; border-radius: 3px; background: var(--divider-soft); }
.pship__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: 3px; background: var(--primary); transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
.pship__truck {
  position: absolute;
  top: 50%;
  left: var(--p, 0%);
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  display: grid;
  place-items: center;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: var(--canvas);
  color: var(--primary);
  font-size: 17px;
  transition: left 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.pship__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; text-align: center; font-size: 11px; color: var(--ink-48); }
.pship__steps li { padding-top: 8px; border-top: 2px solid var(--divider-soft); transition: color 0.3s ease, border-color 0.3s ease; }
.pship__steps li.is-done { border-color: var(--primary); color: var(--ink); font-weight: 600; }
.pship__done {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--st-green-bg);
  color: var(--st-green);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.pship__done.is-shown { opacity: 1; transform: none; }
.pship__done b { display: block; font-size: 13px; font-weight: 600; }
.pship__done small { display: block; font-size: 11px; opacity: 0.85; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; width: 6px; height: 10px; border-radius: 2px; animation: confetti 1.4s cubic-bezier(0.2, 0.6, 0.4, 1) forwards; }
@keyframes confetti {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* ---- Orders: live board ------------------------------------------------- */

.orders2 { overflow: hidden; }
.orders2__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 56px;
  align-items: center;
}
.orders2__copy .lead { margin-left: 0; font-size: 21px; }

.board {
  width: calc(100% + 140px);
  padding: 14px;
  border-radius: 24px;
  background: var(--parchment);
  color: var(--ink);
}
.board__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 12px; }
.board__title { font-size: 15px; font-weight: 600; letter-spacing: -0.3px; }
.board__cutoff {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--st-red-bg);
  color: var(--st-red);
  font-size: 12px;
}
.board__cutoff .icon { font-size: 14px; }
.board__cutoff b { font-variant-numeric: tabular-nums; }
.board__cols { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; }
.board__col { min-height: 300px; padding: 10px; border-radius: 16px; background: rgba(0, 0, 0, 0.035); }
.board__head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12px; font-weight: 600; color: var(--ink-80); }
.board__head em {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--canvas);
  font-size: 11px;
  font-style: normal;
  color: var(--ink-48);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-48); }
.dot--amber { background: var(--st-amber); }
.dot--blue { background: var(--primary); }
.dot--green { background: var(--st-green); }
.board__list { display: flex; flex-direction: column; gap: 8px; }
.bcard {
  position: relative;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--canvas);
  font-size: 12px;
  letter-spacing: -0.12px;
  transition: box-shadow 0.3s ease;
}
.bcard__top { display: flex; align-items: baseline; justify-content: space-between; }
.bcard__top b { font-size: 13px; font-weight: 600; }
.bcard__top span { font-size: 11.5px; color: var(--ink-80); }
.bcard__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.bcard.is-moving { z-index: 2; box-shadow: 0 18px 32px -14px rgba(11, 74, 168, 0.5); }
.bcard.is-new { animation: pop-in 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
.bcard.is-leaving { animation: pop-out 0.4s ease forwards; }

/* ---- Fraud Check: scan -------------------------------------------------- */

.fraud2__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 72px; align-items: center; }
.fraud2__copy .lead { margin-left: 0; font-size: 21px; }

.fscan { position: relative; padding-top: 34px; }
.fscan::before,
.inv2__stage::before {
  content: "";
  position: absolute;
  border-radius: 36px;
  background-color: var(--av-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%230b4aa8' fill-opacity='.18'/%3E%3C/svg%3E");
}
.fscan::before { inset: 0 -28px -36px -44px; }
.fscan .window { position: relative; z-index: 1; }
.fscan__who {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--canvas);
  box-shadow: 0 14px 34px -12px rgba(29, 29, 31, 0.28);
  font-size: 12.5px;
  color: var(--ink-80);
  white-space: nowrap;
}
.fscan__who b { color: var(--ink); font-weight: 600; }
.fscan__who .typing { color: var(--ink-48); }

.fraud__result { position: relative; overflow: hidden; }
.fraud__beam { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0, 102, 204, 0.13), transparent); transform: translateX(-100%); }
.fraud.is-scanning .fraud__beam { animation: scan 0.9s linear infinite; }
.ring__value { transition: stroke-dasharray 1.1s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease; }
.fraud.is-risky .ring__value { stroke: var(--st-red); }
.fraud .fraud__verdict { opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease, background-color 0.3s ease, color 0.3s ease; }
.fraud.is-verdict .fraud__verdict { opacity: 1; transform: none; }
.fraud.is-risky .fraud__verdict { background: var(--st-red-bg); color: var(--st-red); }
.fraud__stats b { font-variant-numeric: tabular-nums; }
.m-btn.is-pressed { transform: scale(0.92); }
.m-btn { transition: transform 0.15s ease; }

.verdicts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.verdict { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; letter-spacing: -0.2px; }
.verdict .icon { font-size: 16px; stroke-width: 2; }
.verdict--good { background: var(--st-green-bg); color: var(--st-green); }
.verdict--risk { background: var(--st-red-bg); color: var(--st-red); }

/* ---- Couriers: route ---------------------------------------------------- */

.couriers2 .sh--split .lead { color: var(--body-muted); }
.route { padding: 28px 28px 20px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 28px; background: var(--tile-2); }
.route__canvas { position: relative; aspect-ratio: 1000 / 260; margin: 36px 0 26px; }
.route__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route__base { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.route__progress { fill: none; stroke: var(--primary-on-dark); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--off, 1); }
.route__stop { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.route__dot {
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: var(--tile-2);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.route__stop.is-done .route__dot { background: var(--primary-on-dark); border-color: var(--primary-on-dark); transform: scale(1.2); }
.route__label { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); font-size: 12px; color: var(--body-muted); white-space: nowrap; transition: color 0.3s ease; }
.route__stop.is-done .route__label { color: var(--body-on-dark); }
.route__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border-radius: var(--r-pill);
  background: var(--canvas);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.55);
  font-size: 12.5px;
  color: var(--ink-80);
  white-space: nowrap;
}
.route__pin b { color: var(--ink); font-weight: 600; }
.route__pin--start { transform: translate(-24px, calc(-100% - 22px)); }
.route__pin--end { transform: translate(calc(-100% + 24px), calc(-100% - 22px)); }
.route__pin.is-happy { box-shadow: 0 0 0 3px var(--primary-on-dark), 0 14px 30px -12px rgba(0, 0, 0, 0.55); }
.route__truck {
  position: absolute;
  left: var(--x, 7%);
  top: var(--y, 69%);
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--canvas);
  color: var(--primary);
  font-size: 20px;
  box-shadow: 0 0 0 7px rgba(41, 151, 255, 0.22), 0 10px 24px -8px rgba(0, 0, 0, 0.6);
}
.route__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cchips { display: flex; flex-wrap: wrap; gap: 8px; }
.cchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  font-size: 13px;
  color: var(--body-muted);
}
.cchip .icon { font-size: 15px; }
.cchip.is-main { border-color: rgba(41, 151, 255, 0.5); background: rgba(41, 151, 255, 0.14); color: var(--body-on-dark); }
.cchip em { padding: 1px 7px; border-radius: var(--r-pill); background: var(--primary-on-dark); color: var(--black); font-size: 11px; font-style: normal; font-weight: 600; }
.hook { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.06); font-size: 13px; color: var(--body-muted); }
.hook b { display: inline-block; color: var(--body-on-dark); font-weight: 600; }
.hook__order { color: var(--primary-on-dark); }
.points--row { max-width: none; margin: 56px 0 0; }

/* ---- Inventory: living stock ------------------------------------------- */

.inv2__inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; align-items: center; }
.inv2__copy .lead { margin-left: 0; font-size: 21px; }
.inv2__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 32px; }
.inv2__kpis div { padding: 14px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--canvas); }
.inv2__kpis b { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.inv2__kpis small { font-size: 13px; color: var(--ink-48); }
.inv2__kpis .is-warn b { color: var(--st-amber); }
.inv2__kpis .is-bad b { color: var(--st-red); }

.inv2__stage { position: relative; padding: 28px 0 164px 28px; }
.inv2__stage::before { inset: 0 -40px 0 0; }
.pcard {
  position: relative;
  z-index: 1;
  width: min(540px, 100%);
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: var(--canvas);
  box-shadow: var(--shadow-product);
}
.pcard__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pcard__head > div { flex: 1; }
.pcard__head b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.374px; }
.pcard__head small { display: block; font-size: 13px; color: var(--ink-48); }
.pcard__photo { width: 60px; height: 72px; display: grid; place-items: center; border-radius: 12px; background: #2f3b5c; color: rgba(255, 255, 255, 0.85); font-size: 30px; }
.pcard__sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.size { padding: 12px; border: 1px solid var(--hairline); border-radius: 14px; transition: border-color 0.3s ease, background-color 0.3s ease; }
.size small { display: block; font-size: 12px; color: var(--ink-48); }
.size b { display: block; margin: 2px 0 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.size b em { font-size: 12px; font-style: normal; font-weight: 400; color: var(--ink-48); }
.size i { position: relative; display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--divider-soft); }
.size i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 3px; background: var(--ink); transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease; }
.size.is-low { border-color: rgba(138, 90, 0, 0.35); background: var(--st-amber-bg); animation: pulse-ring 1.8s infinite; }
.size.is-low small,
.size.is-low b { color: var(--st-amber); }
.size.is-low i::before { background: var(--st-amber); }
.size.is-up i::before { background: var(--st-green); }

.itoasts { position: absolute; z-index: 2; right: -12px; bottom: 0; width: min(340px, 82%); display: flex; flex-direction: column; gap: 8px; }
.itoast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 9px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 40px -14px rgba(29, 29, 31, 0.3);
  font-size: 13px;
  letter-spacing: -0.12px;
  color: var(--ink-80);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.itoast.is-shown { opacity: 1; transform: none; }
.itoast span { flex: 1; }
.itoast .itoast__pulse { flex: none; }
.itoast b { color: var(--ink); font-weight: 600; }
.itoast em { font-size: 14px; font-style: normal; font-weight: 700; }
.itoast em.up { color: var(--st-green); }
.itoast em.down { color: var(--st-red); }
.itoast--low { border-color: rgba(138, 90, 0, 0.25); background: var(--st-amber-bg); color: var(--st-amber); }
.itoast--low b { color: var(--st-amber); }
.itoast--ok { border-color: rgba(29, 122, 58, 0.25); background: var(--st-green-bg); color: var(--st-green); }
.itoast--ok b { color: var(--st-green); }
.itoast--ok .itoast__pulse { background: var(--st-green); animation: none; }
.itoast__pulse { flex: none; width: 10px; height: 10px; margin: 0 8px; border-radius: 50%; background: var(--st-amber); animation: pulse-ring 1.6s infinite; }

/* ---- Dashboard: bento --------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "rev rev heat heat"
    "lead attn kpis kpis"
    "lead pay kpis kpis";
  gap: 14px;
}
.bcell { position: relative; overflow: hidden; padding: 20px; border-radius: 22px; background: var(--canvas); color: var(--ink); }
.bcell > small { display: block; font-size: 13px; letter-spacing: -0.12px; color: var(--ink-48); }
.bcell--rev { grid-area: rev; display: flex; flex-direction: column; }
.bcell--heat { grid-area: heat; }
.bcell--lead { grid-area: lead; }
.bcell--attn { grid-area: attn; }
.bcell--pay { grid-area: pay; }
.bcell--kpis { grid-area: kpis; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; align-content: center; }
.bcell--kpis { grid-template-rows: auto 1fr 1fr; align-content: stretch; gap: 10px; }
.bcell--kpis .bcell__label { grid-column: 1 / -1; }
.bcell--kpis > div { display: flex; flex-direction: column; justify-content: center; padding: 14px 16px; border-radius: 14px; background: var(--parchment); }
.bcell--lead { display: flex; flex-direction: column; }
.bcell--lead .leader { flex: 1; align-content: space-evenly; }
.bcell__big { display: block; margin-top: 6px; font-family: var(--font-display); font-size: 44px; font-weight: 600; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.bcell__mid { display: block; margin: 4px 0 12px; font-size: 22px; font-weight: 600; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.bcell--rev .m-delta { font-size: 13px; }
.bcell--rev .spark { flex: 1 1 0; width: 100%; min-height: 120px; margin-top: 18px; }
.bcell--kpis small { display: block; font-size: 12px; color: var(--ink-48); }
.bcell--kpis b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.bento .attn,
.bento .share { font-size: 13px; }
.attn__pulse { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--st-amber); vertical-align: 1px; animation: pulse-ring 1.6s infinite; }

.leader { display: grid; gap: 4px; margin-top: 10px; }
.leader li { display: grid; grid-template-columns: 28px 56px minmax(0, 1fr) 32px; align-items: center; gap: 8px; padding: 7px 0; font-size: 13px; }
.leader b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.leader i { position: relative; height: 6px; overflow: hidden; border-radius: 3px; background: var(--divider-soft); }
.leader i::before,
.bento .share i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: var(--primary); transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
.bento.is-in .leader i::before,
.bento.is-in .share i::before { width: var(--p); }

/* The sparkline stretches to fill its card; strokes stay crisp with
   non-scaling-stroke, so the dash (and the draw animation) is in screen px. */
.bento .spark__line { stroke-width: 2.5; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.bento .spark__grid,
.bento .spark__base { vector-effect: non-scaling-stroke; }
.bento.is-in .spark__line { animation: draw 2.4s 0.2s cubic-bezier(0.5, 0, 0.2, 1) forwards; }
.bento .spark__dot { display: none; }
.bento .heat__c { transform: scale(0); transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1); transition-delay: calc(var(--i, 0) * 8ms); }
.bento.is-in .heat__c { transform: none; }

/* ---- Team: orbit -------------------------------------------------------- */

.team2__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.team2__copy .lead { margin-left: 0; font-size: 21px; }

.orbit { position: relative; width: min(520px, 100%); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.orbit__ring { position: absolute; border-radius: 50%; }
.orbit__ring--1 { inset: 10%; border: 1.5px dashed var(--av-tint-2); }
.orbit__ring--2 { inset: 30%; background: var(--av-bg); }
.orbit__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--canvas);
  transform: translate(-50%, -50%);
  box-shadow: 0 24px 50px -20px rgba(11, 74, 168, 0.4);
}
.orbit__hub img { width: 44%; height: auto; }
.orbit__spin { position: absolute; inset: 0; animation: orbit 60s linear infinite; }
.orbit__item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: rotate(var(--a)) translateX(40cqw) rotate(calc(-1 * var(--a)));
}
.orbit__inner {
  position: absolute;
  left: -38px;
  top: -38px;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform-origin: 38px 38px;
  animation: orbit-counter 60s linear infinite;
}
.orbit__item .av--xl { box-shadow: 0 0 0 4px var(--canvas), 0 14px 26px -12px rgba(11, 74, 168, 0.5); transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.3s ease; }
.orbit__item:hover .av--xl,
.orbit__item:focus-visible .av--xl { transform: scale(1.06); }
.orbit__item[aria-pressed="true"] .av--xl { transform: scale(1.1); box-shadow: 0 0 0 4px var(--canvas), 0 0 0 7px var(--primary), 0 14px 26px -12px rgba(11, 74, 168, 0.5); }
.orbit__name { font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; color: var(--ink); }
.orbit__name small { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-48); }
.orbit:hover .orbit__spin,
.orbit:hover .orbit__inner,
.orbit:focus-within .orbit__spin,
.orbit:focus-within .orbit__inner { animation-play-state: paused; }

.perm-card { margin-top: 28px; padding: 18px; border: 1px solid var(--hairline); border-radius: 20px; background: var(--canvas); }
.perm-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.perm-card__head b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.374px; }
.perm-card__head small { display: block; font-size: 13px; color: var(--ink-48); }
.perm-card__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.perm-card .perm { padding: 8px 10px; border-radius: 10px; background: var(--parchment); font-size: 13px; animation: pop-in 0.35s ease both; animation-delay: calc(var(--d, 0) * 40ms); }
.toggle,
.toggle::after { transition: background-color 0.3s ease, left 0.3s cubic-bezier(0.3, 1.4, 0.5, 1); }

.feed { margin-top: 14px; padding: 16px 18px; border-radius: 20px; background: var(--parchment); }
.feed__title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
.feed__list { display: flex; flex-direction: column; gap: 6px; height: 184px; overflow: hidden; }
.feed__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 6px 10px 6px 6px;
  border-radius: 12px;
  background: var(--canvas);
  font-size: 13px;
  letter-spacing: -0.12px;
  color: var(--ink-80);
  animation: pop-in 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
.feed__list li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed__list b { color: var(--ink); font-weight: 600; }
.feed__list time { font-size: 12px; color: var(--ink-48); }

/* ---- Features ----------------------------------------------------------- */

.card__tile {
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--st-blue-bg);
  color: var(--primary);
  font-size: 22px;
  transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), background-color 0.3s ease, color 0.3s ease;
}
.feat-grid .card { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease, box-shadow 0.35s ease, opacity 0.9s ease; }
.feat-grid .card:hover { transform: translateY(-4px); border-color: var(--av-tint-2); box-shadow: 0 22px 40px -24px rgba(11, 74, 168, 0.4); }
.feat-grid .card:hover .card__tile { transform: rotate(-8deg) scale(1.08); background: var(--primary); color: var(--body-on-dark); }
.js .feat-grid .reveal { transition-delay: calc(var(--d, 0) * 50ms); }

/* ---- CTA with the cast -------------------------------------------------- */

.cta2 { position: relative; overflow: hidden; padding-bottom: 0; text-align: center; }
.cta2__inner { position: relative; z-index: 1; }
.cast { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(0px, 1.6vw, 20px); margin-top: 56px; }
.cast::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -340px;
  width: 1100px;
  height: 560px;
  margin-left: -550px;
  border-radius: 50%;
  background: var(--av-bg);
}
.cast__person { position: relative; width: clamp(96px, 15vw, 180px); margin-bottom: -4px; }
.cast__person--lead { z-index: 1; width: clamp(120px, 19vw, 220px); }
.cast__av { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.cast__hand { position: absolute; right: -4%; top: 34%; width: 24%; height: auto; }
.cast__bubble {
  position: absolute;
  left: 58%;
  top: 2%;
  z-index: 2;
  padding: 9px 15px;
  border-radius: 18px 18px 18px 4px;
  background: var(--canvas);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.5);
  animation: float 5s ease-in-out infinite;
}

/* ---- "A day on PrimeOMS" companion -------------------------------------- */

.now {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 40;
  max-width: calc(100vw - 40px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 16px 40px -16px rgba(29, 29, 31, 0.35);
  font-size: 13px;
  letter-spacing: -0.12px;
  color: var(--ink-80);
  pointer-events: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.now.is-visible { opacity: 1; transform: none; }
.now__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.now__text time { font-size: 11px; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.now__text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now__text.is-swapping { animation: now-swap 0.5s ease; }
@keyframes now-swap {
  0% { opacity: 1; }
  40% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: none; }
}
.now__dial { position: relative; width: 30px; height: 30px; flex: none; border: 1.5px solid var(--hairline); border-radius: 50%; background: var(--av-bg); }
.now__dial i {
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 50%;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--primary);
  transform-origin: 50% 100%;
  transform: rotate(var(--deg, 0deg));
  transition: transform 0.8s cubic-bezier(0.3, 1.4, 0.5, 1);
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 1068px) {
  .hero2__inner { grid-template-columns: minmax(0, 1fr); gap: 80px; }
  .hero2__copy { max-width: 680px; margin: 0 auto; text-align: center; }
  .hero2__lead { margin-inline: auto; }
  .hero2__ctas { justify-content: center; }
  .hero2__ticks { justify-items: center; }
  .hero2__stage { width: 100%; max-width: 760px; margin: 0 auto; }

  .orders2__inner,
  .fraud2__inner,
  .inv2__inner,
  .team2__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .fraud2__copy { order: -1; }
  .board { width: 100%; }
  .sh--split { grid-template-columns: minmax(0, 1fr); }
  .sh--split .lead { justify-self: start; }

  .story__track { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
  .story__step::after { display: none; }

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "rev rev" "heat heat" "lead attn" "lead pay" "kpis kpis"; }
  .bcell--kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto 1fr; }
}

@media (max-width: 734px) {
  .hero2 { padding: 48px 0 80px; }
  .hero2__title { font-size: 40px; letter-spacing: -0.5px; }
  .hero2__lead { font-size: 19px; }
  .stage { --ry: 0deg !important; --rx: 0deg !important; }
  .stage__check { display: none; }
  .stage__bubble { left: 8px; top: -30px; }
  .toasts { right: 8px; top: auto; bottom: -30px; width: 230px; }
  .mini-app { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .m-orders--2 { grid-template-columns: minmax(0, 1fr); }
  .m-orders--2 .m-card:nth-child(2) { display: none; }

  .board { overflow-x: auto; }
  .board__cols { grid-template-columns: repeat(4, 160px); }

  .route { padding: 18px 12px 16px; }
  .route__label { font-size: 10px; }
  .route__pin span { display: none; }
  .route__pin { padding: 4px; }

  .inv2__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcard__sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv2__stage { padding: 20px 0 160px; }
  .inv2__stage::before { inset: 0 -16px; }
  .itoasts { right: 0; width: 100%; }
  .fscan::before { inset: 0 -16px -24px; }

  .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rev" "heat" "lead" "attn" "pay" "kpis"; }
  .bcell--kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bcell__big { font-size: 34px; }

  .orbit { width: min(400px, 100%); }
  .orbit .av--xl { width: 60px; height: 60px; }
  .orbit__inner { left: -30px; top: -30px; width: 60px; transform-origin: 30px 30px; }
  .perm-card__grid { grid-template-columns: minmax(0, 1fr); }

  .cast__person:first-child,
  .cast__person:last-child { display: none; }
  .cast::before { width: 640px; height: 320px; margin-left: -320px; bottom: -210px; }
  .cast__bubble { font-size: 13px; }

  .now { left: 50%; bottom: 12px; transform: translate(-50%, 16px); }
  .now.is-visible { transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .stage { transform: none !important; transition: none; }
  .hero2__accent { animation: none; background-size: 100% 12px; }
  .orbit__spin,
  .orbit__inner,
  .cast__bubble,
  .size.is-low,
  .itoast__pulse,
  .attn__pulse { animation: none !important; }
  .mp-cursor { display: none; }
  .bento .spark__line { stroke-dashoffset: 0; animation: none !important; }
  .bento .heat__c,
  .bento .leader i::before,
  .bento .share i::before { transition: none; }
}