/* ============================================================================
   ECOLAB · PEST INTELLIGENCE VISION (FOOD & BEVERAGE) · RND 01 STAGE
   ----------------------------------------------------------------------------
   The approved wireframe (_wires/RND01-FB-Pest-Intelligence-Vision.html) with
   the Ecolab house style applied: same frame, same screens, same components,
   same grid proportions. Only the type, colour, buttons, radii and elevation
   changed, from the Ecolab HTML Style Guide v1.0 (AA-corrected palette).

   Scoped under #pi-stage so the same stylesheet serves the review page and the
   iframe embed. Type is fixed px (never container or viewport units). The
   frame keeps the wireframe's fixed 16:9 size; screens scroll inside it only
   as a safety valve.
   ========================================================================== */

#pi-stage {
  /* ---- house tokens ------------------------------------------------------ */
  --science-blue: #006bd3;
  --navy: #093675;
  --blue-hover: #0a7bef;
  --ink-strong: #313233;
  --ink-body: #32373e;
  --meta: #6e7680;
  --band: #f4f6f8;
  --band-line: #dbe3ea;
  --boundary: #949494;
  --pill-tint: #e3f0fc;
  --surface-blue-tint: rgba(0, 107, 211, 0.1);
  --progress-track: rgba(0, 107, 211, 0.2);
  --sky: #80b5e9;
  --sky-soft: #bcd9ff;
  --mint: #4fc2b0; /* graphics, or fills under dark text */
  --deep: #1b232c;
  --caustic-red: #c4262e;
  --danger-border: #ef3a43; /* non-text only */
  --font-sans: "Roboto", system-ui, -apple-system, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;
  --font-stat: "Cartograph CF", "Roboto Mono", monospace;
  --ease-size: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-travel: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-state: 0.2s;
  --shadow-card: 0 12px 30px -14px rgba(0, 107, 211, 0.4);
  --shadow-chip: 0 8px 16px -8px rgba(0, 107, 211, 0.55);
  --shadow-over: 0 16px 40px -12px rgba(0, 0, 0, 0.45);

  /* the wireframe's frame: a fixed 16:9 stage, sized by the review slot or
     by the iframe */
  position: relative;
  width: 100%;
  height: var(--stage-h, 774px);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  container-type: size;
  container-name: stage;
  font-family: var(--font-sans);
  color: var(--ink-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}
#pi-stage *,
#pi-stage *::before,
#pi-stage *::after {
  box-sizing: border-box;
}
#pi-stage h1,
#pi-stage h2,
#pi-stage h3,
#pi-stage p,
#pi-stage ul,
#pi-stage ol,
#pi-stage figure {
  margin: 0;
}
#pi-stage ul,
#pi-stage ol {
  padding: 0;
  list-style: none;
}
#pi-stage button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
#pi-stage img,
#pi-stage video {
  display: block;
}
/* the rule above would otherwise override `hidden` (the spill cut-out in an
   area with no spill showed as a broken image) */
#pi-stage [hidden] {
  display: none !important;
}
#pi-stage :focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
#pi-stage .screen:focus,
#pi-stage .storycol:focus {
  outline: none;
}
#pi-stage .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================================
   THE FRAME: top bar, screen area, bottom bar
   ========================================================================== */

/* top bar: brand, progress, skip, the always-on consultation button */
#pi-stage .sbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  height: 60px;
  border-bottom: 1px solid var(--band-line);
  background: #fff;
  z-index: 5;
}
/* Ecolab's wordmark (Pest Intelligence, Powered by ECOLAB3D), then the
   segment after a hairline */
#pi-stage .sbrand {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 400 15px / 1 var(--font-sans);
  color: var(--meta);
  white-space: nowrap;
}
#pi-stage .sbrand img {
  width: auto;
  height: 36px;
}
#pi-stage .sbrand span {
  padding-left: 14px;
  border-left: 1px solid var(--band-line);
  line-height: 24px;
}
#pi-stage .sprog {
  flex: 1;
  display: flex;
  gap: 4px;
  align-items: center;
  min-width: 40px;
  max-width: 280px;
  margin: 0 auto;
}
#pi-stage .sprog i {
  flex: 1;
  height: 4px;
  background: var(--progress-track);
  transition: background 0.3s;
}
#pi-stage .sprog i.done {
  background: var(--navy);
}
#pi-stage .sprog i.now {
  background: var(--science-blue);
}
/* skip: the house chevron link */
#pi-stage .skip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 15px / 1 var(--font-sans);
  color: var(--science-blue);
  white-space: nowrap;
  padding: 8px 2px;
  transition: color var(--dur-state) ease;
}
#pi-stage .skip svg {
  width: 6px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-state) ease;
}
#pi-stage .skip:hover {
  color: var(--navy);
}
#pi-stage .skip:hover svg {
  transform: translateX(4px);
}
/* the consultation button: the house pill, compact for the bar */
#pi-stage .cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--science-blue);
  color: #fff;
  font: 500 16px / 1 var(--font-sans);
  white-space: nowrap;
  transition:
    transform 0.22s ease,
    background var(--dur-state) ease;
}
#pi-stage .cta:hover {
  transform: translateY(-2px);
  background: var(--blue-hover);
}

#pi-stage .screens {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
#pi-stage .screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 24px 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(14px);
  transition:
    opacity 0.3s ease,
    transform 0.34s var(--ease-travel),
    visibility 0s linear 0.34s;
  display: flex;
  flex-direction: column;
}
#pi-stage .screen.on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}
#pi-stage .screen.prev {
  transform: translateX(-14px);
}

/* bottom bar: Back, Next, where you are, the count */
#pi-stage .nbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  height: 72px;
  border-top: 1px solid var(--band-line);
  background: #fff;
}
/* one button shape: the 48px house pill */
#pi-stage .nbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--science-blue);
  color: #fff;
  font: 500 20px / 1 var(--font-sans);
  white-space: nowrap;
  transition:
    transform 0.22s ease,
    background var(--dur-state) ease,
    opacity var(--dur-state) ease;
}
#pi-stage .nbtn:hover:not(:disabled) {
  transform: translateY(-2px);
  background: var(--blue-hover);
}
#pi-stage .nbtn.ghost {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy);
}
#pi-stage .nbtn.ghost:hover:not(:disabled) {
  background: rgba(9, 54, 117, 0.06);
}
#pi-stage .nbtn:disabled {
  opacity: 0.3;
  cursor: default;
}
#pi-stage .nbtn .chev {
  width: 5px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the last screen is the consultation itself: nothing to skip to, nothing
   to schedule from the top bar */
#pi-stage[data-screen="end"] .skip,
#pi-stage[data-screen="end"] .cta {
  visibility: hidden;
}
#pi-stage .ncount {
  margin-left: auto;
  font: 500 12px / 1 var(--font-mono);
  letter-spacing: 1px;
  color: var(--meta);
  white-space: nowrap;
}

/* ============================================================================
   TYPE ROLES (house)
   ========================================================================== */

#pi-stage .s-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#pi-stage .s-eyeb {
  display: block;
  font: 700 12px / 1.2 var(--font-mono);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
}
/* screen heads: 700, Science Blue. Wrapped lines get 1.15 leading so they
   never print into each other. */
#pi-stage .s-h1 {
  font: 700 40px / 46px var(--font-sans);
  color: var(--science-blue);
  margin: 0 0 18px;
}
#pi-stage .s-h2 {
  font: 700 40px / 41px var(--font-sans);
  color: var(--science-blue);
  margin: 0 0 14px;
}
#pi-stage .s-h2 .ln {
  display: block;
}
/* dek: the house's light lead */
#pi-stage .s-dek {
  font: 300 22px / 28px var(--font-sans);
  color: var(--ink-body);
  max-width: 520px;
  margin: 0 0 16px;
}
#pi-stage .s-body {
  font: 400 16px / 24px var(--font-sans);
  letter-spacing: 0.4px;
  color: var(--ink-body);
  max-width: 620px;
  margin: 0 0 6px;
}
#pi-stage .s-body b {
  font-weight: 500;
  color: var(--ink-strong);
}
/* the house source line */
#pi-stage .s-fine {
  font: 400 11px / 1.45 var(--font-sans);
  letter-spacing: 0.6px;
  color: var(--ink-body);
  max-width: 640px;
  margin-top: 12px;
}
#pi-stage .s-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 6px;
}
#pi-stage .s-stat {
  border-top: 2px solid var(--ink-strong);
  padding-top: 10px;
  min-width: 0;
  flex: 1 1 0;
}
#pi-stage .s-stat .v {
  font: 700 40px / 1 var(--font-stat);
  color: var(--navy);
  letter-spacing: -0.5px;
}
#pi-stage .s-stat .v.blue {
  color: var(--science-blue);
}
#pi-stage .s-stat .k {
  font: 400 14px / 19px var(--font-sans);
  color: var(--ink-body);
  margin-top: 8px;
  max-width: 200px;
}

/* ============================================================================
   THE FACILITY: a cut-out floating on the page, no box
   ========================================================================== */

#pi-stage .facility {
  position: relative;
  width: min(100%, calc((100cqh - 190px) * 1.5));
  margin: 0 auto;
  aspect-ratio: 1536 / 1024;
  container-type: inline-size;
  container-name: fac;
}
#pi-stage .fac-in,
#pi-stage .fac-ov {
  position: absolute;
  inset: 0;
}
#pi-stage .fac-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.45s ease;
  user-select: none;
  -webkit-user-drag: none;
}
/* Pest Intelligence Vision: the same cut-out read as an x-ray; only the plant changes */
#pi-stage .fac-img.v {
  opacity: 0;
  filter: grayscale(1) invert(1) sepia(1) hue-rotate(185deg) saturate(2.6)
    brightness(0.78) contrast(1.15);
}
#pi-stage .facility.vision .fac-img.v {
  opacity: 1;
}
#pi-stage .facility.vision .fac-img:not(.v) {
  opacity: 0;
}
#pi-stage .visbadge {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 20px;
  padding: 0 8px;
  border-radius: 2px;
  background: var(--science-blue);
  color: #fff;
  font: 500 9.5px / 1 var(--font-mono);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s 0.2s;
  pointer-events: none;
}
#pi-stage .visbadge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}
#pi-stage .facility.vision .visbadge {
  opacity: 1;
}

/* hotspots */
#pi-stage .hs {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  z-index: 3;
  transition: opacity 0.35s;
}
#pi-stage .hs .ring {
  display: block;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--science-blue);
  /* two-tone ring: one of the two always clears 3:1, whatever is behind it */
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px var(--navy);
  transition:
    transform 0.2s,
    background 0.4s,
    box-shadow 0.4s;
}
/* the invitation to click */
#pi-stage .hs .ring::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px solid var(--science-blue);
  animation: pi-pulse 2.4s ease-out infinite;
}
@keyframes pi-pulse {
  0% {
    transform: scale(0.55);
    opacity: 0.9;
  }
  70%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
#pi-stage .hs:hover .ring,
#pi-stage .hs:focus-visible .ring {
  transform: scale(1.15);
}
#pi-stage .hs:focus-visible {
  outline-offset: 6px;
  border-radius: 50%;
}
#pi-stage .hs .lab {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 13px;
  white-space: nowrap;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px var(--science-blue),
    var(--shadow-card);
  border-radius: 8px;
  padding: 9px 12px;
  text-align: left;
  line-height: 1;
}
#pi-stage .hs .lab b {
  display: block;
  font: 500 14px / 1 var(--font-sans);
  color: var(--ink-strong);
}
#pi-stage .hs .lab small {
  display: block;
  margin-top: 6px;
  font: 500 10.5px / 1 var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--meta);
}
#pi-stage .hs.up .lab {
  top: auto;
  bottom: 100%;
  margin: 0 0 13px;
}
/* in Vision the three buttons give way to the marker at the chosen spot; the
   marker carries no text, the column names the hotspot */
