/* story3d/hero/whymanaged.css — the /why-managed-services/ hero loop (2026-10-20). Namespaced .whym;
   nothing here reaches the stories or the services hero. The box keeps the old SVG art's 23:19 aspect
   (the .art container sets it). Two legend pills (white, navy Inter 600) with a color swatch (orange =
   break/fix, navy with an amber tip = managed: shapes, never text color) and the muted note. */
.whym{position:absolute;inset:0;}
.whym-view{position:absolute;inset:0;}
.whym-still,.whym-gl{position:absolute;inset:0;width:100%;height:100%;display:block;}
.whym-still{object-fit:contain;}
.whym-gl{opacity:0;}
.whym.is-3d .whym-gl{opacity:1;}
.whym.is-3d .whym-still{visibility:hidden;}
.whym-labels{position:absolute;inset:0;pointer-events:none;}
.whym-label{
  position:absolute;white-space:nowrap;display:flex;align-items:center;gap:8px;
  background:#fff;color:var(--navy,#1E3A5F);font-family:var(--sans,'Inter',sans-serif);font-size:14px;font-weight:600;
  letter-spacing:-.005em;line-height:1;padding:9px 14px 10px 12px;border-radius:999px;border:1px solid rgba(30,58,95,.10);
  box-shadow:0 1px 2px rgba(30,58,95,.08),0 10px 24px -10px rgba(30,58,95,.35);
}
.whym-sw{flex:none;width:18px;height:5px;border-radius:3px;}
.whym-sw.sw-orange{background:var(--orange,#F58220);}
.whym-sw.sw-navy{background:linear-gradient(90deg,var(--navy,#1E3A5F) 0 66%,var(--amber,#E4B723) 66% 100%);}
.whym-note{position:absolute;right:4px;top:6px;font-family:var(--sans,'Inter',sans-serif);font-size:12px;font-weight:500;line-height:1.2;
  color:var(--muted,#5E6670);white-space:nowrap;}
.whym-pause{position:absolute;right:0;bottom:0;z-index:2;display:grid;place-items:center;
  width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  background:#fff;color:var(--navy,#1E3A5F);border:1px solid rgba(30,58,95,.14);
  box-shadow:0 1px 2px rgba(30,58,95,.06),0 10px 22px -12px rgba(30,58,95,.4);}
.whym-pause[hidden]{display:none;}
.whym-pause .i-play{display:none;}
.whym-pause[data-paused] .i-pause{display:none;}
.whym-pause[data-paused] .i-play{display:block;}
.whym-pause:focus-visible{outline:2px solid var(--navy,#1E3A5F);outline-offset:3px;}
@media (hover:hover) and (pointer:fine){ .whym-pause:hover{background:var(--canvas,#F7F7F7);} }
@media (max-width:860px){
  .whym-label{font-size:12px;padding:7px 10px 8px 9px;gap:6px;}
  .whym-sw{width:14px;height:4px;}
  .whym-note{font-size:11.5px;}
}
@media (prefers-reduced-motion:reduce){ .whym-pause{display:none;} }
html.s3d-capture .whym-pause{display:none;}