/* Home Products orbit: five products ride the ring around the platform, in training order.
   Base: a list with every product open (no JS, print). With JS: the ring carousel. Wide screens draw it on a stage
   900 units tall and 1312 to 2165 units wide: on wide screens the ring stretches sideways to use the width while the
   truck and card keep their size (1 unit = 1/900 of the stage height, so sizes are in cqh). Narrow screens use a
   400 x 300 field above the selected card. Either way the stage and the
   selected card fit in one screen below the sticky header at 100% zoom: the stage is sized from the viewport height too
   (--hpo-top and --hpo-card are measured by the script; the values here are fallbacks). */
#products.hpo{--hpo-ink:var(--mh-text,#13171d);--hpo-ink-2:var(--mh-text-2,#35414d);--hpo-muted:var(--mh-muted,#53606c);--hpo-signal:var(--mh-signal,#c41e3a);--hpo-line:#7c8794;--hpo-echo:var(--mh-line-2,#ccd2d9);--hpo-rule:var(--mh-line-3,#a9b3be);--hpo-bg:var(--mh-void,#f1f3f5);--hpo-shadow:19 23 29;--hpo-ease:cubic-bezier(.16,1,.3,1);color:var(--hpo-ink);background:var(--hpo-bg)}
html[data-theme="dark"] #products.hpo{--hpo-line:#697584;--hpo-shadow:0 0 0;--hpo-cat-training:#8EC9F2;--hpo-cat-research:#E8B84E}
/* Category colours: light blue for training support, the red accent for maintenance support, amber for research and
   engineering (the three stay apart for red-green colour blindness) */