#pi-stage .facility.vision .hs:not(.static) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#pi-stage .hs.static {
  cursor: default;
  opacity: 0;
  pointer-events: none;
}
#pi-stage .hs.static .ring::before,
#pi-stage .hs.static .lab {
  display: none;
}
#pi-stage .facility.vision .hs.static {
  opacity: 1;
}

/* signals: numbered dots always, their words on hover, focus, tap or legend */
#pi-stage .co {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  z-index: 3;
  opacity: 0;
  transition: opacity 0.4s 0.25s;
}
#pi-stage .facility.vision .co {
  opacity: 1;
}
/* on a close-up the numbered signals belong to Reveal and Outcome; at night,
   while the pattern is read, and while the specialist works, they step aside */
#pi-stage .facility.fly.at2 .co,
#pi-stage .facility.fly.at3 .co,
#pi-stage .facility.fly.at4 .co {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0s linear 0.3s;
}
#pi-stage .co .dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--science-blue);
  font: 700 11px / 1 var(--font-mono);
  box-shadow:
    0 0 0 2px var(--science-blue),
    0 0 12px 3px rgba(0, 107, 211, 0.45);
  transition:
    transform 0.15s,
    background 0.4s,
    box-shadow 0.4s,
    color 0.4s;
}
#pi-stage .co .dot svg {
  display: none;
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#pi-stage .co:hover .dot,
#pi-stage .co:focus-visible .dot,
#pi-stage .co.show .dot,
#pi-stage .co.hi .dot {
  transform: scale(1.2);
}
#pi-stage .co:focus-visible {
  outline: none;
}
#pi-stage .co .lab {
  position: absolute;
  left: 24px;
  top: -6px;
  white-space: nowrap;
  background: #fff;
  color: var(--ink-strong);
  font: 500 14px / 1.2 var(--font-sans);
  padding: 7px 10px;
  border-left: 3px solid var(--science-blue);
  border-radius: 0 4px 4px 0;
  box-shadow: var(--shadow-over);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.15s,
    visibility 0s 0.15s;
}
#pi-stage .co.l .lab {
  left: auto;
  right: 24px;
  border-left: 0;
  border-right: 3px solid var(--science-blue);
  border-radius: 4px 0 0 4px;
}
#pi-stage .co:hover .lab,
#pi-stage .co:focus-visible .lab,
#pi-stage .co.show .lab,
#pi-stage .co.hi .lab {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
/* Action: each signal becomes a target the specialist works through */
#pi-stage .facility.b4 .co .dot {
  box-shadow:
    0 0 0 2px var(--science-blue),
    0 0 0 5px #fff,
    0 0 0 7px var(--science-blue);
}
/* Outcome: dealt with */
#pi-stage .facility.b5 .co .dot {
  background: var(--mint);
  color: var(--deep);
  box-shadow: 0 0 0 2px #fff;
}
#pi-stage .facility.b5 .co .dot span {
  display: none;
}
#pi-stage .facility.b5 .co .dot svg {
  display: block;
}

/* ---- the threat, in render space --------------------------------------- */
#pi-stage .trails,
#pi-stage .route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
#pi-stage .trails {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s 0.2s;
}
#pi-stage .facility.vision .trails {
  opacity: 1;
}
#pi-stage .trails > g {
  transition: opacity 0.6s ease;
}
/* the trail marches, as in the wireframe */
#pi-stage .trail {
  fill: none;
  stroke: var(--danger-border);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20 14;
  opacity: 0.9;
  animation: pi-march 1.4s linear infinite;
  transition: opacity 0.5s;
}
@keyframes pi-march {
  to {
    stroke-dashoffset: -34;
  }
}
/* the activity itself, running the trail at room scale */
#pi-stage .blip {
  fill: var(--danger-border);
}
#pi-stage .blip.head {
  filter: drop-shadow(0 0 5px rgba(239, 58, 67, 0.95));
}
#pi-stage .blips-g,
#pi-stage .pings-g,
#pi-stage .heat-g,
#pi-stage .links-g {
  opacity: 0;
}
#pi-stage .facility.b1 .blips-g {
  opacity: 1;
}
/* Detection: pings land where the monitoring registered activity */
#pi-stage .ping {
  fill: var(--danger-border);
  stroke: #fff;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}
#pi-stage .ping-halo {
  fill: rgba(239, 58, 67, 0.22);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}
#pi-stage .facility.at2 .pings-g {
  opacity: 1;
}
#pi-stage .facility.at2 .ping,
#pi-stage .facility.at2 .ping-halo {
  transform: scale(1);
  transition: transform 0.44s var(--ease-overshoot) var(--d, 0s);
}
/* Intelligence: one heat zone over the corner, the signals linked to it */
#pi-stage .heat {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.55);
  transition: transform 1s var(--ease-size);
}
#pi-stage .facility.b3 .heat-g {
  opacity: 1;
}
#pi-stage .facility.b3 .heat {
  transform: scale(1);
}
#pi-stage .link {
  fill: none;
  stroke: var(--sky-soft);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
#pi-stage .facility.b3 .links-g {
  opacity: 1;
}
#pi-stage .facility.b3 .link {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.8s var(--ease-travel) var(--d, 0s);
}
#pi-stage .facility.b4 .links-g {
  opacity: 0.55;
}
/* Outcome: the corner goes quiet */
#pi-stage .facility.b5 .trail {
  opacity: 0.25;
  animation: none;
}
#pi-stage .facility.b5 .blips-g,
#pi-stage .facility.b5 .links-g {
  opacity: 0;
}
#pi-stage .facility.b5 .heat-g {
  opacity: 0;
  transition: opacity 1.4s ease;
}

/* ---- the marker's beat chips (wireframe), house styled ----------------- */
#pi-stage .hs .mon,
#pi-stage .hs .prio,
#pi-stage .hs .spec,
#pi-stage .hs .res {
  position: absolute;
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
#pi-stage .hs .mon {
  inset: -22px;
  border-radius: 50%;
  border: 2px solid var(--science-blue);
}
#pi-stage .hs .mon::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px solid rgba(0, 107, 211, 0.4);
}
#pi-stage .facility.b2 .hs .mon {
  opacity: 1;
}
/* Detection: the monitoring ring pulses while this beat is showing */
#pi-stage .facility.at2 .hs .mon::before {
  animation: pi-ring 2.2s ease-out infinite;
}
@keyframes pi-ring {
  0% {
    transform: scale(0.8);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}
#pi-stage .hs .prio,
#pi-stage .hs .res {
  left: 50%;
  bottom: 100%;
  margin-bottom: 38px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 2px;
  font: 500 9.5px / 1 var(--font-mono);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
#pi-stage .hs .prio {
  background: var(--science-blue);
  color: #fff;
}
#pi-stage .facility.b3 .hs .prio {
  opacity: 1;
}
#pi-stage .hs .spec {
  right: 100%;
  top: 50%;
  margin-right: 36px;
  transform: translateY(-50%);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--ink-strong);
  font: 500 13px / 1 var(--font-sans);
  padding: 7px 12px 7px 7px;
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px var(--band-line),
    var(--shadow-card);
}
#pi-stage .hs .spec i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--science-blue);
  flex: 0 0 auto;
}
#pi-stage .hs.specr .spec {
  right: auto;
  left: 100%;
  margin-right: 0;
  margin-left: 36px;
}
#pi-stage .facility.b4 .hs .spec {
  opacity: 1;
}
/* on a close-up the specialist has gone by the Outcome, so his label goes too */
#pi-stage .facility.fly.b5 .hs .spec {
  opacity: 0;
}
/* resolved: mint fill under dark text (7.3:1), mint alone would fail white */
#pi-stage .hs .res {
  background: var(--mint);
  color: var(--deep);
}
#pi-stage .facility.b5 .hs .prio {
  opacity: 0;
}
#pi-stage .facility.b5 .hs .res {
  opacity: 1;
}
#pi-stage .facility.b5 .hs.static .ring {
  background: var(--mint);
}
#pi-stage .facility.b5 .hs .mon {
  opacity: 0;
}

/* ---- the route (wireframe) and the specialist travelling it ------------- */
#pi-stage .route {
  opacity: 0;
  transition: opacity 0.35s;
  z-index: 1;
}
#pi-stage .route path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#pi-stage .route .under {
  stroke: #fff;
  stroke-width: 12;
}
#pi-stage .route .over {
  stroke: var(--science-blue);
  stroke-width: 5;
  stroke-dasharray: 14 12;
}
#pi-stage .route .start {
  fill: #fff;
  stroke: var(--science-blue);
  stroke-width: 4;
}
#pi-stage .spec-dot circle {
  fill: var(--science-blue);
  stroke: #fff;
  stroke-width: 5;
}
#pi-stage .facility.b4 .route {
  opacity: 1;
}
#pi-stage .facility.b5 .route {
  opacity: 0.35;
}

/* ---- the circle: what is really happening in that corner ---------------- */
#pi-stage .inset {
  position: absolute;
  left: 14%;
  top: 82%;
  width: clamp(120px, 22cqw, 188px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.82);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.34s ease,
    transform 0.5s var(--ease-overshoot),
    visibility 0s linear 0.5s;
  z-index: 6;
  pointer-events: none;
}
#pi-stage .facility.b1 .inset {
  opacity: 1;
  visibility: inherit;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity 0.4s ease 0.5s,
    transform 0.55s var(--ease-overshoot) 0.5s,
    visibility 0s linear 0s;
}
#pi-stage .inset-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--deep);
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 6px var(--navy),
    var(--shadow-over);
}
#pi-stage .inset .m {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#pi-stage .inset[data-show="threat"] .m-threat,
#pi-stage .inset[data-show="spec"] .m-spec,
#pi-stage .inset[data-show="clear"] .m-clear {
  opacity: 1;
}
#pi-stage .inset.has-clip[data-show="threat"] .m-threat-still {
  opacity: 0;
}
#pi-stage .inset:not(.has-clip) .m-threat-clip {
  display: none;
}
/* the house tag, straddling the rim */
#pi-stage .inset-tag {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 2px;
  font: 500 9.5px / 1 var(--font-mono);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: var(--caustic-red);
  box-shadow: 0 0 0 3px #fff;
  transition: background 0.3s ease;
}
#pi-stage .inset-tag.blue {
  background: var(--science-blue);
}
#pi-stage .inset-tag.navy {
  background: var(--navy);
}

/* the pause control (2.2.2) */
#pi-stage .motion {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--navy);
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--navy);
  z-index: 7;
  transition:
    background var(--dur-state) ease,
    transform var(--dur-state) ease;
}
#pi-stage .motion:hover {
  background: rgba(9, 54, 117, 0.06);
  transform: translateY(-2px);
}
#pi-stage .motion svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
#pi-stage .motion .i-play {
  display: none;
}
#pi-stage.still .motion .i-play {
  display: block;
}
#pi-stage.still .motion .i-pause {
  display: none;
}
#pi-stage.still .hs .ring::before,
#pi-stage.still .hs .mon::before,
#pi-stage.still .trail {
  animation-play-state: paused;
}

/* ============================================================================
   SCREEN 1 · ENTRY: choose a risk, then the story in the same frame
   ========================================================================== */

#pi-stage .entry-grid {
  display: grid;
  grid-template-columns: minmax(270px, 0.9fr) minmax(0, 1.3fr);
  gap: 36px;
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
}
#pi-stage .storycol {
  display: none;
}
#pi-stage .screen.storymode .intro {
  display: none;
}
#pi-stage .screen.storymode .storycol {
  display: block;
}
#pi-stage .hotlist {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
/* topic-tile treatment: a selection within the page */
#pi-stage .hot {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  text-align: left;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--band);
  box-shadow: inset 0 0 0 1px var(--band-line);
  transition:
    transform var(--dur-state) ease,
    box-shadow var(--dur-state) ease,
    background var(--dur-state) ease;
}
#pi-stage .hot:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow:
    inset 0 0 0 3px var(--science-blue),
    var(--shadow-card);
}
#pi-stage .hot .ring {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--science-blue);
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px var(--navy);
  margin-left: 2px;
}
#pi-stage .hot b {
  display: block;
  font: 500 17px / 1.2 var(--font-sans);
  color: var(--ink-strong);
}
#pi-stage .hot small {
  display: block;
  margin-top: 5px;
  font: 500 11px / 1.2 var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--meta);
}
#pi-stage .hot .go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 15px / 1 var(--font-sans);
  color: var(--science-blue);
}
#pi-stage .hot .go svg {
  width: 6px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the beat rail: the three steps by name, click any. Square, so the bar
   under the current step is a clean rectangle */
