/* The first slide of each module: the product itself in its own frame (call screen, diagram, phone, TV, laptop) on a
   glow in the module's colour, so scrolling reads as five different products. The video only plays on Watch. */
.mshow {
  --glow: rgba(124, 92, 255, 0.6);
  position: relative; flex: 1; min-width: 0; display: grid; place-items: center; padding: 36px 40px 84px; isolation: isolate;
}
/* The carousel strip clips anything outside the slide, so the glow and shadows fade out well inside it. */
.mshow::before { content: ""; position: absolute; inset: 4% 3% 10%; z-index: -1; background: radial-gradient(closest-side, var(--glow) 35%, transparent); }
.mshow--databridge { --glow: rgba(245, 158, 11, 0.42); }
.mshow--dash, .mshow--portal { padding-bottom: 100px; }
.mshow--campaigns { --glow: rgba(197, 42, 121, 0.34); }
.mshow--dash { --glow: rgba(10, 120, 148, 0.36); }
.mshow--portal { --glow: rgba(76, 63, 224, 0.34); }
.mshow[hidden], .mvid[hidden] { display: none; }
.mshow p, .mshow dl, .mshow dd, .mshow ul { margin: 0; }
.mshow ul { padding: 0; list-style: none; }
.sh-device { animation: sh-float 7s ease-in-out infinite; }
@keyframes sh-float { 50% { translate: 0 -6px; } }

.sh-watch {
  position: absolute; left: 50%; bottom: 20px; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 18px 0 8px; border: 0; border-radius: 999px; background: #fff; color: var(--ink);
  font: 600 15px var(--font-body); white-space: nowrap; cursor: pointer; box-shadow: 0 10px 22px -12px rgba(13, 11, 39, 0.5);
}
.sh-watch:hover { background: var(--primary-tint); }
.sh-watch:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sh-watch-i { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--watch, var(--calliope)); }
.sh-watch-i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--watch, var(--calliope)); animation: hv-ring 1.8s ease-out infinite; }
.sh-watch svg { width: 14px; height: 14px; margin-left: 2px; fill: #fff; }
.sh-watch-t { font-weight: 500; color: var(--ink-3); }
.mshow--databridge { --watch: var(--bridge-text); }
.mshow--campaigns { --watch: var(--campaigns-text); }
.mshow--dash { --watch: var(--dash-text); }
.mshow--portal { --watch: var(--primary); }

/* Voice AI: a live call */
.sh-call {
  width: min(540px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 26px;
  background: #1f1a4d; border: 1px solid rgba(255, 255, 255, 0.12); color: #f4f2ff; rotate: -1.5deg;
  box-shadow: 0 30px 56px -26px rgba(0, 0, 0, 0.55); font-size: 14px;
}
.sh-call-h { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--lit-3); }
.sh-call-h > span:nth-child(2) { flex: 1; min-width: 0; }
.sh-call-h b { display: block; font-size: 15.5px; color: #fff; }
.sh-call-h em { font-style: normal; font-weight: 600; color: #86efac; font-variant-numeric: tabular-nums; }
.sh-call-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--calliope); box-shadow: 0 0 0 8px rgba(124, 92, 255, 0.25); }
.sh-call-icon svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; }
.sh-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.sh-wave i { width: 4px; height: calc(var(--h) * 38px); border-radius: 2px; background: var(--a-call); animation: sh-wave 1.2s ease-in-out infinite alternate; animation-delay: calc(var(--h) * -1.2s); }
@keyframes sh-wave { to { transform: scaleY(0.35); } }
.sh-call .vc-line { font-size: 13px; }