#products.hpo{--hpo-cat-training:#2F7FC1;--hpo-cat-maintenance:var(--hpo-signal);--hpo-cat-research:#B07A12}
#products.hpo{--hpo-vh:100vh}
@supports(height:100svh){#products.hpo{--hpo-vh:100svh}}
#products .hpo__inner{max-width:2560px;margin-inline:auto;padding:0 0 40px}
#products .hpo__heading{display:flex;align-items:flex-end;justify-content:space-between;gap:50px}
#products .hpo__eyebrow{font:600 15px/1.4 Poppins,sans-serif;color:var(--hpo-muted);margin:0 0 17px}
#products .hpo__title{font:500 clamp(32px,3.1vw,44px)/1.18 Poppins,sans-serif;letter-spacing:-.045em;margin:0}
#products .hpo__catalog,#products .hpo__cta{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:inherit;text-decoration:none;font:600 17px/1.35 Assistant,sans-serif}
#products .hpo__catalog{gap:15px;flex:none;margin-bottom:4px}
#products .hpo__catalog:hover,#products .hpo__cta:hover{color:var(--hpo-signal)}
#products .hpo__arrow{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
#products.hpo a:focus-visible,#products.hpo button:focus-visible{outline:2px solid var(--hpo-signal);outline-offset:6px}

/* Base list */
#products .hpo__stage{position:relative;margin-top:26px}
#products .hpo__ring,#products .hpo__cap,#products .hpo__canvas,#products .hpo__pods,#products .hpo__launch,#products .hpo__hud,#products .hpo__compass{display:none}
#products .hpo__live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
#products .hpo__platform{position:relative;width:100%;max-width:620px;margin:0 auto 6px;aspect-ratio:960/600}
#products .hpo__poster{position:absolute;inset:0 0 auto;width:100%;height:auto;aspect-ratio:960/560;object-fit:contain}
#products .hpo__mini{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#products .hpo__mini-line{fill:none;stroke:var(--hpo-line);stroke-width:1.5;vector-effect:non-scaling-stroke}
#products .hpo__mini-dot{fill:var(--hpo-bg);stroke:var(--hpo-line);stroke-width:1.5;vector-effect:non-scaling-stroke}
#products .hpo__mini-now{fill:var(--hpo-signal)}
#products .hpo__mini-cap{display:flex;justify-content:center;gap:10px;align-items:baseline;margin:0 0 14px;color:var(--hpo-muted);font:400 13px/1.4 Assistant,sans-serif}
#products .hpo__mini-cap b,#products .hpo__cap b{font:500 16px/1.3 Poppins,sans-serif;color:var(--hpo-ink);letter-spacing:-.03em}
#products .hpo__list{list-style:none;margin:0;padding:0}
#products .hpo__item{display:grid;grid-template-columns:64px 1fr;gap:0 16px;align-items:start;padding:18px 0;border-top:1px solid var(--mh-line-2,#ccd2d9)}
#products .hpo__node{grid-column:1;grid-row:1;display:block;width:64px;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:none}
#products .hpo__disc{display:block;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.5px var(--hpo-rule)}
#products .hpo__disc img{display:block;width:100%;height:100%;object-fit:cover}
#products .hpo__nodename{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
#products .hpo__card{grid-column:2}
#products .hpo__verb{display:block;font:600 14px/1.3 Poppins,sans-serif;color:var(--hpo-signal);margin:0 0 2px}
#products .hpo__name{margin:0;font:500 20px/1.3 Poppins,sans-serif;letter-spacing:-.035em}
#products .hpo__lead{margin:6px 0 0;font:500 16px/1.45 Assistant,sans-serif;color:var(--hpo-ink-2)}
#products .hpo__desc{margin:4px 0 0;font:400 15.5px/1.5 Assistant,sans-serif;color:var(--hpo-muted)}
#products .hpo__cta{font-size:16px;margin-top:4px}
#products .hpo__cta .hpo__arrow{width:19px;height:19px}

/* With JS: the ring carousel (wide-screen geometry; narrow screens adjust it below) */
.mh-js #products .hpo__inner{container-type:inline-size}
.mh-js #products .hpo__stage{margin-bottom:max(0px,var(--hpo-card,240px) + 26px - var(--hpo-h) * 232 / 900) !important;container-type:size;--hpo-h:min(1207px,100cqw * 900 / 1312,max(288px,(var(--hpo-vh) - var(--hpo-top,104px) - var(--hpo-card,240px) - 42px) * 900 / 668));height:var(--hpo-h);width:min(100%,var(--hpo-h) * 2165 / 900);margin:30px auto 0}
.mh-js #products .hpo__ring{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.mh-js #products .hpo__ring--back{z-index:0}
.mh-js #products .hpo__ring--front{z-index:2}
.mh-js #products .hpo__ring path{fill:none;vector-effect:non-scaling-stroke}
.mh-js #products .hpo__line{stroke:var(--hpo-line);stroke-width:1.5}
.mh-js #products .hpo__echo{stroke:var(--hpo-echo);stroke-width:1;stroke-dasharray:1 7;stroke-linecap:round}
.mh-js #products .hpo__ground{fill:url(#hpo-ground)}
/* Category floor under the ring: very faint, neutral for training support, the red accent for maintenance support */
.mh-js #products .hpo__ring .hpo__zone{stroke:none;vector-effect:none}
.mh-js #products.hpo--many .hpo__ring .hpo__line{display:none}
.mh-js #products .hpo__ring path.hpo__zone--training{fill:var(--hpo-cat-training);fill-opacity:.14}
.mh-js #products .hpo__ring path.hpo__zone--maintenance{fill:var(--hpo-cat-maintenance);fill-opacity:.13}
.mh-js #products .hpo__ring path.hpo__zone--research{fill:var(--hpo-cat-research);fill-opacity:.16}
.mh-js #products .hpo__ring .hpo__zone{transition:fill-opacity .35s}
/* the lens: other categories' floor and discs step back */
.mh-js #products[data-lens] .hpo__ring path.hpo__zone{fill-opacity:.05}
.mh-js #products[data-lens="training"] .hpo__ring path.hpo__zone--training,.mh-js #products[data-lens="maintenance"] .hpo__ring path.hpo__zone--maintenance,.mh-js #products[data-lens="research"] .hpo__ring path.hpo__zone--research{fill-opacity:.24}
.mh-js #products[data-lens="training"] .hpo__item:not([data-cat="training"]) .hpo__node,.mh-js #products[data-lens="maintenance"] .hpo__item:not([data-cat="maintenance"]) .hpo__node,.mh-js #products[data-lens="research"] .hpo__item:not([data-cat="research"]) .hpo__node{opacity:.4}
.mh-js #products .hpo__ring .hpo__zone-edge{stroke:var(--hpo-line);stroke-width:1;opacity:.5}
.mh-js #products .hpo__zone-name{font-family:'IBM Plex Mono',monospace;font-weight:500;letter-spacing:.12em;fill:var(--hpo-muted);opacity:.75}
.mh-js #products .hpo__ground-stop{stop-color:rgb(var(--hpo-shadow)/.22)}
html[data-theme="dark"].mh-js #products .hpo__ground-stop{stop-color:rgb(0 0 0/.22)}
.mh-js #products .hpo__ground-stop--out{stop-color:rgb(var(--hpo-shadow)/0)}

.mh-js #products .hpo__platform{position:absolute;z-index:1;left:calc(50% - 53.333cqh);top:0;width:106.667cqh;max-width:none;aspect-ratio:960/560;margin:0}
.mh-js #products .hpo__poster{inset:0;height:100%}
.mh-js #products .hpo__canvas{display:block;position:absolute;z-index:1;inset:0;width:100%;height:100%;opacity:0;touch-action:pan-y}
.mh-js #products.is-3d .hpo__canvas{opacity:1}
.mh-js #products.is-3d .hpo__poster{opacity:0}
.mh-js #products .hpo__mini,.mh-js #products .hpo__mini-cap{display:none}
.mh-js #products .hpo__cap{display:flex;position:absolute;z-index:3;left:50%;top:calc(468/900*100%);transform:translateX(-50%);align-items:baseline;gap:12px;margin:0;white-space:nowrap;color:var(--hpo-muted);font:400 14px/1.4 Assistant,sans-serif;pointer-events:none}
.mh-js #products .hpo__cap b{font-size:clamp(15px,2cqh,18px)}
/* Instructor HUD (drawn by the viewer): compass under the canvas, track, bracket, tag and status above it */
.mh-js #products.is-3d .hpo__hud,.mh-js #products.is-3d .hpo__compass{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;--k:1}
.mh-js #products .hpo__compass{z-index:0}
.mh-js #products .hpo__hud{z-index:3}
.mh-js #products .hpo__hud :is(path,polyline,rect),.mh-js #products .hpo__compass path{fill:none;vector-effect:non-scaling-stroke}
.mh-js #products .hpo__hud text,.mh-js #products .hpo__compass text{font-family:'IBM Plex Mono',monospace;font-weight:500;letter-spacing:.05em}
.mh-js #products .hpo__tk{stroke:var(--hpo-line);stroke-width:1;opacity:.55}
.mh-js #products .hpo__tk--maj{opacity:.95}
.mh-js #products .hpo__brg{font-size:calc(10px / var(--k));fill:var(--hpo-muted)}
.mh-js #products .hpo__frame{stroke:var(--hpo-line);stroke-width:1.4;opacity:.6}
.mh-js #products .hpo__st{font-size:calc(12px / var(--k));font-weight:600;fill:var(--hpo-ink);letter-spacing:.08em}
.mh-js #products .hpo__st-dot{fill:var(--hpo-muted)}
.mh-js #products .hpo__st.is-live .hpo__st-dot{fill:var(--hpo-signal)}
.mh-js #products .hpo__st2{font-size:calc(10.5px / var(--k));fill:var(--hpo-muted)}
.mh-js #products .hpo__sortie{transition:opacity .3s}
.mh-js #products .hpo__trk{stroke:var(--hpo-signal);stroke-width:1.6;stroke-linejoin:round}
.mh-js #products .hpo__plan{stroke:var(--hpo-muted);stroke-width:1.2;stroke-dasharray:1.5 6;stroke-linecap:round}
.mh-js #products .hpo__hud .hpo__evt{fill:var(--hpo-signal);stroke:none}
.mh-js #products .hpo__evl{font-size:calc(10px / var(--k));fill:var(--hpo-muted)}
.mh-js #products .hpo__ret{stroke:var(--hpo-ink);stroke-width:1.4}
.mh-js #products .hpo__leader{stroke:var(--hpo-ink);stroke-width:1}
.mh-js #products .hpo__hud .hpo__tagbox{fill:color-mix(in srgb,var(--hpo-bg) 82%,transparent);stroke:var(--hpo-line);stroke-width:1}
.mh-js #products .hpo__tag-h{font-size:calc(11px / var(--k));font-weight:600;fill:var(--hpo-ink)}
.mh-js #products .hpo__tag-t{font-size:calc(11px / var(--k));fill:var(--hpo-ink-2)}
.mh-js #products .hpo__tag-red{fill:var(--hpo-signal)}
/* Drone affordances: the bracket on a hovered drone and the one-time hint (a background halo keeps them legible) */
.mh-js #products .hpo__aim path{stroke:var(--hpo-signal);stroke-width:1.6}
.mh-js #products .hpo__cue path{stroke:var(--hpo-signal);stroke-width:2.2}
.mh-js #products .hpo__hud .hpo__ping{fill:color-mix(in srgb,var(--hpo-signal) 10%,transparent);stroke:var(--hpo-signal);stroke-width:2}
.mh-js #products :is(.hpo__aim text,.hpo__hint){font-size:calc(10.5px / var(--k));font-weight:600;letter-spacing:.1em;fill:var(--hpo-signal);paint-order:stroke;stroke:var(--hpo-bg);stroke-width:calc(3px / var(--k));stroke-linejoin:round}
.mh-js #products .hpo__hint{font-size:calc(11.5px / var(--k))}
/* Category bar: the lens (three categories, coloured like the floor) and back/forward arrows */
#products .hpo__bar{display:none}
.mh-js #products .hpo__bar{display:flex;position:absolute;z-index:7;left:48px;top:2.4cqh;transform:none;align-items:center;gap:8px;white-space:nowrap}
.mh-js #products .hpo__lens{display:flex;gap:2px;padding:3px;border:1px solid color-mix(in srgb,var(--hpo-ink) 14%,transparent);border-radius:999px;background:color-mix(in srgb,var(--hpo-bg) 82%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mh-js #products .hpo__lens-b{--c:var(--hpo-ink);display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 12px;border:1px solid transparent;border-radius:999px;background:none;color:var(--hpo-ink-2);font:600 14px/1 Assistant,sans-serif;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s}
.mh-js #products .hpo__lens-b[data-cat="training"]{--c:var(--hpo-cat-training)}
.mh-js #products .hpo__lens-b[data-cat="maintenance"]{--c:var(--hpo-cat-maintenance)}
.mh-js #products .hpo__lens-b[data-cat="research"]{--c:var(--hpo-cat-research)}
.mh-js #products .hpo__sw{width:10px;height:10px;flex:none;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.mh-js #products .hpo__lens-n{font:500 11px/1 'IBM Plex Mono',monospace;color:var(--hpo-muted)}
.mh-js #products .hpo__lens-b:hover{color:var(--hpo-ink);background:color-mix(in srgb,var(--c) 8%,transparent)}
.mh-js #products .hpo__lens-b[aria-pressed="true"]{color:var(--hpo-ink);background:color-mix(in srgb,var(--c) 16%,transparent);border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.mh-js #products .hpo__step{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid color-mix(in srgb,var(--hpo-ink) 18%,transparent);border-radius:50%;background:color-mix(in srgb,var(--hpo-bg) 82%,transparent);color:var(--hpo-ink);cursor:pointer;transition:border-color .2s,transform .15s}
.mh-js #products .hpo__step svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mh-js #products .hpo__step--next svg{transform:scaleX(-1)}
.mh-js #products .hpo__step:hover{border-color:var(--hpo-ink)}
.mh-js #products .hpo__step:active{transform:scale(.95)}
.mh-js #products :is(.hpo__lens-b,.hpo__step):focus-visible{outline:2px solid var(--hpo-signal);outline-offset:3px}
@container (max-width:1180px){.mh-js #products .hpo__lens-x,.mh-js #products .hpo__lens-n{display:none}}
/* Pods: the replenish pill hangs off the caption's right edge; "Launch a drone" shows only for keyboard focus */
.mh-js #products.is-3d .hpo__pods,.mh-js #products.is-3d .hpo__launch{display:inline-flex;position:absolute;top:50%;align-items:center;gap:8px;height:32px;padding:0 13px 0 11px;
  border:1px solid var(--mh-line-btn,#8996a4);border-radius:999px;background:var(--hpo-bg);color:var(--hpo-ink);font:600 14px/1 Assistant,sans-serif;white-space:nowrap;cursor:pointer;pointer-events:auto;transform:translateY(-50%)}
.mh-js #products.is-3d .hpo__pods{left:calc(100% + 16px)}
.mh-js #products .hpo__pods svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mh-js #products .hpo__pods-n{padding-left:8px;border-left:1px solid var(--hpo-echo);font:500 12px/1 'IBM Plex Mono',monospace;letter-spacing:.02em;color:var(--hpo-muted)}
.mh-js #products .hpo__pods-n b,.mh-js #products .hpo__pods-n i{font-weight:500;font-style:normal}

.mh-js #products .hpo__pods-n i{font:500 13px/1 'IBM Plex Mono',monospace;color:var(--hpo-muted)}
.mh-js #products .hpo__meter{display:grid;grid-template-columns:repeat(7,5px);gap:2px;flex:none}
.mh-js #products .hpo__meter i{width:5px;height:5px;border-radius:1px;background:color-mix(in srgb,var(--hpo-ink) 18%,transparent)}
.mh-js #products .hpo__meter i.is-on{background:var(--hpo-ink)}
.mh-js #products .hpo__pods:not([aria-disabled="true"]) .hpo__meter i:not(.is-on){background:color-mix(in srgb,var(--hpo-signal) 55%,transparent)}

/* the replenish control sits top right, under the HUD status line (STANDBY / PODS) */
#products .hpo__podsbox{display:none}
/* The drones pill: status, pod meter, count and replenish in one control, in the top row (same top and height as the
   category bar), right edge clear of the HUD corner. The HUD status text it replaces is hidden. */
.mh-js #products .hpo__hud :is(.hpo__st,.hpo__st2){display:none}
.mh-js #products.is-3d .hpo__podsbox{display:flex;align-items:center;gap:12px;position:absolute;z-index:7;right:48px;top:2.4cqh;height:44px;padding:0 4px 0 16px;border:1px solid color-mix(in srgb,var(--hpo-ink) 14%,transparent);border-radius:999px;
  background:color-mix(in srgb,var(--hpo-bg) 82%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap}
.mh-js #products .hpo__dstat{display:inline-flex;align-items:center;gap:7px;min-width:17ch;font:600 11px/1 'IBM Plex Mono',monospace;letter-spacing:.08em;color:var(--hpo-ink-2);font-variant-numeric:tabular-nums}
.mh-js #products .hpo__dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--hpo-muted)}
.mh-js #products .hpo__dstat.is-live{color:var(--hpo-ink)}
.mh-js #products .hpo__dstat.is-live .hpo__dot{background:var(--hpo-signal);box-shadow:0 0 0 3px color-mix(in srgb,var(--hpo-signal) 22%,transparent)}
.mh-js #products .hpo__podsbox .hpo__meter{padding-left:12px;border-left:1px solid color-mix(in srgb,var(--hpo-ink) 14%,transparent)}
.mh-js #products .hpo__podsbox .hpo__pods-n{display:inline-flex;align-items:baseline;gap:1px;padding:0;border:0}
.mh-js #products .hpo__podsbox .hpo__pods-n b{font:600 20px/1 'IBM Plex Mono',monospace;color:var(--hpo-ink);font-variant-numeric:tabular-nums}
.mh-js #products.is-3d .hpo__podsbox .hpo__pods{position:relative;left:auto;top:auto;transform:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 11px;border:1px solid color-mix(in srgb,var(--hpo-signal) 55%,transparent);border-radius:999px;background:color-mix(in srgb,var(--hpo-signal) 10%,transparent);color:var(--hpo-ink);font:600 13px/1 Assistant,sans-serif}
.mh-js #products.is-3d .hpo__podsbox .hpo__pods:hover:not([aria-disabled="true"]){border-color:var(--hpo-signal);background:color-mix(in srgb,var(--hpo-signal) 18%,transparent)}
.mh-js #products.is-3d .hpo__podsbox .hpo__pods[aria-disabled="true"]{border-color:color-mix(in srgb,var(--hpo-ink) 12%,transparent);background:none;color:var(--hpo-muted)}
.mh-js #products .hpo__podsbox .hpo__pods-l{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
.mh-js #products .hpo__podsbox .hpo__pods:active:not([aria-disabled="true"]){transform:scale(.97)}
.mh-js #products .hpo__pods:hover:not([aria-disabled="true"]){border-color:var(--hpo-ink)}
.mh-js #products .hpo__pods:active:not([aria-disabled="true"]){transform:translateY(-50%) scale(.97)}
.mh-js #products .hpo__pods[aria-disabled="true"]{cursor:default;color:var(--hpo-muted)}
.mh-js #products .hpo__pods:focus-visible,.mh-js #products .hpo__launch:focus-visible{outline:2px solid var(--hpo-signal);outline-offset:3px}
.mh-js #products.is-3d .hpo__launch{right:calc(100% + 16px);width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%)}
.mh-js #products.is-3d .hpo__launch:focus-visible{width:auto;height:32px;padding:0 13px;border:1px solid var(--mh-line-btn,#8996a4);overflow:visible;clip-path:none}

.mh-js #products .hpo__item{display:block;padding:0;border:0}
/* Each product is a disc on the ring; the script places every disc along the ring. */
.mh-js #products .hpo__node{--hpo-depth:1;--hpo-d:clamp(40px,8.97cqh,104px);position:absolute;z-index:4;width:var(--hpo-d);transform:translate(-50%,-50%) scale(calc(.8 + .2*var(--hpo-depth)));cursor:pointer;pointer-events:auto;border-radius:50%}
.mh-js #products .hpo__disc{box-shadow:0 0 0 1.5px var(--hpo-line);background:var(--hpo-bg)}
.mh-js #products .hpo__disc img{filter:grayscale(1);opacity:.55}
.mh-js #products .hpo__disc{transform-origin:50% 50%}
/* Hover (mouse) and keyboard focus preview a disc: colour and a little larger; a click or Enter moves it to the front */
@media(hover:hover){
.mh-js #products .hpo__node:hover .hpo__disc img{filter:none;opacity:1}
.mh-js #products .hpo__node:hover .hpo__disc{transform:scale(1.12)}
.mh-js #products .hpo__item.is-active .hpo__node:hover .hpo__disc{transform:scale(1.04)}
}
.mh-js #products .hpo__node:focus-visible .hpo__disc img,.mh-js #products .hpo__node.is-peek .hpo__disc img{filter:none;opacity:1}
.mh-js #products .hpo__node:focus-visible .hpo__disc,.mh-js #products .hpo__node.is-peek .hpo__disc{transform:scale(1.12)}
.mh-js #products .hpo__item.is-active .hpo__node:focus-visible .hpo__disc{transform:scale(1.04)}
.mh-js #products .hpo__nodename{position:absolute;left:50%;top:calc(100% + 10px);width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;transform:translateX(-50%);white-space:nowrap;padding:1px 8px;border-radius:4px;background:var(--hpo-bg);font:500 clamp(12px,1.68cqh,15px)/1.3 Poppins,sans-serif;letter-spacing:-.02em;color:var(--hpo-muted)}
.mh-js #products .hpo__item.is-active .hpo__node{--hpo-d:clamp(56px,15.3cqh,176px);z-index:5}
.mh-js #products .hpo__item.is-active .hpo__disc img{filter:none;opacity:1}
.mh-js #products .hpo__item.is-active .hpo__disc{box-shadow:0 0 0 2px var(--hpo-signal),0 0 0 10px color-mix(in srgb,var(--hpo-signal) 14%,transparent),0 16px 38px rgb(var(--hpo-shadow)/.24)}
.mh-js #products.hpo--many .hpo__item:not(.is-active) .hpo__node:not(:hover,:focus-visible,.is-peek) .hpo__nodename{opacity:0}
.mh-js #products .hpo__item.is-active .hpo__nodename{position:absolute;left:50%;top:calc(100% + 6px);width:auto;height:auto;padding:0 6px;overflow:visible;clip:auto;clip-path:none;transform:translateX(-50%);white-space:nowrap;background:none;font:600 14px/1.3 Poppins,sans-serif;letter-spacing:-.01em;color:var(--hpo-ink);opacity:1}

/* The selected product's card: frosted glass, under the front of the ring */
.mh-js #products .hpo__card{position:absolute;z-index:6;left:50%;top:calc(668/900*100% + 26px);width:min(560px,max(67.06cqh,400px));transform:translate(-50%,10px);padding:18px 26px 14px;text-align:center;border-radius:12px;
  background:color-mix(in srgb,var(--hpo-bg) 66%,transparent);border:1px solid color-mix(in srgb,var(--hpo-ink) 12%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 22%,transparent),0 18px 50px rgb(var(--hpo-shadow)/.14);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);opacity:0;visibility:hidden}
.mh-js #products .hpo__item.is-active .hpo__card{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* the card carries its category quietly: a short top rule and a tinted edge */
.mh-js #products .hpo__item[data-cat="training"] .hpo__card{--c:var(--hpo-cat-training)}
.mh-js #products .hpo__item[data-cat="maintenance"] .hpo__card{--c:var(--hpo-cat-maintenance)}
.mh-js #products .hpo__item[data-cat="research"] .hpo__card{--c:var(--hpo-cat-research)}
.mh-js #products .hpo__item[data-cat] .hpo__card{border-color:color-mix(in srgb,var(--c) 32%,color-mix(in srgb,var(--hpo-ink) 12%,transparent))}
.mh-js #products .hpo__item[data-cat] .hpo__card::before{content:"";position:absolute;left:50%;top:-1px;width:64px;height:3px;border-radius:0 0 3px 3px;background:var(--c);opacity:.8;transform:translateX(-50%)}
.mh-js #products .hpo__verb{font-size:clamp(13px,1.56cqh,17px)}
.mh-js #products .hpo__name{font-size:clamp(22px,2.9cqh,32px)}
.mh-js #products .hpo__lead{font-size:clamp(16px,1.9cqh,20px)}
.mh-js #products .hpo__desc{font-size:clamp(15px,1.78cqh,19px);text-wrap:balance}
.mh-js #products .hpo__cta{margin-top:6px}
/* Smaller stages (narrow windows, or wide but short screens): the pill keeps its icon and count (the label stays for
   assistive technology), and below 900 px the caption moves up a little to clear the selected disc */
@container (max-height:809px){.mh-js #products .hpo__pods-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.mh-js #products .hpo__pods-n{padding-left:0;border-left:0}.mh-js #products.is-3d .hpo__pods{left:calc(100% + 12px);padding:0 11px 0 9px}}
@container (max-height:617px){.mh-js #products .hpo__cap{top:calc(452/900*100%);font-size:13px}}
@media(prefers-reduced-transparency:reduce){.mh-js #products .hpo__card{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--mh-panel,#fff)}}
@media(prefers-reduced-motion:no-preference){
.mh-js #products .hpo__node{transition:width .5s var(--hpo-ease)}
.mh-js #products .hpo__disc{transition:box-shadow .5s,transform .25s var(--hpo-ease)}
.mh-js #products .hpo__disc img{transition:filter .3s,opacity .3s}
.mh-js #products .hpo__nodename{transition:opacity .3s}
.mh-js #products .hpo__card{transition:opacity .35s,transform .45s var(--hpo-ease),visibility 0s .35s}
.mh-js #products .hpo__item.is-active .hpo__card{transition:opacity .4s .25s,transform .5s .25s var(--hpo-ease),visibility 0s}
.mh-js #products .hpo__poster,.mh-js #products .hpo__canvas{transition:opacity .45s}
.mh-js #products .hpo__pods{transition:border-color .2s,color .2s,transform .15s}
}
/* Narrow or short screens with JS (below 1001 px wide, 620 px tall or less, or widescreen and 760 px tall or less): the truck and the ring on a 400 x 300
   field, the caption and pill under the front of the ring, the selected product's card below (or beside it when the
   screen is landscape and short). The field is --hpo-fw wide: the full width when everything fits, smaller on short
   screens; discs and spacing scale with it (--hpo-r is the selected disc's radius). All five cards share one grid
   cell, so switching products never changes the height. */
@media(max-width:1000px),(max-height:620px),(max-height:760px) and (min-aspect-ratio:16/9){
.mh-js #products .hpo__stage{--hpo-bar:52px;--hpo-fw:min(100cqw,max(220px,(var(--hpo-vh) - var(--hpo-top,88px) - var(--hpo-card,250px) - 96px - var(--hpo-bar)) / .65));--hpo-r:clamp(24px,calc(var(--hpo-fw) * .095),60px);container-type:inline-size;width:auto;height:auto;max-width:760px;margin:22px auto 0}
.mh-js #products :is(.hpo__ring,.hpo__canvas),.mh-js #products.is-3d :is(.hpo__hud,.hpo__compass){inset:var(--hpo-bar) auto auto calc(var(--hpo-fx,50%) - var(--hpo-fw) / 2);width:var(--hpo-fw);height:calc(var(--hpo-fw) * .75)}
.mh-js #products .hpo__platform{left:calc(var(--hpo-fx,50%) - var(--hpo-fw) * .425);top:calc(var(--hpo-bar) + var(--hpo-fw) * .025);width:calc(var(--hpo-fw) * .85)}
.mh-js #products .hpo__cap{left:var(--hpo-fx,50%);top:calc(var(--hpo-bar) + var(--hpo-fw) * .555 + var(--hpo-r) + 30px);align-items:center;gap:8px;font-size:13px}
.mh-js #products .hpo__cap b{font-size:16px}
.mh-js #products.is-3d .hpo__pods{position:relative;top:auto;left:auto;margin-left:2px;padding:0 11px 0 9px;transform:none}
.mh-js #products .hpo__pods-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mh-js #products .hpo__pods-n{padding-left:0;border-left:0}
.mh-js #products .hpo__pods:active:not([aria-disabled="true"]){transform:scale(.97)}
.mh-js #products.is-3d .hpo__launch{right:auto;left:50%;top:auto;bottom:calc(100% + 8px);transform:translateX(-50%)}
.mh-js #products .hpo__node{--hpo-d:clamp(30px,calc(var(--hpo-fw) * .115),72px)}
.mh-js #products .hpo__item.is-active .hpo__node{--hpo-d:calc(var(--hpo-r) * 2)}
.mh-js #products.hpo--many .hpo__item:not(.is-active) .hpo__node{--hpo-d:clamp(24px,calc(var(--hpo-fw) * .076),52px)}
.mh-js #products .hpo__item.is-active .hpo__disc{box-shadow:0 0 0 2px var(--hpo-signal),0 0 0 6px color-mix(in srgb,var(--hpo-signal) 14%,transparent),0 10px 24px rgb(var(--hpo-shadow)/.24)}
.mh-js #products .hpo__nodename{left:auto;top:auto;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);transform:none}
.mh-js #products .hpo__list{display:grid;padding-top:calc(var(--hpo-bar) + var(--hpo-fw) * .555 + var(--hpo-r) + 64px)}
.mh-js #products .hpo__bar{left:var(--hpo-fx,50%);top:0;gap:6px;transform:translateX(-50%)}
.mh-js #products .hpo__lens-b{min-height:40px;padding:0 9px;gap:6px;font-size:13px}
.mh-js #products .hpo__step{width:40px;height:40px}
.mh-js #products .hpo__lens-x,.mh-js #products .hpo__lens-n{display:none}
.mh-js #products.is-3d .hpo__podsbox{left:calc(var(--hpo-fx,50%) + var(--hpo-fw) / 2 - 4px);right:auto;top:calc(var(--hpo-bar) + 4px);transform:translateX(-100%);height:36px;gap:8px;padding:0 3px 0 10px}
.mh-js #products .hpo__podsbox .hpo__meter{display:none}
.mh-js #products .hpo__dstat{min-width:0;font-size:10px;letter-spacing:.04em}
.mh-js #products .hpo__podsbox .hpo__pods-n b{font-size:16px}
.mh-js #products.is-3d .hpo__podsbox .hpo__pods{height:28px;width:28px;padding:0;justify-content:center}
.mh-js #products .hpo__podsbox .hpo__pods-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mh-js #products .hpo__item{grid-area:1/1}
.mh-js #products .hpo__card{position:relative;left:auto;top:auto;justify-self:center;width:100%;max-width:640px;transform:translateY(8px);padding:14px 16px 10px}
.mh-js #products .hpo__item.is-active .hpo__card{transform:none}
.mh-js #products .hpo__verb{font-size:13px}
.mh-js #products .hpo__name{font-size:22px}
.mh-js #products .hpo__lead{font-size:16px;margin-top:4px}
.mh-js #products .hpo__desc{font-size:15px}
.mh-js #products .hpo__st{font-size:calc(10px / var(--k))}
.mh-js #products :is(.hpo__st2,.hpo__brg,.hpo__evl){font-size:calc(9px / var(--k))}
.mh-js #products :is(.hpo__tag-h,.hpo__tag-t){font-size:calc(10px / var(--k))}
.mh-js #products .hpo__hud .hpo__tagbox{fill:color-mix(in srgb,var(--hpo-bg) 94%,transparent)}
/* A large field (short desktop screens) has room for the names under the discs */
@container (min-width:1000px){.mh-js #products:not(.hpo--many) .hpo__nodename{left:50%;top:calc(100% + 8px);width:auto;height:auto;padding:1px 6px;overflow:visible;clip:auto;clip-path:none;transform:translateX(-50%);font-size:13px}}
}
@media(max-width:359px){.mh-js #products .hpo__cap span:not([class]){display:none}}
/* Landscape and short (phones held sideways, 1280 x 720 to 1536 x 864 laptops): the field on the left (--hpo-fx is
   its centre), the card beside it */
@media(orientation:landscape) and (max-height:620px),(max-height:760px) and (min-aspect-ratio:16/9){
.mh-js #products .hpo__stage{--hpo-fw:min(calc(100cqw - 444px),max(200px,(var(--hpo-vh) - var(--hpo-top,88px) - 84px - var(--hpo-bar)) / .65));--hpo-fx:calc(var(--hpo-fw) / 2);max-width:1400px}
.mh-js #products .hpo__list{min-height:calc(var(--hpo-bar) + var(--hpo-fw) * .555 + var(--hpo-r) + 52px);padding:0 0 0 calc(var(--hpo-fw) + 24px);align-content:center}
.mh-js #products .hpo__card{max-width:560px;justify-self:end}
/* one top row across the stage: the category bar from the drawing's left edge, the drones pill at the right edge
   above the card column; both 48 px tall */
.mh-js #products .hpo__bar{left:calc(var(--hpo-fx) - var(--hpo-fw) / 2);transform:none}
.mh-js #products.is-3d .hpo__podsbox{left:auto;right:0;top:0;transform:none;height:48px}
@container (min-width:1000px){
.mh-js #products .hpo__podsbox .hpo__meter{display:grid}
.mh-js #products .hpo__dstat{min-width:17ch;font-size:11px;letter-spacing:.08em}
.mh-js #products .hpo__podsbox .hpo__pods-n b{font-size:20px}
.mh-js #products.is-3d .hpo__podsbox{gap:12px;padding:0 6px 0 16px}
.mh-js #products.is-3d .hpo__podsbox .hpo__pods{width:auto;height:36px;padding:0 13px 0 11px}
.mh-js #products .hpo__podsbox .hpo__pods-l{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
}
}
/* Short screens: a tighter card, so the drawing keeps a usable size */
@media(max-height:600px){
.mh-js #products .hpo__card{padding:12px 14px 8px}
.mh-js #products .hpo__name{font-size:20px}
.mh-js #products .hpo__lead{font-size:15px;line-height:1.4}
.mh-js #products .hpo__desc{font-size:14px;line-height:1.45}
.mh-js #products .hpo__cta{min-height:40px;margin-top:2px}
}
@media(max-width:600px){
#products .hpo__heading{display:block}
#products .hpo__eyebrow{font-size:14px;margin-bottom:13px}
#products .hpo__title{font-size:clamp(26px,7.95vw,31px);line-height:1.2}
#products .hpo__catalog{font-size:16px;margin:20px 0 0}
#products .hpo__stage{margin-top:22px}
}
@media(max-width:1000px) and (min-width:601px){#products .hpo__title{font-size:36px}#products .hpo__heading{gap:30px}}
@media(forced-colors:active){
#products .hpo__line,#products .hpo__mini-line{stroke:CanvasText}
#products .hpo__disc{box-shadow:none!important;outline:1px solid CanvasText}
#products .hpo__disc img{filter:none!important;opacity:1!important}
#products .hpo__item.is-active .hpo__disc{outline:3px solid Highlight}
#products .hpo__pods,#products .hpo__launch,#products .hpo__step,#products .hpo__lens-b[aria-pressed="true"]{border-color:ButtonText!important;color:ButtonText}
#products :is(.hpo__tk,.hpo__frame,.hpo__plan,.hpo__ret,.hpo__leader,.hpo__tagbox){stroke:CanvasText!important}
#products :is(.hpo__trk,.hpo__aim path){stroke:Highlight!important}
#products :is(.hpo__hud,.hpo__compass) text{fill:CanvasText!important}
}
@media print{
#products .hpo__bar,#products .hpo__ring,#products .hpo__canvas,#products .hpo__mini,#products .hpo__pods,#products .hpo__launch,#products .hpo__hud,#products .hpo__compass{display:none!important}
#products .hpo__stage{aspect-ratio:auto!important}
#products .hpo__list{display:block!important;padding:0!important}
#products .hpo__platform{position:static!important;width:auto!important;max-width:520px}
#products .hpo__item{display:grid!important}
#products .hpo__node,#products .hpo__card{position:static!important;transform:none!important;opacity:1!important;visibility:visible!important}
}
/* Short phones held upright: a slimmer bar row and a smaller drawing floor, so the card still fits */
@media(max-width:1000px) and (max-height:600px) and (orientation:portrait){
.mh-js #products .hpo__stage{--hpo-bar:46px;--hpo-fw:min(100cqw,max(190px,(var(--hpo-vh) - var(--hpo-top,88px) - var(--hpo-card,250px) - 96px - var(--hpo-bar)) / .65))}
.mh-js #products .hpo__lens-b,.mh-js #products .hpo__step{min-height:36px;height:36px}
.mh-js #products .hpo__step{width:36px}
}