#pi-stage .rail {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
}
#pi-stage .rail i {
  flex: 1 1 0;
  min-width: max-content;
  display: flex;
  align-items: center;
  padding: 0 6px;
  height: 28px;
  position: relative;
  cursor: pointer;
  background: var(--band);
  box-shadow: inset 0 -3px 0 transparent;
  font-style: normal;
  transition:
    background 0.25s,
    box-shadow 0.25s;
}
#pi-stage .rail i span {
  font: 500 9.5px / 1 var(--font-mono);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--meta);
  pointer-events: none;
  white-space: nowrap;
}
#pi-stage .rail i.done {
  background: var(--pill-tint);
}
#pi-stage .rail i.done span {
  color: var(--navy);
}
#pi-stage .rail i.now {
  background: var(--surface-blue-tint);
  box-shadow: inset 0 -3px 0 var(--science-blue);
}
#pi-stage .rail i.now span {
  color: var(--science-blue);
}
#pi-stage .rail i:hover {
  background: var(--surface-blue-tint);
}

/* the beats: all five listed, the current one open */
#pi-stage .tl {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#pi-stage .beat {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  padding: 11px 14px;
  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
  transition: background 0.3s;
}
#pi-stage .beat.now {
  background: var(--surface-blue-tint);
  border-left-color: var(--science-blue);
}
#pi-stage .beat.todo .bh,
#pi-stage .beat.todo .bp,
#pi-stage .beat.todo .legend,
#pi-stage .beat.done .bp,
#pi-stage .beat.done .legend {
  display: none;
}
#pi-stage .bn {
  font: 700 12px / 1 var(--font-mono);
  color: var(--science-blue);
  padding-top: 2px;
}
#pi-stage .beat.todo .bn {
  color: var(--meta);
}
#pi-stage .bk {
  display: block;
  margin-bottom: 6px;
  font: 500 11px / 1 var(--font-mono);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--meta);
}
#pi-stage .beat.done .bk {
  margin-bottom: 4px;
}
#pi-stage .bh {
  font: 700 24px / 28px var(--font-sans);
  color: var(--science-blue);
  margin: 0 0 8px;
}
#pi-stage .beat.done .bh {
  font: 500 15px / 20px var(--font-sans);
  color: var(--ink-body);
  margin: 0;
}
#pi-stage .bp {
  font: 400 16px / 24px var(--font-sans);
  color: var(--ink-body);
  max-width: 460px;
}
/* the revealed signals, named here instead of on the plant */
#pi-stage .legend {
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#pi-stage .legend li {
  display: flex;
  gap: 10px;
  align-items: center;
  font: 400 15px / 20px var(--font-sans);
  color: var(--ink-body);
  cursor: default;
}
#pi-stage .legend li:hover {
  color: var(--ink-strong);
}
#pi-stage .legend i {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--science-blue);
  font: 700 11px / 1 var(--font-mono);
  font-style: normal;
  color: var(--science-blue);
}

/* ============================================================================
   SCREEN 2 · WHAT IT MEANS
   ========================================================================== */

#pi-stage .impact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.95fr);
  gap: 40px;
  align-items: start;
}
#pi-stage .outs {
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#pi-stage .outs li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font: 400 18px / 25px var(--font-sans);
  color: var(--ink-strong);
  max-width: 520px;
}
#pi-stage .chk {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--science-blue);
  display: grid;
  place-items: center;
  margin-top: 2px;
}
#pi-stage .chk svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#pi-stage .proof {
  margin-top: 26px;
  border-top: 1px solid var(--band-line);
  padding-top: 18px;
}
/* the service finding in the look of an ECOLAB3D insight (Ecolab's Main
   Message & E3D deck, slide 9): E3D's blue panel bar, its Insight and
   priority chips, the finding as the title of an inset summary card, the
   "Actions to Take" tab as a static section head, and a stat tile for the
   predictive outcome. Colours sampled from E3D; text pairs pass AA. */
#pi-stage .card {
  --e3d-bar: #0051a2;
  --e3d-line: #dfe6ee;
  --e3d-tile: #eff3f6;
  --e3d-prio: #fdecea;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px var(--band-line),
    var(--shadow-card);
}
#pi-stage .card .spark {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: currentColor;
}
#pi-stage .card-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 14px 20px;
  background: var(--e3d-bar);
  color: #fff;
}
#pi-stage .card-h b {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 17px / 1 var(--font-sans);
  white-space: nowrap;
}
#pi-stage .card-h .s-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 2px;
  font: 500 10.5px / 1 var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
#pi-stage .card-b {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}
#pi-stage .card-sum {
  padding: 14px 16px 16px;
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px var(--e3d-line),
    0 2px 6px -2px rgba(9, 54, 117, 0.14);
}
#pi-stage .card-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
#pi-stage .card .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  font: 500 12.5px / 1 var(--font-sans);
}
#pi-stage .card .chip .spark {
  width: 11px;
  height: 11px;
}
#pi-stage .card .chip.insight {
  color: var(--e3d-bar);
  box-shadow: inset 0 0 0 1px var(--e3d-line);
}
#pi-stage .card .chip.prio {
  color: var(--caustic-red);
  background: var(--e3d-prio);
}
#pi-stage .card-t {
  font: 700 17px / 23px var(--font-sans);
  color: var(--ink-strong);
}
#pi-stage .card-d {
  margin-top: 6px;
  font: 400 15px / 21px var(--font-sans);
  color: var(--ink-body);
}
#pi-stage .card-d b {
  font-weight: 500;
  color: var(--ink-strong);
  margin-right: 2px;
}
#pi-stage .card-tabs {
  border-bottom: 1px solid var(--e3d-line);
  margin-bottom: 10px;
}
#pi-stage .card-tabs span {
  display: inline-block;
  padding: 0 2px 8px;
  margin-bottom: -1px;
  border-bottom: 2px solid var(--science-blue);
  font: 500 14px / 18px var(--font-sans);
  color: var(--ink-strong);
}
#pi-stage .card-sec p {
  font: 400 16px / 22px var(--font-sans);
  color: var(--ink-strong);
}
#pi-stage .card-tile {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--e3d-tile);
}
#pi-stage .card-tile .k {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font: 500 13px / 18px var(--font-sans);
  color: var(--navy);
}
#pi-stage .card-tile p {
  font: 400 15px / 21px var(--font-sans);
  color: var(--ink-strong);
}
#pi-stage .card-f {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-top: 1px solid var(--band-line);
  background: var(--band);
  font: 400 13px / 18px var(--font-sans);
  color: var(--ink-body);
}
#pi-stage .card-f i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--science-blue);
}

/* ============================================================================
   SCREEN 3 · TALK TO US
   ========================================================================== */

#pi-stage .end-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
  gap: 40px;
  align-items: start;
}
#pi-stage .others-lead {
  margin-top: 22px;
}
#pi-stage .others {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
/* house chips: 40px, the Figma radius that keeps a chip from reading as a pill */
#pi-stage .others .s-pill {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 11.378px;
  background: var(--pill-tint);
  color: var(--navy);
  font: 500 15px / 1 var(--font-sans);
  transition:
    transform var(--dur-state) ease,
    box-shadow var(--dur-state) ease,
    background var(--dur-state) ease,
    color var(--dur-state) ease;
}
#pi-stage .others .s-pill:hover {
  transform: translateY(-2px);
  background: var(--science-blue);
  color: #fff;
  box-shadow: var(--shadow-chip);
}
#pi-stage .form {
  position: relative;
  isolation: isolate;
  border-radius: 10px;
  padding: 22px 24px 24px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--band-line);
  transition: box-shadow 0.35s ease;
}
/* the panel's running glow, from the Basic Apps site's feature cards: a
   conic ring masked to the edge, spun by an animated angle and breathing.
   Here in Ecolab blue and mint (the site runs blue, teal, purple), and it
   never fades right out, so the light keeps running round the one panel.
   On a white page a line alone does not glow, so a blurred copy of the same
   ring sits under it (blurred on its own element, since a mask cuts off a
   blur on the same element). */
@property --pi-glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
#pi-stage .form::after,
#pi-stage .form-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from var(--pi-glow-angle, 0deg),
    rgba(0, 107, 211, 0) 0deg,
    rgba(0, 107, 211, 0.95) 90deg,
    rgba(79, 194, 176, 0.95) 180deg,
    rgba(94, 176, 255, 0.95) 270deg,
    rgba(0, 107, 211, 0) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation:
    pi-glow-spin 6s linear infinite,
    pi-glow-pulse 9s ease-in-out infinite;
  pointer-events: none;
}
#pi-stage .form::after {
  padding: 2px;
  z-index: 1;
}
#pi-stage .form-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
}
#pi-stage .form-glow::before {
  padding: 4px;
}
@keyframes pi-glow-spin {
  to {
    --pi-glow-angle: 360deg;
  }
}
@keyframes pi-glow-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  35%,
  60% {
    opacity: 0.9;
  }
}
#pi-stage.still .form::after,
#pi-stage.still .form-glow::before {
  animation-play-state: paused;
}
/* the mouse reaches the corner and the panel flares */
#pi-stage .form.flare {
  box-shadow:
    inset 0 0 0 1px var(--band-line),
    0 0 0 2px var(--science-blue),
    0 0 26px 4px rgba(0, 107, 211, 0.35);
}
/* page 4's mouse: Seedance on white, flattened so the white is exactly
   white, then multiplied onto the page, so it has no box */
#pi-stage .end-mouse {
  position: absolute;
  left: 0;
  top: 0;
  /* sized and placed by the script when it runs */
  width: 0;
  height: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0;
  visibility: hidden;
}
#pi-stage .end-mouse.run {
  opacity: 1;
  visibility: visible;
}
/* page 4's own pause, where the close-up's sits */
#pi-stage .screen[data-id="end"] .motion {
  right: auto;
  left: 40px;
  bottom: 16px;
}
#pi-stage .form h3 {
  font: 700 22px / 27px var(--font-sans);
  color: var(--navy);
  margin: 0 0 6px;
}
#pi-stage .form .s-body {
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0;
  margin-bottom: 4px;
}
#pi-stage .frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
  margin-top: 14px;
}
#pi-stage .form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font: 500 11.5px / 1.2 var(--font-mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-strong);
}
#pi-stage .form input,
#pi-stage .form select,
#pi-stage .form textarea {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--boundary);
  border-radius: 4px;
  background: #fff;
  color: var(--ink-strong);
  font: 400 16px / 1.3 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  transition:
    border-color var(--dur-state) ease,
    box-shadow var(--dur-state) ease;
}
#pi-stage .form textarea {
  height: auto;
  min-height: 64px;
  padding: 10px 12px;
  resize: vertical;
}
#pi-stage .form input:focus-visible,
#pi-stage .form select:focus-visible,
#pi-stage .form textarea:focus-visible {
  outline: none;
  border-color: var(--science-blue);
  box-shadow: 0 0 0 3px rgba(0, 107, 211, 0.28);
}
#pi-stage .form .full {
  grid-column: 1 / -1;
}
#pi-stage .fsub {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}
#pi-stage .fsub .s-fine {
  margin: 0;
  flex: 1 1 180px;
}
#pi-stage .sent-msg {
  display: none;
  margin-top: 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--mint);
  background: rgba(79, 194, 176, 0.14);
  font: 400 16px / 22px var(--font-sans);
  color: var(--ink-strong);
}
#pi-stage .sent-msg b {
  font-weight: 700;
}
#pi-stage .sent-msg .preview {
  display: block;
  margin-top: 6px;
  font: 400 11px / 1.45 var(--font-sans);
  letter-spacing: 0.6px;
  color: var(--ink-body);
}
#pi-stage .form.sent .sent-msg {
  display: block;
}
#pi-stage .form.sent .frow,
#pi-stage .form.sent .fsub {
  display: none;
}

