/* Unified perimeter-to-decision experience
   -------------------------------------------------------------- */
.unified-deployment-section {
  position: relative;
  overflow: hidden;
  background: #07111b;
  border-top: 1px solid rgba(120, 174, 190, 0.14);
  border-bottom: 1px solid rgba(120, 174, 190, 0.14);
}

.unified-deployment-shell {
  position: relative;
  z-index: 1;
}

.unified-deployment-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 1.5rem;
}

.unified-deployment-header > div {
  max-width: 900px;
}

.unified-deployment-header .ops-title {
  max-width: 20ch;
  margin-top: 0.75rem;
}

.unified-deployment-lede {
  max-width: 56ch;
  margin: 1rem 0 0;
  color: rgba(229, 237, 240, 0.72);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.65;
}

.unified-deployment-explainer {
  max-width: 62ch;
  margin: 0.65rem 0 0;
  color: rgba(126, 225, 222, 0.78);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.015em;
  line-height: 1.55;
}

.unified-demo-note {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin: 0;
  padding: 0.68rem 1.1rem;
  border-top: 1px solid rgba(111, 176, 193, 0.15);
  color: rgba(203, 216, 222, 0.62);
  background: #08131d;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.5;
}

.unified-demo-note strong {
  flex: 0 0 auto;
  color: #8ce8e4;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ================================================================
   Simulator — ported from simulator-surveillance-mockup.html.
   Scoped entirely under #unified-simulator: its own local --sim-*
   custom properties (not :root) so it can't collide with or be
   affected by the page's own --bg/--ink/--body/--muted/--line tokens
   (site.css and premium.css both already define those names for the
   rest of the page). Class names are otherwise identical to the
   approved mockup for exact fidelity.
   ================================================================ */
.unified-simulator {
  --sim-cyan: #4be7ef;
  --sim-clear: #5ce0a5;
  --sim-monitor: #6fcddf;
  --sim-review: #eebe5a;
  --sim-alert: #f5665a;
  --sim-line: rgba(111, 176, 193, 0.22);
  --sim-bg: #0c1017;
  --sim-ink: #ffffff;
  --sim-body: #7d98a8;
  --sim-muted: #66798a;
  overflow: hidden;
  border: 1px solid var(--sim-line);
  border-radius: 4px;
  background: var(--sim-bg);
  color: var(--sim-body);
  padding: 1.4rem;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.25);
}

.unified-simulator .kick {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(120, 226, 224, 0.85);
}

/* ── controls ─────────────────────────────────────────── */
.unified-simulator .controls {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--sim-line);
}
.unified-simulator .picker {
  border: 0;
  padding: 0;
  margin: 0;
}
.unified-simulator .picker legend {
  padding: 0 0 0.6rem;
}
.unified-simulator .opts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.unified-simulator .opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  cursor: pointer;
  border: 1px solid var(--sim-line);
  background: rgba(10, 22, 32, 0.6);
  color: rgba(221, 231, 234, 0.68);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  text-align: left;
  border-radius: 2px;
}
.unified-simulator .opt b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}
.unified-simulator .opt span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--sim-muted);
}
.unified-simulator .opt.sel {
  color: #eafeff;
  border-color: #46d8d5;
  background: rgba(20, 52, 60, 0.55);
}
.unified-simulator .opt[data-scenario="passerby"] b { background: var(--sim-clear); box-shadow: 0 0 7px var(--sim-clear); }
.unified-simulator .opt[data-scenario="lingering"] b { background: var(--sim-monitor); box-shadow: 0 0 7px var(--sim-monitor); }
.unified-simulator .opt[data-scenario="gate"] b { background: var(--sim-review); box-shadow: 0 0 7px var(--sim-review); }
.unified-simulator .opt[data-scenario="breach"] b { background: var(--sim-alert); box-shadow: 0 0 7px var(--sim-alert); }
.unified-simulator .opt:focus-visible,
.unified-simulator .replay:focus-visible {
  outline: 2px solid #eafeff;
  outline-offset: 3px;
}
.unified-simulator .picker-note {
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: var(--sim-muted);
}

/* Replaying is secondary to choosing a different event, and only makes
   sense once a run has actually finished. It lives beside the outcome it
   replays and stays reserved (opacity, not display) even while hidden so
   revealing it doesn't shift anything else in the panel. */
