/* Each explanation belongs to its figure. No stage labels or extra rules. */
.em-diagram {container:em / inline-size}
.em-stages {display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}
.em-stage {display:grid;gap:1rem;min-width:0;margin:0}
.em-art {display:grid;align-items:center;aspect-ratio:38/17;min-width:0}
.em-art svg {display:block;width:100%;height:auto}
.em-stage:last-child .em-art {aspect-ratio:20/17;justify-items:center}
.em-stage:last-child .em-art svg {width:82%}
.em-stage figcaption {max-width:55ch;color:#526052;font:400 clamp(1rem,1.1vw,1.2rem)/1.55 var(--font-body,Inter),sans-serif;text-wrap:pretty}
@container em (max-width:44em) {
 .em-stages {grid-template-columns:1fr;gap:2rem}
 .em-stage:last-child .em-art {width:65%;justify-self:center}
}
.em-wave {fill:none;stroke:#707570;stroke-width:1.4;vector-effect:non-scaling-stroke}
.em-echo {fill:none;stroke:var(--em-echo,#b44c35);stroke-width:var(--em-echo-width,1.3);vector-effect:non-scaling-stroke}

/* The product toolkit shares three cards across desktop and phone layouts. */
.tl-page .tl-content--em {padding-block:0;border-top:0}
.tl-page #engagement-outcomes {background:#586c7c;color:#f0f1ed;margin-inline:calc(-1 * var(--page-gutter));padding:clamp(3rem,6vw,6rem) var(--page-gutter)}
#engagement-outcomes h2 {color:inherit}
#engagement-outcomes .em-cards {--eng-card:#e7ecef;--eng-card-rule:#ccd6dd;--eng-gap:clamp(.75rem,1.4vw,1.25rem);min-width:0}
#engagement-outcomes .engineering-stages {grid-template-columns:repeat(3,minmax(0,1fr))}
#engagement-outcomes .em-card {width:auto;justify-self:stretch;color:#2e3e4a}
#engagement-outcomes .em-card .eng-description {color:#5d6b76}
#engagement-outcomes .em-card-art svg {display:block;width:100%;height:auto}
#engagement-outcomes .snap-dots button::before {background:#f0f1ed}
/* Bring the desktop blue panel in from the left below the drone copy. */
@media(min-width:851px) {
 .tl-page #drones {position:relative;isolation:isolate}
 .tl-page #drones::before {content:'';position:absolute;inset:-1px calc(-1 * var(--page-gutter)) 0;z-index:-1;pointer-events:none;background:#586c7c;clip-path:polygon(0 35%,100% 100%,0 100%)}
}
/* Outgoing radar wavefronts and the aircraft's returning echo. */
#engagement-outcomes .em-card-scene .em-wave {stroke:#587384;stroke-width:2;stroke-opacity:1;opacity:.7;transform-box:view-box;transform-origin:var(--em-wave-x) var(--em-wave-y);animation:em-radar-travel 1s linear infinite}
#engagement-outcomes .em-card-scene .em-echo {animation:em-pulse 2.6s linear infinite;animation-delay:calc(1.3s + var(--i) * .11s)}
@keyframes em-radar-travel {from{opacity:var(--em-wave-start);transform:scale(1)}to{opacity:var(--em-wave-end);transform:scale(var(--em-wave-scale))}}
@keyframes em-pulse {0%,100%{opacity:.3}10%{opacity:1}28%{opacity:.3}}
@media(max-width:850px) {
 #engagement-outcomes .engineering-stages {grid-template-columns:1fr}
 #engagement-outcomes .em-card {width:min(100%,32rem);justify-self:center}
}
@media(prefers-reduced-motion:reduce) {
 #engagement-outcomes .em-card-scene :is(.em-wave,.em-echo) {animation:none}
}

.em-doc-page {fill:#f6f5f1;stroke:#bac3b5;stroke-width:1;vector-effect:non-scaling-stroke}
.em-doc-mid {fill:#f1f0eb}
.em-doc-back {fill:#ebeae4}
.em-doc-rule {fill:none;stroke:#d3d8cc;stroke-width:1;vector-effect:non-scaling-stroke}
.em-doc-axis {fill:none;stroke:#aab5a3;stroke-width:1;vector-effect:non-scaling-stroke}
.em-doc-title {fill:#3e584c;opacity:.85}
.em-doc-text {fill:#c9d0c3}
.em-doc-accent {fill:#b44c35;opacity:.8}
.em-doc-bar {fill:#b9c7b4}
.em-doc-curve {fill:none;stroke:#3e584c;stroke-width:1.5;vector-effect:non-scaling-stroke}
.em-doc-trend {fill:none;stroke:#526d50;stroke-width:1.4;vector-effect:non-scaling-stroke}
.em-doc-marker {stroke:#b44c35;stroke-width:1;vector-effect:non-scaling-stroke}
.em-doc-dot {fill:#b44c35}

/* ?tune panel (never shown to visitors). */
.em-tuner {position:fixed;right:0.75rem;bottom:0.75rem;z-index:80;width:18.125rem;max-height:80vh;overflow:auto;padding:0.75rem;background:#fffffff2;border:0.0625rem solid #bac3b5;border-radius:0.25rem;font:0.6875rem/1.3 Inter,sans-serif;color:#2d3b32;box-shadow:0 0.375rem 1.5rem #0002}
.em-tuner strong {display:block;margin-bottom:0.5rem;font-size:0.75rem}
.em-tuner label {display:grid;grid-template-columns:5.75rem 1fr 2.375rem;align-items:center;gap:0.375rem;margin:0.1875rem 0}
.em-tuner input[type=color] {grid-column:2/4;height:1.25rem;padding:0;border:0}
.em-tuner output {text-align:right;font-variant-numeric:tabular-nums}
.em-tuner button {margin:0.5rem 0.375rem 0.375rem 0;font:inherit;padding:0.25rem 0.625rem}
.em-tuner textarea {width:100%;font:0.625rem/1.3 ui-monospace,monospace}