/* ============================================================================
   RND 01B · THE FLIGHT
   A hotspot with footage flies the camera into its corner (frames drawn on a
   canvas, cropped like object-fit: cover) and the corner fills the screen
   between the bars. The story rides on it as a card; the areas stay one
   click away.
   ========================================================================== */
#pi-stage .fly-cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform-origin: 0 0;
  pointer-events: none;
  transition: filter 0.7s ease;
}
/* holds the plant's place in the grid while the facility takes the screen */
#pi-stage .fac-slot {
  width: min(100%, calc((100cqh - 190px) * 1.5));
  margin: 0 auto;
  aspect-ratio: 1536 / 1024;
  visibility: hidden;
}
#pi-stage .facility.fly {
  position: absolute;
  inset: 0;
  width: auto;
  margin: 0;
  aspect-ratio: auto;
  z-index: 2;
  /* a cut-out reaching past the cropped edge of the frame (the exterior
     specialist's reflection) must not make the screen scroll */
  overflow: hidden;
  overflow: clip;
}
#pi-stage .facility.fly .fly-cv {
  opacity: 1;
  visibility: visible;
}
#pi-stage .facility.fly .fac-img,
#pi-stage .facility.fly.vision .fac-img.v,
#pi-stage .facility.snap .fac-img {
  transition: none;
}
#pi-stage .facility.fly .fac-img,
#pi-stage .facility.fly.vision .fac-img.v {
  opacity: 0;
}
/* Pest Intelligence Vision on the close-up is a camera's view, not a filter:
   corners frame the picture, the edges darken a touch, the badge goes live */
#pi-stage .vf {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease,
    visibility 0s linear 0.4s;
}
#pi-stage .facility.fly.vision .vf {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
#pi-stage .vf::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 140px 10px rgba(9, 30, 60, 0.42);
}
#pi-stage .vf i {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 0 solid rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.55));
  transform: scale(1.35);
  opacity: 0;
  transition:
    transform 0.55s var(--ease-travel) 0.1s,
    opacity 0.3s ease 0.1s;
}
#pi-stage .facility.fly.vision .vf i {
  transform: none;
  opacity: 1;
}
#pi-stage .vf i:nth-child(1) {
  left: 14px;
  top: 14px;
  border-left-width: 3px;
  border-top-width: 3px;
  transform-origin: 0 0;
}
#pi-stage .vf i:nth-child(2) {
  right: 14px;
  top: 14px;
  border-right-width: 3px;
  border-top-width: 3px;
  transform-origin: 100% 0;
}
#pi-stage .vf i:nth-child(3) {
  left: 14px;
  bottom: 14px;
  border-left-width: 3px;
  border-bottom-width: 3px;
  transform-origin: 0 100%;
}
#pi-stage .vf i:nth-child(4) {
  right: 14px;
  bottom: 14px;
  border-right-width: 3px;
  border-bottom-width: 3px;
  transform-origin: 100% 100%;
}
/* the badge goes live: its light blinks while the view is on */
#pi-stage .facility.fly.vision .visbadge::before {
  background: #ff5a5f;
  box-shadow: 0 0 6px 1px rgba(255, 90, 95, 0.9);
  animation: pi-blink 1.2s ease-in-out infinite;
}
@keyframes pi-blink {
  50% {
    opacity: 0.2;
  }
}
#pi-stage.still .visbadge::before {
  animation-play-state: paused;
}
#pi-stage .visbadge .vm {
  display: none;
}
#pi-stage .facility.fly.at2 .visbadge .vm {
  display: inline;
}
/* Detection: the same view at night, the mice running */
#pi-stage .fly-night,
#pi-stage .fly-patch {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s ease,
    visibility 0s linear 0.6s;
}
/* the mouse and the specialist stand in front of what is drawn on the floor */
#pi-stage .fly-patch {
  z-index: 2;
}
#pi-stage .fly-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.9s ease,
    visibility 0s linear 0.9s;
}
#pi-stage .facility.fly.b5 .fly-after[src] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
#pi-stage .fly-night {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
#pi-stage .facility.fly.at2 .fly-night,
#pi-stage .facility.fly.at1 #flyMouse,
#pi-stage .facility.fly.at4 #flySpec {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
/* a spill is there from Reveal until the Outcome clears it; at night the
   footage carries it */
#pi-stage .facility.fly.b1 #flySpill {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.2s;
}
#pi-stage .facility.fly.at2 #flySpill,
#pi-stage .facility.fly.b5 #flySpill {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s ease,
    visibility 0s linear 0.6s;
}
/* the mouse shows up just after the view comes on; the specialist after the route */
#pi-stage .facility.fly.at1 #flyMouse {
  transition-delay: 0.45s;
}
#pi-stage .facility.fly.at4 #flySpec {
  transition-delay: 0.9s;
}
#pi-stage .facility.fly .inset,
#pi-stage .facility.fly .spec-dot,
#pi-stage .facility.fly .hs .prio {
  display: none;
}
#pi-stage .facility.fly.at2 .blips-g {
  opacity: 0;
}
/* On a close-up the trail lies on the floor: a worn runway and paw prints in
   the floor's perspective, brightening in order from the door to the pallets,
   as the activity. The flat line and its comets are for the plant view. */
#pi-stage .facility.fly .trail,
#pi-stage .facility.fly .blips-g {
  visibility: hidden;
}
#pi-stage .tracks-g {
  opacity: 0;
  transition: opacity 0.6s ease;
}
#pi-stage .facility.fly.b1 .tracks-g {
  opacity: 1;
}
#pi-stage .runway {
  fill: var(--danger-border);
  opacity: 0.22;
}
#pi-stage .print {
  fill: var(--danger-border);
  opacity: 0.55;
  animation: pi-step 4.2s linear var(--d, 0s) infinite both;
}
@keyframes pi-step {
  0% {
    opacity: 0.55;
  }
  3% {
    opacity: 1;
  }
  40%,
  100% {
    opacity: 0.55;
  }
}
/* at night the mice run it themselves, over faint tracks */
#pi-stage .facility.fly.at2 .print {
  animation: none;
  opacity: 0.3;
}
#pi-stage.still .print {
  animation-play-state: paused;
}
/* Reveal: droppings land along the trail */
#pi-stage .pellet {
  fill: #2a1c12;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}
#pi-stage .facility.fly.b1 .pellet {
  opacity: 1;
  transform: scale(1);
  transition:
    transform 0.35s var(--ease-overshoot) var(--d, 0s),
    opacity 0.2s ease var(--d, 0s);
}
#pi-stage .facility.fly.at2 .pellet,
#pi-stage .facility.fly.b5 .pellet {
  opacity: 0;
  transition: opacity 0.6s ease;
}
/* Intelligence on the close-up: the trail and its activity step aside; the
   pattern shows as heat on the floor and one zone locks on. The zone then
   carries the story: blue while the specialist works it, mint when resolved.
   No lines are drawn to it. */
#pi-stage .facility.fly .heat-g,
#pi-stage .facility.fly .links-g,
#pi-stage .facility.fly .route {
  display: none;
}
#pi-stage .facility.fly.b3 .trail,
#pi-stage .facility.fly.b3 .blips-g,
#pi-stage .facility.fly.b3 .tracks-g,
#pi-stage .facility.fly.b3 .pellets-g {
  opacity: 0;
  animation: none;
  transition: opacity 0.5s ease;
}
#pi-stage .heatmap-g,
#pi-stage .zone {
  opacity: 0;
  transition: opacity 0.6s ease;
}
#pi-stage .facility.fly.at3 .heatmap-g,
#pi-stage .facility.fly.b3 .zone {
  opacity: 1;
}
#pi-stage .hm {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.35);
}
#pi-stage .facility.fly.at3 .hm {
  opacity: var(--o, 0.6);
  transform: none;
  transition:
    opacity 0.8s ease var(--d, 0s),
    transform 1.1s var(--ease-size) var(--d, 0s);
}
#pi-stage .zfill {
  fill: rgba(239, 58, 67, 0.3);
  fill-opacity: 0.5;
  transition: fill 0.6s ease;
}
#pi-stage .zline {
  fill: none;
  stroke: var(--danger-border);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke 0.6s ease;
}
#pi-stage .facility.fly.b3 .zline {
  stroke-dashoffset: 0;
  transition:
    stroke-dashoffset 1s var(--ease-travel) 0.6s,
    stroke 0.6s ease;
}
#pi-stage .ztick {
  fill: none;
  stroke: var(--danger-border);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    stroke 0.6s ease;
}
#pi-stage .facility.fly.b3 .ztick {
  opacity: 1;
  transition-delay: 1.3s, 0s;
}
#pi-stage .facility.fly.at3 .zfill,
#pi-stage .facility.fly.at4 .zfill {
  animation: pi-zone 2.4s ease-in-out infinite;
}
@keyframes pi-zone {
  50% {
    fill-opacity: 1;
  }
}
#pi-stage.still .zfill {
  animation-play-state: paused;
}
/* Action: the specialist works the zone */
#pi-stage .facility.fly.at4 .zfill {
  fill: rgba(0, 107, 211, 0.3);
}
#pi-stage .facility.fly.at4 .zline,
#pi-stage .facility.fly.at4 .ztick {
  stroke: var(--science-blue);
}
/* Outcome: resolved */
#pi-stage .facility.fly.b5 .zfill {
  fill: rgba(79, 194, 176, 0.36);
  animation: none;
}
#pi-stage .facility.fly.b5 .zline,
#pi-stage .facility.fly.b5 .ztick {
  stroke: var(--mint);
}
/* the zone takes over from the marker's dot and rings */
#pi-stage .facility.fly.b3 .hs.static .ring,
#pi-stage .facility.fly.b3 .hs .mon {
  opacity: 0;
}
/* Resolved sits on the zone, clear of the seal pop-up above the door */
#pi-stage .facility.fly .hs .res {
  left: calc(100% + 12px);
  bottom: auto;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
}

/* the pop-ups: what is really there, beside each signal */
#pi-stage .co .pop {
  position: absolute;
  width: clamp(120px, 12cqw, 176px);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px var(--science-blue),
    var(--shadow-over);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.6);
  transition:
    opacity 0.2s ease,
    transform 0.45s var(--ease-overshoot),
    visibility 0s linear 0.45s;
  pointer-events: none;
}
#pi-stage .co.open .pop {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
#pi-stage .co.open .lab {
  display: none;
}
#pi-stage .pop-tr {
  left: calc(100% + 12px);
  bottom: calc(100% + 12px);
  transform-origin: 0 100%;
}
#pi-stage .pop-tl {
  right: calc(100% + 12px);
  bottom: calc(100% + 12px);
  transform-origin: 100% 100%;
}
#pi-stage .pop-br {
  left: calc(100% + 12px);
  top: calc(100% + 12px);
  transform-origin: 0 0;
}
#pi-stage .pop-bl {
  right: calc(100% + 12px);
  top: calc(100% + 12px);
  transform-origin: 100% 0;
}
/* beside the signal, a little lower than top-right: clear of the top of
   the frame when the signal sits high */