.unified-simulator .replay {
  margin-top: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.65rem;
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid rgba(111, 176, 193, 0.35);
  background: transparent;
  color: rgba(206, 224, 230, 0.65);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 220ms ease, color 200ms ease, border-color 200ms ease;
}
.unified-simulator .replay.show { opacity: 1; }
.unified-simulator .replay:disabled { cursor: default; }
.unified-simulator .replay:not(:disabled):hover { color: #eafeff; border-color: rgba(75, 231, 239, 0.5); }

/* ── workspace ────────────────────────────────────────── */
/* The map is the primary visual explanation; the panel is supporting
   information. A fixed panel column (not a percentage split) means any
   extra width the frame gains goes to the map, not to both proportionally. */
.unified-simulator .work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 1.2rem;
  padding-top: 1.2rem;
  align-items: start;
}

/* The map and the camera feed stack in one column so the feed can dock
   below the plate instead of floating on top of it. */
.unified-simulator .map-col { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }

/* Keep the plate at its native ratio. The event log grows as entries land;
   letting the grid stretch this column made the map and overlay distort. */
.unified-simulator .map {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  min-height: 0;
  background: #06101a;
  overflow: hidden;
  border: 1px solid var(--sim-line);
}
.unified-simulator .map img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.06) brightness(0.92);
}
.unified-simulator .map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.unified-simulator .map-key {
  position: absolute;
  z-index: 4;
  left: 0.85rem;
  top: 0.85rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.unified-simulator .map-key span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(122, 170, 184, 0.25);
  background: rgba(6, 16, 24, 0.82);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(214, 232, 236, 0.72);
  font-weight: 600;
}
.unified-simulator .map-key i { width: 14px; height: 2px; flex: none; }
.unified-simulator .map-key .k-peri { background: #4be7ef; }
.unified-simulator .map-key .k-cone { background: linear-gradient(90deg, rgba(255, 214, 120, 0.85), rgba(255, 214, 120, 0.1)); height: 6px; }

.unified-simulator .protected-zone { fill: rgba(75, 231, 239, 0.045); stroke: none; }
.unified-simulator .zone-tag {
  font-family: var(--font-mono); font-size: 19px; font-weight: 600; letter-spacing: 2.4px;
  fill: rgba(190, 244, 248, 0.68); paint-order: stroke; stroke: rgba(4, 10, 15, 0.8); stroke-width: 4;
}
.unified-simulator .landmark-tag {
  font-family: var(--font-mono); font-size: 19px; font-weight: 700; letter-spacing: 2px;
  fill: rgba(232, 244, 246, 0.76); paint-order: stroke; stroke: rgba(4, 10, 15, 0.9); stroke-width: 4;
}
.unified-simulator .peri { fill: none; stroke: rgba(75, 231, 239, 0.75); stroke-width: 2.4; }
.unified-simulator .seg { fill: none; stroke: rgba(75, 231, 239, 0); stroke-width: 2.4; transition: stroke 400ms ease; }
.unified-simulator .seg.on { stroke: rgba(75, 231, 239, 0.95); }
.unified-simulator .trail { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1.4; stroke-dasharray: 5 7; }

.unified-simulator .cone { fill: url(#coneGrad); stroke: rgba(255, 214, 120, 0.4); stroke-width: 1.2; opacity: 0; transition: opacity 500ms ease; }
.unified-simulator .cam.idle .cone { opacity: 0.08; }
.unified-simulator .cam.on .cone { opacity: 0.72; }
.unified-simulator .cam-dot { fill: #0b1a22; stroke: rgba(180, 214, 222, 0.6); stroke-width: 1.6; }
.unified-simulator .cam.idle .cam-dot { stroke: rgba(180, 214, 222, 0.34); }
.unified-simulator .cam.on .cam-dot { stroke: #ffd678; fill: #221a08; }
.unified-simulator .cam-lens { fill: rgba(180, 214, 222, 0.7); }
.unified-simulator .cam.on .cam-lens { fill: #ffd678; }
.unified-simulator .cam-tag { font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: 1.6px; fill: rgba(214, 232, 236, 0.75); paint-order: stroke; stroke: rgba(4, 10, 15, 0.85); stroke-width: 4; }
.unified-simulator .cam.idle .cam-tag { fill: rgba(214, 232, 236, 0.62); }
.unified-simulator .cam.on .cam-tag { fill: #ffd678; }

/* Before an event is chosen, the sensor and the target it would track
   belong to no scenario in particular, so they stay hidden rather than
   showing wherever they were last positioned (or the (0,0) default). */
.unified-simulator .evt-marker { opacity: 0; transition: opacity 260ms ease; }
.unified-simulator .evt-marker.on { opacity: 1; }

.unified-simulator .sensor-ring { fill: none; stroke: rgba(75, 231, 239, 0.55); stroke-width: 2; }
.unified-simulator .sensor-core { fill: #4be7ef; }
.unified-simulator .sensor-tag { font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: 1.4px; fill: rgba(190, 244, 248, 0.92); paint-order: stroke; stroke: rgba(4, 10, 15, 0.85); stroke-width: 4; }

.unified-simulator .tgt-halo { fill: rgba(255, 255, 255, 0.10); }
.unified-simulator .tgt-halo.tracked { fill: rgba(255, 214, 120, 0.16); }
.unified-simulator .tgt-dot { fill: #ffffff; }
.unified-simulator .tgt-box { fill: none; stroke: #ffd678; stroke-width: 2; opacity: 0; transition: opacity 300ms ease; }
.unified-simulator .tgt-box.on { opacity: 0.95; }
.unified-simulator .tgt-tag { font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: 1.4px; fill: #ffffff; paint-order: stroke; stroke: rgba(4, 10, 15, 0.9); stroke-width: 4.5; }

.unified-simulator .link { fill: none; stroke-width: 2; stroke-dasharray: 7 7; opacity: 0; transition: opacity 400ms ease; }
.unified-simulator .link.on { opacity: 0.78; }
.unified-simulator .link.cue { stroke: rgba(255, 214, 120, 0.55); stroke-dasharray: 4 8; }
.unified-simulator .link.relay { stroke: rgba(75, 231, 239, 0.8); }

.unified-simulator .node-dot { fill: #0b1a22; stroke: rgba(180, 214, 222, 0.7); stroke-width: 1.6; }
.unified-simulator .node-tag { font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: 1.4px; fill: rgba(214, 232, 236, 0.8); paint-order: stroke; stroke: rgba(4, 10, 15, 0.85); stroke-width: 4; }
.unified-simulator .node-subtag { font-family: var(--font-mono); font-size: 15px; font-weight: 600; letter-spacing: 1.2px; fill: rgba(214, 232, 236, 0.74); paint-order: stroke; stroke: rgba(4, 10, 15, 0.85); stroke-width: 3.5; }

/* ── map <-> log coupling ────────────────────────────── */
/* Every log line names a thing that is drawn on the map, and says so in
   the same type the map label uses. When the line lands, the element it
   names flashes; hovering the line later lights it again. Without this
   the two columns are just two lists that happen to sit side by side. */
.unified-simulator .ping-ring { fill: none; stroke: #ffd678; stroke-width: 3; opacity: 0; }
.unified-simulator .ping .ping-ring { animation: sim-ping 1100ms ease-out 1; }
.unified-simulator .is-focus .cam-dot,
.unified-simulator .is-focus .node-dot { stroke: #ffd678; stroke-width: 3.4; }
.unified-simulator .is-focus .cam-tag,
.unified-simulator .is-focus .node-tag,
.unified-simulator .is-focus .node-subtag,
.unified-simulator .is-focus .sensor-tag { fill: #ffd678; }
.unified-simulator .is-focus .sensor-ring { stroke: #ffd678; stroke-width: 3.4; }
.unified-simulator .is-focus .tgt-halo { fill: rgba(255, 214, 120, 0.3); }

.unified-simulator .tag {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.72em;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 0.1em 0.35em;
  border: 1px solid currentColor; border-radius: 2px; white-space: nowrap;
}
.unified-simulator .tag-cam { color: #ffd678; }
.unified-simulator .tag-sensor { color: var(--sim-cyan); }
.unified-simulator .tag-node { color: rgba(214, 232, 236, 0.8); }
.unified-simulator .entry.linked { cursor: pointer; }
.unified-simulator .entry.linked:hover { background: rgba(255, 214, 120, 0.07); }

/* ── camera feed inset ───────────────────────────────── */
/* Docked at the end of the map column: a fixed-width card the same width
   whether it sits over grass or sky, so it reads as a device readout
   rather than a second little photograph of the estate. */
.unified-simulator .feed {
  width: 250px; align-self: flex-start;
  border: 1px solid transparent; background: #050d13;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 320ms ease, opacity 280ms ease, border-color 280ms ease;
}
.unified-simulator .feed.on {
  max-height: 240px; opacity: 1;
  border-color: rgba(255, 214, 120, 0.35);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
/* A ground-level look, not a second aerial photo: sky over a dark tree
   line over a foreground plane. It is a stylised placeholder scene, not
   a crop of the overhead plate wearing a fake perspective. */
.unified-simulator .feed-view {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  /* A worn path receding to the horizon: one honest orientation cue (this
     is ground, viewed at an angle) without drawing a scene or a figure. */
  background:
    conic-gradient(at 50% 39%, transparent 0deg 171deg, rgba(160, 166, 132, 0.32) 175deg 185deg, transparent 189deg 360deg),
    linear-gradient(180deg, #7d97a3 0%, #a7bfc6 37%, #4a5a3c 39%, #212c19 100%);
}
.unified-simulator .feed-view::before {
  content: ''; position: absolute; left: -6%; right: -6%; top: 27%; height: 15%;
  background-image:
    radial-gradient(circle at 6% 65%, #16210e 0 42%, transparent 44%),
    radial-gradient(circle at 22% 40%, #1a2712 0 48%, transparent 50%),
    radial-gradient(circle at 40% 60%, #16210e 0 44%, transparent 46%),
    radial-gradient(circle at 58% 38%, #1a2712 0 50%, transparent 52%),
    radial-gradient(circle at 75% 58%, #16210e 0 44%, transparent 46%),
    radial-gradient(circle at 92% 42%, #1a2712 0 46%, transparent 48%),
    radial-gradient(circle at 106% 62%, #16210e 0 40%, transparent 42%);
  background-repeat: no-repeat;
  opacity: 0.9;
}
.unified-simulator .feed-view::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.unified-simulator .feed-ret { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.unified-simulator .feed-ret i {
  position: absolute; left: 0; top: 0; width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border: 1px solid rgba(255, 214, 120, 0.9);
  clip-path: polygon(0 0, 34% 0, 34% 8%, 8% 8%, 8% 34%, 0 34%, 0 66%, 8% 66%, 8% 92%, 34% 92%, 34% 100%, 0 100%, 100% 100%, 66% 100%, 66% 92%, 92% 92%, 92% 66%, 100% 66%, 100% 34%, 92% 34%, 92% 8%, 66% 8%, 66% 0, 100% 0);
  animation: none;
}
.unified-simulator .feed.on .feed-ret i { animation: sim-ret 1.8s ease-in-out 2; }
/* The subject is a marker, not a drawing. The plate has no person in it,
   and inventing one - a body from above, or worse a face - claims detail
   the system does not produce. A ring on the spot, with the bar below
   naming what it is, is the honest version and the legible one. */
.unified-simulator .feed-mark { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.unified-simulator .feed-mark .core {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px;
  border-radius: 50%; background: #ffd678; box-shadow: 0 0 10px rgba(255, 214, 120, 0.9);
}
.unified-simulator .feed-mark .ring {
  position: absolute; left: -17px; top: -17px; width: 34px; height: 34px;
  border: 1.5px solid rgba(255, 214, 120, 0.85); border-radius: 50%;
}
.unified-simulator .feed-mark .pulse {
  position: absolute; left: -17px; top: -17px; width: 34px; height: 34px;
  border: 1.5px solid rgba(255, 214, 120, 0.7); border-radius: 50%;
  animation: none;
}
.unified-simulator .feed.on .feed-mark .pulse { animation: sim-mark-pulse 1.8s ease-out 2; }

.unified-simulator .feed-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.55rem; border-top: 1px solid rgba(255, 214, 120, 0.25);
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 214, 120, 0.9); font-weight: 700;
}
.unified-simulator .feed-bar em { font-style: normal; color: rgba(214, 232, 236, 0.6); letter-spacing: 0.06em; }
.unified-simulator .feed-rec { display: inline-flex; align-items: center; gap: 0.3rem; }
.unified-simulator .feed-rec i { width: 6px; height: 6px; border-radius: 50%; background: #f5665a; }

/* ── log panel ────────────────────────────────────────── */
.unified-simulator .panel { border: 1px solid var(--sim-line); background: rgba(8, 18, 26, 0.7); display: flex; flex-direction: column; min-height: 0; }

/* The uplink's destination, docked to the log rather than drawn on the
   grass. It sits at the top of the column the uplink points at. */
.unified-simulator .team-strip {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--sim-line); background: rgba(6, 14, 21, 0.75);
  transition: border-color 300ms ease, background 300ms ease;
}
.unified-simulator .team-ico { width: 22px; height: 22px; flex: none; color: rgba(180, 214, 222, 0.7); }
.unified-simulator .team-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.unified-simulator .team-copy { flex: 1; min-width: 0; line-height: 1.3; }
.unified-simulator .team-copy b { display: block; font-size: 0.82rem; color: #e6f2f4; font-weight: 600; }
.unified-simulator .team-copy em {
  display: block; font-style: normal; font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.04em; color: var(--sim-muted);
}
.unified-simulator .team-state {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(214, 232, 236, 0.6);
  border: 1px solid rgba(122, 170, 184, 0.3); padding: 0.28rem 0.42rem; white-space: nowrap;
}
/* Tone matches the same clear/monitor/review/alert vocabulary as the
   outcome card, so "harmless" and "urgent" look as different here as
   they do there - a passerby should not read as an escalation. */
.unified-simulator .team-strip.clear { background: rgba(92, 224, 165, 0.07); border-bottom-color: rgba(92, 224, 165, 0.4); }
.unified-simulator .team-strip.clear .team-ico, .unified-simulator .team-strip.clear .team-state { color: var(--sim-clear); border-color: rgba(92, 224, 165, 0.5); }
.unified-simulator .team-strip.monitor { background: rgba(111, 205, 223, 0.07); border-bottom-color: rgba(111, 205, 223, 0.4); }
.unified-simulator .team-strip.monitor .team-ico, .unified-simulator .team-strip.monitor .team-state { color: var(--sim-monitor); border-color: rgba(111, 205, 223, 0.5); }
.unified-simulator .team-strip.review { background: rgba(238, 190, 90, 0.08); border-bottom-color: rgba(238, 190, 90, 0.45); }
.unified-simulator .team-strip.review .team-ico, .unified-simulator .team-strip.review .team-state { color: var(--sim-review); border-color: rgba(238, 190, 90, 0.5); }
.unified-simulator .team-strip.alert { background: rgba(245, 102, 90, 0.09); border-bottom-color: rgba(245, 102, 90, 0.5); }
.unified-simulator .team-strip.alert .team-ico, .unified-simulator .team-strip.alert .team-state { color: var(--sim-alert); border-color: rgba(245, 102, 90, 0.5); }
.unified-simulator .team-strip.ping { animation: sim-strip-ping 1100ms ease-out 1; }
.unified-simulator .team-strip.is-focus { background: rgba(255, 214, 120, 0.1); border-bottom-color: rgba(255, 214, 120, 0.55); }
.unified-simulator .panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.1rem 0.9rem; border-bottom: 1px solid var(--sim-line); }
.unified-simulator .panel-head h3 { font-family: var(--font-display); font-size: 1.3rem; color: #f2f6f7; line-height: 1.1; margin-top: 0.35rem; }
.unified-simulator .state {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.35rem 0.5rem; border: 1px solid rgba(122, 170, 184, 0.3); color: rgba(214, 232, 236, 0.7); white-space: nowrap;
}
.unified-simulator .state.live { color: #ffd678; border-color: rgba(255, 214, 120, 0.5); background: rgba(255, 214, 120, 0.08); }
.unified-simulator .state.done { color: #eafeff; border-color: rgba(75, 231, 239, 0.5); }

.unified-simulator .loc { padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--sim-line); }
.unified-simulator .loc.meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.unified-simulator .loc.meta > div { min-width: 0; }
.unified-simulator #p-class { color: #ffd678; }
.unified-simulator #p-class.unknown { color: rgba(214, 232, 236, 0.55); }
.unified-simulator #p-title { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.03em; color: rgba(214, 232, 236, 0.68); font-weight: 500; }
.unified-simulator .loc strong { display: block; color: #eaf6f8; font-size: 0.92rem; margin-top: 0.3rem; }
.unified-simulator .loc span.d { display: block; font-size: 0.76rem; color: var(--sim-muted); margin-top: 0.15rem; }

/* Fixed, not max-height with flex:1: with only a cap and no floor, the log
   grew from its empty placeholder up toward the cap as entries landed, and
   the whole card visibly resized along with it. `flex:1` sets flex-basis
   to 0%, which overrides an explicit height as the flex item's main-axis
   size in a column flex container -- so height alone was silently ignored
   and the log kept sizing to its content anyway. `flex: none` lets the
   height actually apply: the log is 430px in every state, and new entries
   scroll into a box that was already that size instead of growing it. */
.unified-simulator .log { flex: none; overflow-y: auto; padding: 0.7rem 0.55rem 0.9rem; height: 430px; scrollbar-width: thin; }
.unified-simulator .log-empty { padding: 1.6rem 0.8rem; font-family: var(--font-mono); font-size: 0.72rem; color: rgba(125, 152, 168, 0.7); line-height: 1.7; }
.unified-simulator .log-empty b { display: block; color: rgba(214, 232, 236, 0.75); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.62rem; margin-bottom: 0.4rem; }

.unified-simulator .entry {
  display: grid; grid-template-columns: 62px 1fr; gap: 0.55rem; padding: 0.42rem 0.55rem;
  font-size: 0.79rem; line-height: 1.45; color: rgba(206, 224, 230, 0.82);
  border-left: 2px solid transparent; animation: sim-enter 260ms ease both;
}
.unified-simulator .entry time { font-family: var(--font-mono); font-size: 0.6rem; color: rgba(125, 152, 168, 0.55); padding-top: 0.17rem; }
.unified-simulator .entry .src { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(120, 226, 224, 0.75); display: block; margin-bottom: 0.1rem; }
.unified-simulator .entry[data-src="cam"] .src { color: #ffd678; }
.unified-simulator .entry[data-src="alert"] .src { color: var(--sim-alert); }
.unified-simulator .entry[data-src="result"] .src { color: var(--sim-clear); }
.unified-simulator .entry.new { border-left-color: rgba(255, 214, 120, 0.85); background: rgba(255, 214, 120, 0.05); color: #eef8fa; }
.unified-simulator .entry.new .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ffd678; margin-left: 0.4rem; vertical-align: middle; animation: sim-blink 1s ease-in-out infinite; }

.unified-simulator .outcome { padding: 1rem 1.1rem 1.2rem; border-top: 1px solid var(--sim-line); background: rgba(6, 14, 21, 0.6); }
.unified-simulator .outcome strong { display: block; font-family: var(--font-display); font-size: 1.3rem; color: #eef7f8; margin-top: 0.3rem; }
.unified-simulator .outcome p { font-size: 0.78rem; color: var(--sim-muted); margin-top: 0.25rem; line-height: 1.5; }
.unified-simulator .outcome[data-tone="clear"] { border-top-color: rgba(92, 224, 165, 0.5); }
.unified-simulator .outcome[data-tone="monitor"] { border-top-color: rgba(111, 205, 223, 0.5); }
.unified-simulator .outcome[data-tone="review"] { border-top-color: rgba(238, 190, 90, 0.5); }
.unified-simulator .outcome[data-tone="alert"] { border-top-color: rgba(245, 102, 90, 0.6); }
.unified-simulator .outcome[data-tone="clear"] strong { color: var(--sim-clear); }
.unified-simulator .outcome[data-tone="monitor"] strong { color: var(--sim-monitor); }
.unified-simulator .outcome[data-tone="review"] strong { color: var(--sim-review); }
.unified-simulator .outcome[data-tone="alert"] strong { color: var(--sim-alert); }

@keyframes sim-ping {
  0% { r: 10px; opacity: 0.95; stroke-width: 4; }
  100% { r: 46px; opacity: 0; stroke-width: 1; }
}
@keyframes sim-ret { 50% { transform: scale(1.12); } }
@keyframes sim-mark-pulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.1); opacity: 0; }
}
@keyframes sim-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes sim-blink { 50% { opacity: 0.25; } }
@keyframes sim-strip-ping { 0% { box-shadow: inset 0 0 0 2px rgba(255, 214, 120, 0.9); } 100% { box-shadow: inset 0 0 0 2px rgba(255, 214, 120, 0); } }

.leopard-support {
  margin-top: 1.5rem;
  border-top: 1px solid rgba(111, 176, 193, 0.2);
  border-bottom: 1px solid rgba(111, 176, 193, 0.2);
}

.leopard-support summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.35rem 0;
  color: #eaf0f1;
  cursor: pointer;
  list-style: none;
}

.leopard-support summary::-webkit-details-marker { display: none; }

.leopard-support summary > span:first-child {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.leopard-support summary strong {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 600;
}

.leopard-summary-action {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(138, 226, 222, 0.72);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.leopard-summary-action i {
  font-size: 1rem;
  font-style: normal;
  transition: transform 180ms ease;
}

.leopard-support[open] .leopard-summary-action i {
  transform: rotate(45deg);
}

.leopard-stage-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0 0 1.5rem;
  list-style: none;
}

.leopard-stage-list li {
  min-width: 0;
  padding: 1rem;
  border-top: 1px solid rgba(111, 176, 193, 0.15);
  border-left: 1px solid rgba(111, 176, 193, 0.12);
}

.leopard-stage-list li:last-child {
  border-right: 1px solid rgba(111, 176, 193, 0.12);
}

.leopard-stage-list li > span {
  display: block;
  margin-bottom: 0.55rem;
  color: #69e1dc;
  font-family: var(--font-mono);
  font-size: 0.65rem;
}

.leopard-stage-list strong {
  display: block;
  color: #e7eff0;
  font-size: 0.76rem;
  font-weight: 600;
}

.leopard-stage-list p {
  margin: 0.45rem 0 0;
  color: rgba(205, 218, 222, 0.48);
  font-size: 0.66rem;
  line-height: 1.5;
}

@media (max-width: 920px) {
  .unified-deployment-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.25rem;
  }

  .leopard-stage-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .leopard-stage-list li:nth-child(4n + 1) { border-left: 1px solid rgba(111, 176, 193, 0.12); }
}

@media (max-width: 1080px) {
  .unified-simulator .work { grid-template-columns: 1fr; }
  .unified-simulator .opts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .unified-deployment-section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .unified-deployment-header { margin-bottom: 1.5rem; }
  .unified-deployment-header .ops-title { max-width: 18ch; }
  .unified-deployment-explainer { font-size: 0.72rem; }
  .unified-demo-note { align-items: flex-start; flex-direction: column; gap: 0.22rem; padding: 0.65rem 0.75rem; }

  /* The map is this section's primary visual, but it was boxed inside two
     nested paddings — rendering at 312px on a 375px screen, which shrank
     everything drawn on the plate along with it. Running the card and the
     map edge to edge gives the plate ~20% more width, and every label on
     it scales up for free. The card drops its side borders so the map band
     doesn't cut through them, and overflow has to go visible for the map
     to escape at all. html/body already carry overflow-x: clip, so the
     100vw can't raise a scrollbar.

     Centred with margin rather than translateX(-50%) on purpose: the card
     is a [data-reveal] element, and the scroll-reveal rules in
     animations.css set transform on it at a higher specificity, so a
     transform here is silently overridden and the card lands off-screen. */
  .unified-simulator,
  .unified-simulator .map {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-left: 0;
    border-right: 0;
  }
  .unified-simulator { padding: 0.9rem; overflow: visible; }
  /* At the fixed 160px this inherited from desktop, the card was left-docked
     in a full-width mobile column, stranding most of the row as dead space
     beside it. Centering it and widening it a bit keeps the "device readout"
     card look (still well short of the map's full width) without the
     lopsided gap. */
  .unified-simulator .feed { width: 220px; align-self: center; }
  /* Feed bar keeps the base 0.58rem: 0.48rem rendered at under 8px on a
     phone, and every status the bar shows ("Vehicle confirmed" is the
     longest) still fits the 220px card on one line at the base size. The
     map key steps down less for the same reason, 0.56rem instead of 0.48. */
  .unified-simulator .feed-bar { padding: 0.3rem 0.4rem; }
  .unified-simulator .map-key { left: 0.55rem; top: 0.55rem; right: 0.55rem; gap: 0.25rem; }
  .unified-simulator .map-key span { padding: 0.25rem 0.35rem; font-size: 0.56rem; letter-spacing: 0.06em; }
  /* 28px tall as inherited from desktop; a thumb needs more. */
  .unified-simulator .replay { min-height: 2.6rem; padding-inline: 0.9rem; }

  /* The map labels are SVG text sized in the plate's own 1672-wide
     coordinate space, so they shrink right along with the photo — at a
     ~340px-wide phone column that scale factor is ~0.2, turning a 22px
     label into a ~4-5px smear. Bumping the raw font-size (and its outline
     stroke, in the same units) here is what actually renders bigger on
     screen; a CSS font-size on the container wouldn't reach into the SVG.

     Sized down from a first pass at 46/50. That was legible but too big for
     the plate to hold: nine labels at that size collided in all four
     scenarios and pushed the edge ones outside the frame. The full-bleed
     above already bought ~20% of apparent size, so 35/38 still lands around
     8px on a 375px screen while leaving the boxes small enough to coexist. */
  .unified-simulator .zone-tag,
  .unified-simulator .landmark-tag { font-size: 35px; }
  .unified-simulator .cam-tag,
  .unified-simulator .sensor-tag,
  .unified-simulator .tgt-tag { font-size: 38px; }

  /* Over parkland the thin outline these carry by default leaves the text
     fighting the grass and tree line behind it. The overview figure solves
     the same problem with solid chips behind its labels, but those are HTML
     overlays — SVG text has no background, so a chip would mean measuring
     each label and injecting a <rect>. A heavier, near-opaque knockout
     halo buys most of that separation with no markup change. Held at ~0.28
     of the font size, since the stroke is centred on the glyph outline and
     half of it eats inward — heavier ratios start closing up the counters
     in the mono face. */
  .unified-simulator .zone-tag,
  .unified-simulator .landmark-tag,
  .unified-simulator .cam-tag,
  .unified-simulator .sensor-tag,
  .unified-simulator .tgt-tag {
    stroke: rgba(4, 10, 15, 0.95);
    stroke-width: 10;
    stroke-linejoin: round;
  }

  /* HOME / ON-SITE SECURITY COMPUTER are fixed at the house regardless of
     event, so whenever a scenario's own labels (PERSON, WEST BOUNDARY
     SENSOR, etc.) land near the house they collide. HOME is redundant with
     the obviously-a-mansion photo, so it backs off in favor of the active
     event's labels on the tight mobile column — but SECURITY COMPUTER
     stays: the event log later names it by that label ("...sent to the
     ON-SITE SECURITY COMPUTER"), so the map needs to keep pointing at it. */
  .unified-simulator .node-tag { display: none; }
  /* At this bigger, legible font the label is wide enough that when an
     event's own sensor tag lands at the same height (Passerby's west
     boundary sensor sits at the same y as the house), the two run into
     each other. Dropping this one below that band clears it without
     moving or hiding the event's own label. */
  /* Halo scaled to this label's smaller size, matching the 14/50 ratio the
     larger tags above use. */
  .unified-simulator .node-subtag {
    font-size: 30px;
    stroke: rgba(4, 10, 15, 0.95);
    stroke-width: 8;
    stroke-linejoin: round;
    transform: translateY(60px);
  }

  .leopard-support summary { align-items: flex-start; flex-direction: column; gap: 0.8rem; }
  .leopard-support summary > span:first-child { align-items: flex-start; flex-direction: column; gap: 0.55rem; }
  .leopard-stage-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Scoped to the simulator only — a blanket page-wide reduced-motion reset
   would also flatten unrelated animations elsewhere on this page (the
   overview graphic, scroll reveals, hero motion). */
@media (prefers-reduced-motion: reduce) {
  #unified-simulator,
  #unified-simulator *,
  #unified-simulator *::before,
  #unified-simulator *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}