/* DataBridge: the connection diagram, framed */
.sh-bridge .db-grid { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); }
.sh-bridge .db-src em { font-size: 11px; }
.sh-bridge { width: min(560px, 100%); flex: none; background: #1f1a4d; box-shadow: 0 30px 56px -26px rgba(0, 0, 0, 0.55); }

/* Campaign Builder: the campaign, with the customer's phone over it */
.sh-camp { position: relative; width: min(580px, 100%); height: 420px; }
.sh-camp-card {
  position: absolute; left: 0; top: 34px; width: 64%; display: flex; flex-direction: column; gap: 12px; padding: 20px;
  border-radius: 22px; background: #fff; border: 1px solid #f1dbe7; color: var(--ink); box-shadow: 0 30px 56px -26px rgba(197, 42, 121, 0.4);
}
.sh-camp-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sh-camp-h b { font-size: 17px; }
.sh-camp-h { padding-right: 22px; }
.sh-camp-h em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ok-text); }
.sh-mute { font-size: 13px; color: var(--ink-3); }
.sh-camp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sh-camp-stats div { padding: 10px; border-radius: 12px; background: var(--surface-3); }
.sh-camp-stats dt { font-size: 12px; color: var(--ink-3); }
.sh-camp-stats dd { font: 700 24px/1.2 var(--font-display); }
.sh-camp-stats .sh-hot { background: var(--campaigns-tint); }
.sh-camp-stats .sh-hot :is(dt, dd) { color: var(--campaigns-text); }
.sh-camp-steps { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.sh-camp-steps li { padding: 6px 10px; border-radius: 8px; background: var(--surface-4); }
.sh-camp-steps .sh-soon { background: none; border: 1px dashed #c9c4dc; }
.sh-phone {
  position: absolute; right: 0; top: 0; width: 220px; height: 420px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;
  padding: 26px 14px 16px; border: 12px solid var(--ink); border-radius: 38px; background: var(--surface-3); rotate: 3deg;
  box-shadow: 0 30px 56px -26px rgba(17, 19, 43, 0.5); animation-delay: -3.5s;
}
.sh-phone-h { text-align: center; font-size: 11px; color: var(--ink-3); }
.sh-sms { align-self: flex-start; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: #fff; color: var(--ink); font-size: 12.5px; line-height: 1.4; }
.sh-sms--me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--campaigns-text); color: #fff; }

/* The phone shows the link being used: the booking page, then the confirmation text. */
.sh-book { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #ebe8f5; font-size: 12px; color: var(--ink-2); }
.sh-book p { font-size: 10.5px; color: var(--ink-3); }
.sh-book b { font-size: 13px; color: var(--ink); }
.sh-slots { display: flex; gap: 4px; }
.sh-slots i { flex: 1; padding: 6px 2px; border: 1px solid #e3e1f5; border-radius: 8px; font-style: normal; font-size: 11px; text-align: center; }
.sh-slots .is-on { border-color: var(--campaigns-text); background: var(--campaigns-text); color: #fff; font-weight: 600; }
.sh-confirm { padding: 7px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 600; text-align: center; }

/* Dash: every system feeding one board, on the workshop TV */
.sh-sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px !important; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.sh-sources span { padding: 6px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #f3e2d4; }
.sh-sources span + span::before { content: "+"; margin: 0 8px 0 -14px; color: var(--dash-text); }
.sh-sources::after { content: "\2193"; width: 100%; text-align: center; color: var(--dash-text); font-size: 16px; line-height: 1; }
.sh-tv { display: flex; flex-direction: column; align-items: center; width: min(580px, 100%); }
.sh-tv-frame { width: 100%; flex: none; padding: 12px; border-radius: 20px; box-shadow: 0 30px 56px -26px rgba(80, 40, 20, 0.5); }
.sh-tv-frame .ds-chart { min-height: 110px; }
.sh-tv-hot { background: rgba(34, 211, 238, 0.12) !important; box-shadow: inset 0 0 0 1.5px #22d3ee; }
.sh-tv-stand { width: 120px; height: 30px; background: linear-gradient(#2a2a35, #15151d); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.sh-tv-stand::after { content: ""; }
.sh-tv::after { content: ""; width: 220px; height: 8px; border-radius: 4px; background: #15151d; opacity: 0.8; }

/* Portal: the home screen on a laptop */
.sh-laptop { display: flex; flex-direction: column; align-items: center; width: min(580px, 100%); }
.sh-laptop-lid { width: 88%; padding: 12px 12px 16px; border-radius: 18px 18px 6px 6px; background: #1c1d29; box-shadow: 0 30px 56px -26px rgba(76, 63, 224, 0.45); }
.sh-laptop-screen { border-radius: 8px; background: #fff; color: var(--ink); overflow: hidden; --line: #eceef4; }
.sh-laptop-base { width: 100%; height: 14px; border-radius: 0 0 16px 16px; background: linear-gradient(#d7d8e2, #a9abba); }
.sh-laptop .pt-body { padding: 16px; }

@media (prefers-reduced-motion: reduce) {
  .sh-device, .sh-wave i, .sh-watch-i::before { animation: none; }
}
@media (max-width: 599px) {
  .mshow { padding: 20px 14px 68px; }
  .sh-call { rotate: 0deg; }
  .sh-call { padding: 16px; }
  .sh-call .vc-line:nth-of-type(5) { display: none; }
  .sh-camp { height: auto; display: flex; justify-content: center; }
  .sh-camp-card { display: none; }
  .sh-phone { position: relative; rotate: 0deg; height: 380px; }
  .sh-tv-frame .ds-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-tv-frame .ds-chart { display: none; }
  .sh-laptop-lid { width: 94%; }
  .sh-laptop .pt-mods li { padding: 10px; }
}