#pi-stage .pop-r {
  left: calc(100% + 12px);
  bottom: calc(100% - 8px);
  transform-origin: 0 100%;
}
#pi-stage .pop .m {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--deep);
}
#pi-stage .pop .m.fixed,
#pi-stage .co.fixed .pop .m:not(.fixed) {
  display: none;
}
#pi-stage .co.fixed .pop .m.fixed {
  display: block;
}
#pi-stage .pop .cap {
  display: block;
  padding: 7px 9px 8px;
  font: 500 12px / 1.25 var(--font-sans);
  color: var(--ink-strong);
  text-align: left;
  white-space: normal;
}
/* Intelligence: the finding pops up as an ECOLAB3D insight */
#pi-stage .ins-pop {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 6;
  width: clamp(210px, 19cqw, 268px);
  padding: 12px 14px 13px;
  border-radius: 10px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px #dfe6ee,
    var(--shadow-over);
  transform: translate(18px, calc(-100% - 18px)) scale(0.7);
  transform-origin: 0 100%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    transform 0.45s var(--ease-overshoot),
    visibility 0s linear 0.45s;
  pointer-events: none;
}
#pi-stage .facility.fly.at3 .ins-pop {
  opacity: 1;
  visibility: visible;
  transform: translate(18px, calc(-100% - 18px));
  transition-delay: 0.5s, 0.5s, 0s;
}
#pi-stage .ins-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
#pi-stage .ins-pop .chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font: 500 12px / 1 var(--font-sans);
}
#pi-stage .ins-pop .chip svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}
#pi-stage .ins-pop .chip.insight {
  color: #0051a2;
  box-shadow: inset 0 0 0 1px #dfe6ee;
}
#pi-stage .ins-pop .chip.prio {
  color: var(--caustic-red);
  background: #fdecea;
}
#pi-stage .ins-t {
  display: block;
  font: 700 15px / 20px var(--font-sans);
  color: var(--ink-strong);
}
#pi-stage .ins-m {
  display: block;
  margin-top: 4px;
  font: 500 11px / 1.3 var(--font-mono);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--meta);
}
#pi-stage .facility.fly .hs:not(.static) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* nothing rides on the picture while the camera moves */
#pi-stage .facility.flying .fac-ov,
#pi-stage .facility.flying .inset,
#pi-stage .facility.flying .visbadge,
#pi-stage .facility.flying .motion {
  opacity: 0;
  visibility: hidden;
  transition: none;
}
/* the plant on the page, faded over the hand-off to and from the canvas */
#pi-stage .fly-ghost {
  position: absolute;
  z-index: 3;
  object-fit: contain;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
/* the intro steps aside as the camera moves in */
#pi-stage .screen.fly .intro {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* the close-up's furniture */
#pi-stage .facility.fly .visbadge {
  left: 24px;
  top: 24px;
}
#pi-stage .facility.fly .motion {
  right: auto;
  left: 24px;
  bottom: 24px;
}
/* the story, as a card on the close-up: the current beat only */
#pi-stage .screen.fly.storymode .storycol {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 8;
  width: 380px;
  padding: 16px 20px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-over);
  animation: pi-card-in 0.45s var(--ease-travel) both;
}
@keyframes pi-card-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
#pi-stage .screen.fly .beat:not(.now),
#pi-stage .screen.fly .legend,
#pi-stage .screen.fly .bn {
  display: none;
}
#pi-stage .screen.fly .beat.now {
  display: block;
  padding: 0;
  background: none;
  border-left: 0;
}
#pi-stage .screen.fly .bh {
  font-size: 22px;
  line-height: 26px;
}
/* the areas: in the bottom bar in any story, so the picture stays clear; at
   the top of the story in the alternative view */
#pi-stage .areas {
  display: none;
  gap: 6px;
  margin: 0;
}
#pi-stage.story .nbar .areas {
  display: flex;
  margin-left: 12px;
}
#pi-stage .areas button {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font: 500 13px / 1 var(--font-sans);
  color: var(--navy);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--band-line);
  white-space: nowrap;
  transition:
    background var(--dur-state) ease,
    box-shadow var(--dur-state) ease;
}
#pi-stage .areas button:hover {
  box-shadow: inset 0 0 0 2px var(--science-blue);
}
#pi-stage .areas button[aria-current="true"] {
  color: #fff;
  background: var(--science-blue);
  box-shadow: none;
}
/* the alternative view has no plant to sit over: the areas lead the story */
@container stage (max-width: 900px) {
  #pi-stage.story .nbar .areas {
    display: none;
  }
  #pi-stage .screen.storymode .storycol .areas {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #pi-stage .fly-cv,
  #pi-stage .fly-ghost {
    transition: none;
  }
  #pi-stage .screen.fly.storymode .storycol {
    animation: none;
  }
}

/* ============================================================================
   ALTERNATIVE VIEW (wireframe): below 900 the map leaves, the hotspots become
   a list, the story runs as a stepper, the form stacks.
   ========================================================================== */
@container stage (max-width: 900px) {
  #pi-stage .entry-grid,
  #pi-stage .impact-grid,
  #pi-stage .end-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
  #pi-stage .screen[data-id="end"] .motion {
    position: static;
    margin-top: 16px;
  }
  #pi-stage .facility {
    display: none;
  }
  #pi-stage .hotlist {
    display: flex;
  }
  #pi-stage .skip {
    display: none;
  }
  #pi-stage .cta {
    padding: 0 14px;
  }
  #pi-stage .sbrand span {
    display: none;
  }
  #pi-stage .sprog {
    max-width: 90px;
  }
  #pi-stage .s-main {
    justify-content: flex-start;
  }
  #pi-stage .screen {
    padding: 22px 20px;
  }
  /* two to a row where the fields are short, so the form fits one view */
  #pi-stage .frow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #pi-stage .frow .wide {
    grid-column: 1 / -1;
  }
  #pi-stage .nbar {
    padding: 0 16px;
  }
  #pi-stage .nbtn {
    padding: 0 18px;
    min-width: 0;
  }
  #pi-stage .s-h1,
  #pi-stage .s-h2 {
    line-height: 1.2;
  }
}
@container stage (max-width: 520px) {
  #pi-stage .s-stat {
    flex: 1 1 140px;
  }
  /* the brand gives the bar its room back on a phone */
  #pi-stage .sbrand {
    display: none;
  }
  #pi-stage .sprog {
    margin: 0;
  }
  #pi-stage .nbar .nbtn {
    flex: 1 1 auto;
    white-space: normal;
    text-align: center;
    line-height: 1.1;
  }
  #pi-stage .ncount {
    display: none;
  }
}
/* short frames (iPad landscape and below): give back vertical room first,
   by spacing only. The wireframe fit here because its type shrank with the
   frame; house type holds its size (WCAG 1.4.4), so the room comes from
   padding, gaps and the bars instead. */
@container stage (max-height: 700px) {
  #pi-stage .intro .s-dek {
    display: none;
  }
  #pi-stage .beat.done .bh {
    display: none;
  }
  #pi-stage .sbar {
    height: 52px;
  }
  #pi-stage .nbar {
    height: 60px;
  }
  #pi-stage .screen {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  #pi-stage .s-eyeb {
    margin-bottom: 8px;
  }
  #pi-stage .rail {
    margin-bottom: 10px;
    gap: 4px;
  }
  #pi-stage .rail i {
    height: 24px;
  }
  #pi-stage .tl {
    gap: 4px;
  }
  #pi-stage .beat {
    padding-top: 7px;
    padding-bottom: 7px;
  }
  #pi-stage .bh {
    margin-bottom: 6px;
  }
  #pi-stage .legend {
    margin-top: 8px;
    gap: 5px;
  }
  #pi-stage .s-h2 {
    margin-bottom: 8px;
  }
  #pi-stage .s-h2 .ln {
    display: inline;
  }
  #pi-stage .outs {
    margin-top: 10px;
    gap: 4px;
  }
  #pi-stage .proof {
    margin-top: 6px;
    padding-top: 6px;
  }
  #pi-stage .s-stat {
    padding-top: 6px;
  }
  #pi-stage .s-stat .k {
    margin-top: 5px;
  }
  #pi-stage .s-fine {
    margin-top: 6px;
  }
  #pi-stage .others-lead {
    margin-top: 12px;
  }
  #pi-stage .form {
    padding: 16px 20px 18px;
  }
  #pi-stage .frow {
    gap: 10px 12px;
    margin-top: 10px;
  }
  #pi-stage .form textarea {
    min-height: 48px;
  }
  #pi-stage .fsub {
    margin-top: 10px;
  }
}

/* ============================================================================
   REDUCED MOTION: land the finished state; nothing loops; the clip is a still
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #pi-stage .screen {
    transition:
      opacity 0.01s,
      visibility 0.01s;
    transform: none;
  }
  #pi-stage .screen.prev {
    transform: none;
  }
  #pi-stage .fac-img,
  #pi-stage .co,
  #pi-stage .visbadge,
  #pi-stage .trails,
  #pi-stage .trails > g,
  #pi-stage .inset,
  #pi-stage .route {
    transition: none !important;
  }
  #pi-stage .hs .ring::before,
  #pi-stage .hs .mon::before,
  #pi-stage .trail,
  #pi-stage .print {
    animation: none !important;
  }
  #pi-stage .ping,
  #pi-stage .ping-halo,
  #pi-stage .heat,
  #pi-stage .link {
    transition: none !important;
  }
  #pi-stage .link {
    stroke-dashoffset: 0;
  }
  #pi-stage .motion {
    display: none;
  }
  #pi-stage .form::after,
  #pi-stage .form-glow {
    animation: none;
    opacity: 0;
  }
  #pi-stage .end-mouse {
    display: none;
  }
}

/* ============================================================================
   PHONES AND IPAD PORTRAIT (a stage 900 wide or less): the story without
   motion. One still per beat (assets/m, from build_phone_stills.py), the
   signals and the insight as text under it, then Back and Next. The flights,
   the night footage, the pop-up clips and page 4's mouse stay on desktop.
   ========================================================================== */
#pi-stage .mplant,
#pi-stage .mstep,
#pi-stage .mcard,
#pi-stage .legend .lth,
#pi-stage .mins,
#pi-stage .areas .ashort {
  display: none;
}
@container stage (max-width: 900px) {
  /* the first screen: the headline, the plant, the three areas */
  #pi-stage .s-h1 {
    font-size: 26px;
    line-height: 1.15;
  }
  #pi-stage .intro .s-dek {
    font-size: 15px;
    line-height: 1.45;
  }
  #pi-stage .intro .s-body {
    display: none;
  }
  #pi-stage .mplant {
    display: block;
    width: 100%;
    height: auto;
    margin: 4px 0 2px;
  }
  #pi-stage .hotlist {
    counter-reset: hot;
    gap: 8px;
  }
  #pi-stage .hot {
    counter-increment: hot;
    padding: 11px 12px;
  }
  /* a number where the desktop has a hotspot dot */
  #pi-stage .hot .ring {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: 0;
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--science-blue);
    font: 700 11px / 1 var(--font-mono);
    color: var(--science-blue);
  }
  #pi-stage .hot .ring::before {
    content: counter(hot);
  }
  /* before a risk is chosen the three areas are the way in */
  #pi-stage[data-screen="entry"]:not(.story) .nbar {
    display: none;
  }

  /* the story: the areas, the beat's name and five dots, its still, its words */
  #pi-stage .screen.storymode .storycol {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
  }
  #pi-stage .screen.storymode .storycol > * {
    grid-column: 1 / -1;
  }
  #pi-stage .screen.storymode .storycol .areas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 10px;
  }
  #pi-stage .storycol .areas [data-area="plant"],
  #pi-stage .storycol .s-eyeb {
    display: none;
  }
  #pi-stage .storycol .areas .along {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  #pi-stage .storycol .areas .ashort {
    display: inline;
  }
  #pi-stage .screen.storymode .mstep {
    display: block;
    grid-column: 1;
    font: 500 11px / 1 var(--font-mono);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--navy);
  }
  #pi-stage .screen.storymode .rail {
    grid-column: 2;
    margin: 0;
    gap: 0;
  }
  /* each dot keeps a 24px target, the dot itself 8px */
  #pi-stage .rail i {
    flex: none;
    width: 22px;
    min-width: 0;
    height: 24px;
    padding: 0;
    display: grid;
    place-items: center;
    background: none;
    box-shadow: none;
  }
  #pi-stage .rail i::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pill-tint);
  }
  #pi-stage .rail i.done::before {
    background: #9ec5ee;
  }
  #pi-stage .rail i.now::before {
    background: var(--science-blue);
  }
  #pi-stage .rail i span {
    display: none;
  }
  #pi-stage .rail i:hover,
  #pi-stage .rail i.done,
  #pi-stage .rail i.now {
    background: none;
    box-shadow: none;
  }
  #pi-stage .screen.storymode .mcard {
    display: block;
    margin: 8px 0 0;
  }
  #pi-stage .mcard img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    background: var(--band);
  }
  #pi-stage .tl {
    margin-top: 12px;
  }
  #pi-stage .beat:not(.now) {
    display: none;
  }
  #pi-stage .beat.now {
    display: block;
    padding: 0;
    background: none;
    border: 0;
  }
  #pi-stage .beat.now .bn,
  #pi-stage .beat.now .bk {
    display: none;
  }
  #pi-stage .beat.now .bh {
    font: 700 20px / 1.2 var(--font-sans);
    margin: 0 0 6px;
  }
  #pi-stage .beat.now .bp {
    font: 400 14px / 1.45 var(--font-sans);
    max-width: none;
  }
  #pi-stage .legend {
    margin-top: 10px;
    gap: 7px;
  }
  #pi-stage .legend li {
    font: 500 13px / 1.25 var(--font-sans);
  }
  #pi-stage .legend .lth {
    display: block;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 7px;
    object-fit: cover;
  }
  #pi-stage .mins {
    display: block;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    box-shadow: inset 0 0 0 1px #dfe6ee;
  }
  #pi-stage .mins .ins-chips {
    margin-bottom: 6px;
  }
  #pi-stage .mins .chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font: 500 12px / 1 var(--font-sans);
  }
  #pi-stage .mins .chip svg {
    width: 10px;
    height: 10px;
    fill: currentColor;
  }
  #pi-stage .mins .chip.insight {
    color: #0051a2;
    box-shadow: inset 0 0 0 1px #dfe6ee;
  }
  #pi-stage .mins .chip.prio {
    color: var(--caustic-red);
    background: #fdecea;
  }
  #pi-stage .mins b {
    display: block;
    font: 600 14px / 1.3 var(--font-sans);
    color: var(--ink-strong);
  }

  #pi-stage .s-h2 {
    font-size: 26px;
    line-height: 1.15;
  }
  #pi-stage .nbar .nbtn {
    font-size: 15px;
    padding: 0 14px;
  }

  /* page 3: the headline, the outcomes and the proof; the finding card
     repeats the Intelligence beat, so it stays on desktop */
  #pi-stage .impact-grid > div:last-child {
    display: none;
  }
  #pi-stage .s-stats {
    gap: 12px;
    flex-wrap: nowrap;
  }
  #pi-stage .s-stat .v {
    font-size: 26px;
  }

  /* page 4: the form, its border still (nothing moves on a phone, so no
     pause button either) */
  #pi-stage .screen[data-id="end"] .s-dek,
  #pi-stage .screen[data-id="end"] .motion {
    display: none;
  }
  #pi-stage .form::after,
  #pi-stage .form-glow::before {
    animation: none;
  }
}
/* iPad portrait: the still beside the words instead of above them */
@container stage (min-width: 700px) and (max-width: 900px) {
  #pi-stage .screen.storymode .storycol {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 22px;
  }
  #pi-stage .screen.storymode .rail {
    justify-self: end;
  }
  #pi-stage .screen.storymode .mcard {
    grid-column: 1;
  }
  #pi-stage .screen.storymode .tl {
    grid-column: 2;
    align-self: start;
    margin-top: 8px;
  }
  #pi-stage .mplant {
    max-width: 480px;
  }
}
/* phones and iPad portrait in Ecolab's frame, a fixed 800 tall at every
   size: the stage keeps the frame's height, as on desktop, and every view
   fits it (the screen still scrolls if text is zoomed). A view too tall for
   the frame comes in two parts and Next walks the second first (stage.js
   partsHere): Corrective action gives the scene and the story, then the
   result and the insight (a tablet keeps its picture beside them); the last
   screen gives the value, then the form. */
#pi-stage.is-flow[data-part="a"] .beat.now[data-n="3"] .bx.mob,
#pi-stage.is-flow[data-part="a"] .beat.now[data-n="3"] .bres,
#pi-stage.is-flow[data-part="a"] .beat.now[data-n="3"] .br-next,
#pi-stage.is-phone[data-part="b"] .screen.storymode .mcard,
#pi-stage.is-flow[data-part="b"] .beat.now .bp,
#pi-stage.is-flow[data-part="a"] .screen[data-id="end"] .form,
#pi-stage.is-flow[data-part="b"] .screen[data-id="end"] .end-grid > :first-child {
  display: none;
}
/* the story in one column: the still and the plan stop growing on a wide
   phone or small tablet, and the form keeps its fields on one view */
@container stage (max-width: 699px) {
  #pi-stage .mcard img {
    max-width: 360px;
  }
  #pi-stage .mplant {
    max-width: 420px;
  }
  #pi-stage .frow {
    align-items: end;
  }
  #pi-stage .form textarea {
    min-height: 40px;
    height: 40px;
  }
}
@container stage (max-width: 389px) {
  #pi-stage .form > .s-body {
    display: none;
  }
}
/* the smallest phones: the area buttons go to one word (the full name stays
   for screen readers), and a field beside another puts its Required or
   Optional under its name, where there is room */
#pi-stage .areas .atiny {
  display: none;
}
@container stage (max-width: 379px) {
  #pi-stage .storycol .areas .amid {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  #pi-stage .storycol .areas .atiny {
    display: inline;
  }
  #pi-stage .frow label:not(.wide):not(.full) {
    grid-template-columns: minmax(0, 1fr);
  }
  #pi-stage .frow {
    row-gap: 8px;
  }
}

/* ============================================================================
   RND 02 · ROUND TWO
   Three beats per story (Alert, Inspection, Corrective action), the result
   in the story, real devices and their alerts, the ECOLAB3D card, and no
   camera look. Played on the close-up's five looks (b1..b5, at1..at5); the
   story's own beat is r1..r3 on the facility.
   ========================================================================== */

/* the CTA: the long wording where the bar has room */
#pi-stage .cta .cshort {
  display: none;
}
@container stage (max-width: 1100px) {
  #pi-stage .cta .clong {
    display: none;
  }
  #pi-stage .cta .cshort {
    display: inline;
  }
}

/* the bottom bar: the AI disclosure where the count was */
#pi-stage .ncount {
  display: none;
}
#pi-stage .ainote {
  margin-left: auto;
  padding-left: 12px;
  font: 500 11px / 1.3 var(--font-mono);
  letter-spacing: 0.6px;
  color: var(--meta);
  white-space: nowrap;
}

/* a finished story is ticked off on the map */
#pi-stage .hs.seen .ring,
#pi-stage .hot.seen .ring {
  background: var(--mint);
}

/* ---- Alert: night, the device pulses, its alert goes out ------------------ */
#pi-stage .facility.fly.r1 .tracks-g,
#pi-stage .facility.fly.r1 .pings-g,
#pi-stage .facility.fly.r1 .blips-g,
#pi-stage .facility.fly.r1 .pellets-g,
#pi-stage .facility.fly.r1 .hs.static {
  display: none;
}
/* Draft 1's infrared nights, graded to read as plain night until each corner
   has its own */
#pi-stage .facility.nvgrade .fly-night {
  filter: grayscale(1) sepia(0.55) hue-rotate(178deg) saturate(1.9) brightness(0.62) contrast(1.12);
}
#pi-stage .dev-pulse {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 4;
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease,
    visibility 0s linear 0.4s;
  pointer-events: none;
}
#pi-stage .facility.fly.r1 .dev-pulse {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.35s, 0s;
}
#pi-stage .dev-pulse i {
  position: absolute;
  left: -16px;
  top: -16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(128, 225, 205, 0.95);
  box-shadow:
    0 0 14px 2px rgba(79, 194, 176, 0.6),
    inset 0 0 10px rgba(79, 194, 176, 0.35);
  animation: pi-dev-ring 2.4s ease-out infinite;
}
#pi-stage .dev-pulse i:nth-child(2) {
  animation-delay: 0.8s;
}
#pi-stage .dev-pulse i:nth-child(3) {
  animation-delay: 1.6s;
}
@keyframes pi-dev-ring {
  0% {
    transform: scale(0.55);
    opacity: 1;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
#pi-stage.still .dev-pulse i {
  animation-play-state: paused;
}
/* the alert, over the device, with a lead down to it */
#pi-stage .pop-alert {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 7;
  width: 300px;
  transform: translate(-50%, calc(-100% - 58px - var(--lift, 0px))) translateY(10px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    transform 0.45s var(--ease-travel),
    visibility 0s linear 0.45s;
  pointer-events: none;
}
#pi-stage .pop-alert.l {
  transform: translate(calc(-100% + 44px), calc(-100% - 58px - var(--lift, 0px))) translateY(10px);
}
#pi-stage .facility.fly.r1 .pop-alert {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, calc(-100% - 58px - var(--lift, 0px)));
  transition-delay: 0.9s, 0.9s, 0s;
}
#pi-stage .facility.fly.r1 .pop-alert.l {
  transform: translate(calc(-100% + 44px), calc(-100% - 58px - var(--lift, 0px)));
}
#pi-stage .pop-alert::after {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: 100%;
  width: 2px;
  height: calc(44px + var(--lift, 0px));
  background: linear-gradient(#fff, rgba(255, 255, 255, 0.15));
}
#pi-stage .pop-alert.l::after {
  left: auto;
  right: 43px;
}

/* the alert itself: a Pest Intelligence notification */
#pi-stage .alert-card {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-over);
  text-align: left;
}
#pi-stage .ac-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #0051a2;
  color: #fff;
  font: 500 12px / 1 var(--font-sans);
}
#pi-stage .alert-card .spark,
#pi-stage .e3-card .spark {
  width: 10px;
  height: 10px;
  fill: currentColor;
  flex: none;
}
#pi-stage .ac-t {
  margin-left: auto;
  font: 500 11px / 1 var(--font-mono);
  color: var(--sky-soft);
}
#pi-stage .ac-bd {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 12px 12px;
}
#pi-stage .ac-dev {
  display: block;
  width: 58px;
  height: 48px;
  object-fit: contain;
  padding: 3px;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--band-line);
}
#pi-stage .ac-tx b {
  display: block;
  font: 700 15px / 19px var(--font-sans);
  color: var(--ink-strong);
}
#pi-stage .ac-m {
  display: block;
  margin-top: 2px;
  font: 400 12px / 16px var(--font-sans);
  color: var(--meta);
}
#pi-stage .ac-trend {
  margin-top: 8px;
}
#pi-stage .ac-tl,
#pi-stage .br-tl {
  display: block;
  font: 500 10px / 1.3 var(--font-mono);
  letter-spacing: 0.4px;
  color: var(--meta);
}
#pi-stage .ac-sent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e3f6f2;
  color: #0b6b5c;
  font: 500 11.5px / 1.2 var(--font-sans);
  font-style: normal;
}
#pi-stage .ac-sent::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
}
/* bars like the portal's Pest Activity Trends */
#pi-stage svg.trend {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: 4px;
}
#pi-stage svg.trend .base {
  stroke: var(--band-line);
  stroke-width: 1;
}
#pi-stage svg.trend .bar {
  fill: var(--sky-soft);
}
#pi-stage svg.trend .spike {
  fill: var(--science-blue);
}
#pi-stage svg.trend .cut {
  stroke: var(--mint);
  stroke-width: 2;
  stroke-dasharray: 3 3;
}
/* RND 05: the key, this week, and the corrective action named at its line,
   so the chart reads on its own */
#pi-stage .tr-plot {
  position: relative;
}
#pi-stage .tr-cut {
  position: absolute;
  top: 3px;
  margin-left: 6px;
  white-space: nowrap;
  font: 500 10px / 1.2 var(--font-sans);
  color: #0b6b5c;
}
#pi-stage .tr-ax {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px;
  font: 500 9.5px / 1.2 var(--font-mono);
  letter-spacing: 0.3px;
  color: var(--meta);
}
#pi-stage .tr-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 400 10.5px / 1.2 var(--font-sans);
  letter-spacing: 0;
}
#pi-stage .tr-key i {
  flex: none;
  width: 6px;
  height: 10px;
  border-radius: 1.5px;
  background: var(--science-blue);
}
#pi-stage.is-flow svg.trend {
  height: 24px;
  margin-top: 3px;
}
#pi-stage.is-flow .ac-sent {
  margin-top: 7px;
}

/* ---- Inspection: the ECOLAB3D card, the zone, the specialist ------------- */
#pi-stage .facility.fly .hs .prio {
  display: none;
}
#pi-stage .facility.fly.r2.at4 .co {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
#pi-stage .pop-e3d {
  position: absolute;
  left: var(--x);
  top: calc(var(--y) - var(--e3lift, 0px));
  z-index: 6;
  /* never past the picture's right edge in a narrow frame */
  width: min(310px, calc(100% - var(--x) - 14px));
  transform: translateY(10px) scale(0.96);
  transform-origin: 0 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    transform 0.45s var(--ease-travel),
    visibility 0s linear 0.45s;
}
#pi-stage .facility.fly.r3 .pop-e3d {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.35s, 0.35s, 0s;
}
/* the card as the portal shows a top priority */
#pi-stage .e3-card {
  border-radius: 10px;
  overflow: hidden;
  background: var(--band);
  box-shadow: var(--shadow-over);
  text-align: left;
}
#pi-stage .e3-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: #0051a2;
  color: #fff;
  font: 500 12px / 1 var(--font-sans);
}
#pi-stage .e3-lg {
  font: 900 12.5px / 1 var(--font-sans);
  letter-spacing: 0.5px;
}
#pi-stage .e3-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.5);
}
#pi-stage .e3-tp {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px 6px;
  font: 500 13px / 1 var(--font-sans);
  color: var(--deep);
}
#pi-stage .e3-tp svg {
  width: 13px;
  height: 13px;
  fill: #0051a2;
}
#pi-stage .e3-in {
  margin: 0 10px 10px;
  padding: 11px 13px 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #d5dde6;
}
#pi-stage .e3-chips {
  display: flex;
  gap: 6px;
}
#pi-stage .e3-ins,
#pi-stage .e3-crit,
#pi-stage .e3-done {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: 4px;
  font: 400 11px / 1 var(--font-sans);
}
#pi-stage .e3-ins {
  color: var(--science-blue);
  box-shadow: inset 0 0 0 1px var(--science-blue);
}
#pi-stage .e3-ins .spark {
  width: 9px;
  height: 9px;
}
#pi-stage .e3-crit {
  color: #b42318;
  background: #fdeae7;
}
#pi-stage .e3-done {
  color: #0b6b5c;
  background: #e3f6f2;
}
#pi-stage .e3-t {
  display: block;
  margin-top: 8px;
  font: 500 15.5px / 20px var(--font-sans);
  color: var(--deep);
}
#pi-stage .e3-d {
  margin-top: 4px;
  font: 400 12px / 16.5px var(--font-sans);
  color: var(--ink-body);
}
#pi-stage .e3-doc {
  font: 500 12px / 16px var(--font-sans);
  color: #0b6b5c;
}
#pi-stage .e3-ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
#pi-stage .e3-link {
  padding: 4px 0;
  font: 500 12px / 1.2 var(--font-sans);
  color: var(--science-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#pi-stage .e3-link:focus-visible {
  outline: 2px solid var(--science-blue);
  outline-offset: 2px;
}
#pi-stage .e3-vd {
  padding: 3px 8px;
  border-radius: 4px;
  font: 400 11px / 1.2 var(--font-sans);
  color: var(--science-blue);
  box-shadow: inset 0 0 0 1px var(--science-blue);
}
/* Corrective action: the same card, closed and documented */
#pi-stage .facility.fly.r3 .e3-crit {
  display: none;
}
#pi-stage .facility.fly.r3 .e3-done {
  display: inline-flex;
}
#pi-stage .facility.fly.r3 .e3-doc {
  display: block;
}

/* ---- the story card: phones carry the alert and the card in the story ---- */
#pi-stage .screen.fly .bx.mob {
  display: none;
}
#pi-stage .bx.mob {
  margin-top: 12px;
}

/* ---- Corrective action: the result, the other two, the two ways on ------ */
#pi-stage .bres {
  margin-top: 12px;
}
#pi-stage .br-stat {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 10px;
}
#pi-stage .br-big {
  font: 300 46px / 1 var(--font-sans);
  letter-spacing: -1px;
  color: var(--science-blue);
}
#pi-stage .br-lab {
  font: 700 16px / 20px var(--font-sans);
  color: var(--navy);
}
#pi-stage .br-word {
  font: 400 26px / 30px var(--font-sans);
  color: var(--science-blue);
}
#pi-stage .br-trend {
  margin-top: 8px;
}
#pi-stage .br-clock {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 10px 0 2px;
  padding: 0;
  list-style: none;
  position: relative;
}
#pi-stage .br-clock::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 6px;
  height: 2px;
  background: var(--sky-soft);
}
#pi-stage .br-clock li {
  position: relative;
  text-align: center;
  font: 400 11px / 14px var(--font-sans);
  color: var(--meta);
}
#pi-stage .br-clock li::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 auto 5px;
  border-radius: 50%;
  background: var(--science-blue);
  box-shadow: 0 0 0 3px #fff;
}
#pi-stage .br-clock li:last-child::before {
  background: var(--mint);
}
#pi-stage .br-clock b {
  display: block;
  font: 700 12px / 15px var(--font-sans);
  color: var(--deep);
}
#pi-stage .br-src {
  display: block;
  margin-top: 6px;
  font: 500 10.5px / 1.35 var(--font-mono);
  letter-spacing: 0.3px;
  color: var(--meta);
}
#pi-stage .br-also {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
#pi-stage .br-also li {
  position: relative;
  padding: 6px 0 6px 20px;
  border-top: 1px solid var(--band-line);
  font: 400 13px / 17px var(--font-sans);
  color: var(--ink-body);
}
#pi-stage .br-also li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--mint);
  border-bottom: 2px solid var(--mint);
  transform: rotate(-45deg);
}
#pi-stage .br-also b {
  color: var(--deep);
}
#pi-stage .br-next {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
#pi-stage .br-next .nbtn {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
}
/* on the close-up the last beat's card widens into two columns, the story
   beside the result, so it fits a short frame */
#pi-stage .screen.fly.storymode .storycol:has(.beat.now .bres) {
  width: min(640px, calc(100% - 48px));
}
#pi-stage .screen.fly .beat.now .bt:has(.bres) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 22px;
  align-items: start;
}
#pi-stage .screen.fly .beat.now .bt:has(.bres) > :not(.bres) {
  grid-column: 1;
}
#pi-stage .screen.fly .beat.now .bt:has(.bres) > .bres {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin-top: 2px;
}
#pi-stage .screen.fly .beat.now .bt:has(.bres) > .br-next {
  grid-column: 1 / -1;
  justify-content: space-between;
  margin-top: 16px;
}

/* ---- What is ECOLAB3D? ---------------------------------------------------- */
#pi-stage .e3info {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(9, 54, 117, 0.32);
}
#pi-stage .e3i-box {
  width: min(460px, 100%);
  padding: 24px 26px 22px;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-over);
}
#pi-stage .e3i-k {
  display: block;
  font: 700 11px / 1.3 var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--science-blue);
}
#pi-stage .e3i-t {
  margin: 8px 0 8px;
  font: 700 24px / 28px var(--font-sans);
  color: var(--navy);
}
#pi-stage .e3i-box p {
  font: 400 16px / 23px var(--font-sans);
  color: var(--ink-body);
}
#pi-stage .e3i-close {
  margin-top: 18px;
}

/* ---- the last screen: the value section and the form ---------------------- */
#pi-stage .vstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
#pi-stage .vstats div {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--pill-tint);
}
#pi-stage .vstats b {
  display: block;
  font: 300 30px / 1.05 var(--font-sans);
  color: var(--science-blue);
}
#pi-stage .vstats span {
  display: block;
  margin-top: 2px;
  font: 500 12.5px / 16px var(--font-sans);
  color: var(--navy);
}
#pi-stage .vfine {
  margin-top: 8px;
}
/* each field's name and its Required or Optional tag share the first row */
#pi-stage .form label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: baseline;
}
#pi-stage .form label > input,
#pi-stage .form label > select,
#pi-stage .form label > textarea {
  grid-column: 1 / -1;
}
#pi-stage .form .req,
#pi-stage .form .opt {
  font: 500 10px / 1.2 var(--font-mono);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
#pi-stage .form .req {
  color: var(--science-blue);
}
#pi-stage .form .opt {
  color: var(--meta);
}
#pi-stage .form label.bad input {
  border-color: var(--caustic-red);
  box-shadow: 0 0 0 3px rgba(196, 38, 46, 0.16);
}
#pi-stage .sent-msg:focus {
  outline: none;
}
#pi-stage .sent-msg b {
  display: block;
  font-size: 18px;
}
#pi-stage .sent-msg p {
  margin: 4px 0 8px;
}
#pi-stage .sent-link {
  font: 500 15px / 1.3 var(--font-sans);
  color: var(--science-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- phones and iPad portrait --------------------------------------------- */
@container stage (max-width: 900px) {
  #pi-stage .ainote {
    font-size: 10px;
  }
  #pi-stage .br-next .nbtn {
    flex: 1 1 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  #pi-stage .dev-pulse i {
    animation: none;
    opacity: 0.8;
  }
  #pi-stage .dev-pulse i:nth-child(2) {
    transform: scale(1.6);
    opacity: 0.45;
  }
  #pi-stage .dev-pulse i:nth-child(3) {
    transform: scale(2.3);
    opacity: 0.2;
  }
}

/* the device in the scene by day; at night the night still carries it */
#pi-stage .facility.fly.r2 #flyDev,
#pi-stage .facility.fly.r3 #flyDev {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
/* at Inspection the specialist arrives as the zone turns blue */
#pi-stage .facility.fly.r2.at4 #flySpec {
  transition-delay: 0.1s;
}

/* the specialist needs no caption on the close-up: the story names him */
#pi-stage .facility.fly .hs .spec {
  display: none;
}
/* a narrower frame: the areas tighten so the bar keeps one line */
@container stage (max-width: 1100px) {
  #pi-stage .areas button {
    padding: 0 9px;
    font-size: 12.5px;
  }
  #pi-stage .ainote {
    font-size: 10px;
    letter-spacing: 0.3px;
  }
}

#pi-stage .facility.fly .hs.resl .res {
  left: auto;
  right: calc(100% + 12px);
}
#pi-stage .facility.fly .hs.resoff .res {
  visibility: hidden;
}
/* an open signal's pop-up comes in front of the ECOLAB3D card, the one
   opened last in front of all (the story card stays above the picture) */
#pi-stage .facility.fly .co.open {
  z-index: 7;
}
#pi-stage .facility.fly .co.open.front {
  z-index: 8;
}
/* the rail names the step, so the beat's own label would repeat it */
#pi-stage .screen.fly .beat.now .bk {
  display: none;
}
/* the dock's seal pop-up sits to the left and a little lower, clear of the top
   of the picture and of the next signal */
#pi-stage .pop-lt {
  right: calc(100% + 12px);
  bottom: calc(100% - 34px);
  transform-origin: 100% 100%;
}

/* the last screen in a short frame: the value section tightens so the page
   holds without scrolling */
@container stage (max-height: 700px) {
  #pi-stage .screen[data-id="end"] .s-h2 {
    font-size: 30px;
    line-height: 34px;
  }
  #pi-stage .screen[data-id="end"] .s-dek {
    font-size: 17px;
    line-height: 23px;
  }
  #pi-stage .vstats {
    margin-top: 10px;
    gap: 8px;
  }
  #pi-stage .vstats div {
    padding: 7px 10px;
  }
  #pi-stage .vstats b {
    font-size: 24px;
  }
  #pi-stage .vstats span {
    font-size: 11.5px;
    line-height: 14px;
  }
  #pi-stage .vfine {
    font-size: 10px;
    line-height: 1.35;
  }
  #pi-stage .others .s-pill {
    height: 34px;
    padding: 0 12px;
    font-size: 14px;
  }
  #pi-stage .screen[data-id="end"] .others-lead {
    margin-top: 8px;
  }
}

/* View Details: a real button, and the insight's details as the portal shows them */
#pi-stage .e3-vd {
  cursor: pointer;
  transition:
    background var(--dur-state) ease,
    color var(--dur-state) ease;
}
#pi-stage .e3-vd:hover {
  background: var(--science-blue);
  color: #fff;
}
#pi-stage .e3-vd:focus-visible {
  outline: 2px solid var(--science-blue);
  outline-offset: 2px;
}
#pi-stage .e3dd-box {
  width: min(520px, 100%);
  max-height: 100%;
  overflow: auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-over);
}
#pi-stage .e3dd-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 16px;
  background: #0051a2;
  color: #fff;
  font: 500 16px / 1.2 var(--font-sans);
}
#pi-stage .e3dd-bar .spark {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex: none;
}
#pi-stage .e3dd-x {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font: 400 24px / 1 var(--font-sans);
}
#pi-stage .e3dd-x:hover {
  background: rgba(255, 255, 255, 0.16);
}
#pi-stage .e3dd-x:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}
#pi-stage .e3dd-in {
  padding: 16px 20px 18px;
}
#pi-stage .e3dd-t {
  margin: 10px 0 4px;
  font: 500 20px / 26px var(--font-sans);
  color: var(--deep);
}
#pi-stage .e3dd-d {
  font: 400 14px / 20px var(--font-sans);
  color: var(--ink-body);
}
#pi-stage .e3dd-tab {
  display: inline-block;
  margin-top: 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid #0051a2;
  font: 500 14px / 1 var(--font-sans);
  color: var(--deep);
}
#pi-stage .e3dd-acts {
  margin: 10px 0 0;
  padding-left: 20px;
  font: 400 14px / 20px var(--font-sans);
  color: var(--ink-body);
}
#pi-stage .e3dd-acts li {
  padding: 2px 0;
}
#pi-stage .e3dd-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--band-line);
}
#pi-stage .e3dd-meta dt {
  font: 500 11px / 20px var(--font-mono);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--meta);
}
#pi-stage .e3dd-meta dd {
  margin: 0;
  font: 400 14px / 20px var(--font-sans);
  color: var(--deep);
}
#pi-stage .e3dd-close {
  margin-top: 16px;
}

/* the ECOLAB3D card, compact where it would meet the story card */
#pi-stage .pop-e3d.compact .e3-tp,
#pi-stage .pop-e3d.compact .e3-d {
  display: none;
}
#pi-stage .pop-e3d.compact .e3-in {
  margin-top: 10px;
}

/* ============================================================================
   RND 03 · NARRATION
   The Listen button: words beside Skip to the end on desktop, a round speaker
   on phones and tablets. Off until pressed; while on, each section's clip
   plays as the visitor arrives (stage.js syncVo). The bars move only while
   the voice is speaking, and hold still when motion is paused or reduced.
   ========================================================================== */
#pi-stage .listen {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: 500 15px / 1 var(--font-sans);
  color: var(--science-blue);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur-state) ease,
    color var(--dur-state) ease;
}
#pi-stage .listen:hover {
  color: var(--blue-hover);
}
#pi-stage .listen:focus-visible {
  outline: 2px solid var(--science-blue);
  outline-offset: 2px;
}
#pi-stage .listen svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}
#pi-stage .listen .i-spk .w {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
#pi-stage .listen .i-eq {
  display: none;
}
#pi-stage .listen[aria-pressed="true"] {
  background: var(--surface-blue-tint);
}
#pi-stage .listen[aria-pressed="true"] .i-spk {
  display: none;
}
#pi-stage .listen[aria-pressed="true"] .i-eq {
  display: block;
}
#pi-stage .listen.playing .i-eq rect {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: pi-eq 0.9s ease-in-out infinite alternate;
}
#pi-stage .listen.playing .i-eq rect:nth-child(2) {
  animation-delay: -0.3s;
}
#pi-stage .listen.playing .i-eq rect:nth-child(3) {
  animation-delay: -0.6s;
}
@keyframes pi-eq {
  from {
    transform: scaleY(0.45);
  }
  to {
    transform: scaleY(1);
  }
}
#pi-stage.still .listen .i-eq rect {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  #pi-stage .listen .i-eq rect {
    animation: none;
  }
}
/* the longer AI note wraps where the bottom bar is busy */
@container stage (max-width: 1100px) {
  #pi-stage .ainote {
    max-width: 160px;
    white-space: normal;
    text-align: right;
  }
}
@container stage (max-width: 900px) {
  #pi-stage .listen {
    width: 40px;
    padding: 0;
    justify-content: center;
    border: 1.5px solid var(--navy);
    color: var(--navy);
  }
  #pi-stage .listen .lab {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  #pi-stage .listen[aria-pressed="true"] {
    background: var(--science-blue);
    border-color: var(--science-blue);
    color: #fff;
  }
  #pi-stage .sbar {
    gap: 12px;
    padding: 0 16px;
  }
}
@container stage (max-width: 520px) {
  #pi-stage .ainote {
    max-width: 120px;
    line-height: 1.35;
  }
}
/* the smallest phones: the speaker takes the progress bar's place */
@container stage (max-width: 359px) {
  #pi-stage .sprog {
    display: none;
  }
}
/* the phone map hides the bottom bar, so the AI note sits under the areas */
#pi-stage .ainote-map {
  display: none;
}
@container stage (max-width: 900px) {
  #pi-stage[data-screen="entry"]:not(.story) .ainote-map {
    display: block;
    margin-top: 14px;
    font: 500 10px / 1.3 var(--font-mono);
    letter-spacing: 0.6px;
    color: var(--meta);
  }
}

/* ============================================================================
   RND 04 · ECOLAB3D SPLIT (Ecolab, 2026-10-21)
   "What is ECOLAB3D" sits on the Alert, under the story; the insight card,
   finished and documented, with View Details, sits on Corrective action
   ========================================================================== */
#pi-stage .e3-what {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 0;
  font: 500 14px / 1.3 var(--font-sans);
  color: var(--science-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
#pi-stage .e3-what:hover {
  color: var(--blue-hover);
}
#pi-stage .e3-what:focus-visible {
  outline: 2px solid var(--science-blue);
  outline-offset: 2px;
}
#pi-stage .pop-e3d.e3left {
  left: 12px;
  top: 12px;
  width: min(310px, var(--e3w, 310px));
}
/* phones: the insight rides in the story in its compact form; its findings
   are a tap away in View Details */
#pi-stage .bx.e3m .e3-tp,
#pi-stage .bx.e3m .e3-d {
  display: none;
}
#pi-stage .bx.e3m .e3-in {
  margin-top: 10px;
}
/* the smallest phones: Corrective action's second part, a little tighter */
@container stage (max-width: 379px) {
  #pi-stage .beat.now[data-n="3"] .bres,
  #pi-stage .beat.now[data-n="3"] .bx.mob {
    margin-top: 6px;
  }
  #pi-stage .beat.now[data-n="3"] .br-next {
    margin-top: 6px;
  }
}

/* ============================================================================
   RND 05 · FASTER, FEWER, STRONGER
   One strip, in one order everywhere: each scenario leads with its hero
   outcome (the card's tag, the bigger result) and lights it in the strip,
   with what its actions did for all three; the end lights all three.
   ========================================================================== */
#pi-stage .h-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 4px 9px 4px 7px;
  border-radius: 4px;
  background: var(--science-blue);
  color: #fff;
  vertical-align: middle;
}
#pi-stage .h-pill svg,
#pi-stage .h-strip svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#pi-stage .h-pill svg {
  width: 14px;
  height: 14px;
}
#pi-stage .bres .br-big {
  font-size: 62px;
  letter-spacing: -1.5px;
}
#pi-stage .bres .br-word {
  font-size: 30px;
  line-height: 34px;
}
#pi-stage .h-lab {
  display: block;
  margin: 14px 0 6px;
  font: 500 10px / 1.3 var(--font-mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--meta);
}
#pi-stage .h-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
#pi-stage .h-strip li {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  min-width: 0;
}
#pi-stage .h-strip .seg {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1.5px solid var(--science-blue);
  border-right-width: 0;
  background: #f2f7fd;
  color: var(--navy);
  font: 500 12px / 1.2 var(--font-sans);
}
#pi-stage .h-strip li:first-child .seg {
  border-radius: 8px 0 0 8px;
}
#pi-stage .h-strip li:last-child .seg {
  border-right-width: 1.5px;
  border-radius: 0 8px 8px 0;
}
#pi-stage .h-strip .seg svg {
  width: 16px;
  height: 16px;
  color: var(--science-blue);
}
#pi-stage .h-strip li.on .seg {
  background: var(--science-blue);
  color: #fff;
}
#pi-stage .h-strip li.on .seg svg {
  color: #fff;
}
#pi-stage .h-strip .cap {
  padding: 6px 9px 0;
  font: 400 12px / 1.35 var(--font-sans);
  color: var(--meta);
}
#pi-stage .h-strip li.on .cap {
  color: var(--science-blue);
  font-weight: 500;
}
/* the end: all three lit, with what each scenario showed */
#pi-stage .h-sys {
  margin: 0 0 22px;
}
#pi-stage .h-sys .h-lab {
  margin: 0 0 7px;
  color: var(--navy);
}
#pi-stage .h-sys .seg {
  padding: 11px 12px;
  font-size: 14px;
}
#pi-stage .h-sys .seg svg {
  width: 20px;
  height: 20px;
}
#pi-stage .h-sys li + li .seg {
  border-left-color: rgba(255, 255, 255, 0.45);
}
#pi-stage .h-sys li.on .cap {
  padding: 6px 12px 0;
  color: var(--meta);
  font-weight: 400;
}
#pi-stage .h-sys .cap b {
  font-weight: inherit;
}
/* phones: the end's strip at the scenarios' size, naming where each showed */
#pi-stage.is-phone .h-sys .seg {
  padding: 8px;
  font-size: 12px;
}
#pi-stage.is-phone .h-sys .seg svg {
  width: 16px;
  height: 16px;
}
#pi-stage.is-phone .h-sys li.on .cap {
  padding: 5px 9px 0;
}
#pi-stage.is-phone .h-sys .cap-x {
  display: none;
}
/* the narrowest phones: the words need the room the icons take */
@container stage (max-width: 419px) {
  #pi-stage .h-strip .seg svg {
    display: none;
  }
}

/* RND 05: the exterior's catch is inside, so at Alert the picture shows the
   inside of the service door, after the alert lands */
#pi-stage .pop-inside {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 6;
  width: 240px;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-over);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.3s ease,
    transform 0.45s var(--ease-travel),
    visibility 0s linear 0.45s;
  pointer-events: none;
}
#pi-stage .pop-inside[hidden] {
  display: none;
}
#pi-stage .pop-inside img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
#pi-stage .pop-inside figcaption {
  padding: 8px 12px 10px;
  font: 500 12.5px / 1.3 var(--font-sans);
  color: var(--deep);
}
#pi-stage .facility.fly.r1 .pop-inside {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 1.5s, 1.5s, 0s;
}
/* the specialist's cut-out carries the station open, so the closed one steps aside */
#pi-stage .facility.fly.specdev.at4 #flyDev {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0s linear 0.3s;
}