/* WAVE 3D on scroll (4 Nov). The scroll track is tall; the frame inside it sticks under the header
   while the unit turns. Callouts use the enclosure diagram's language: grey leader, cyan dot with halo. */
/* 4 Nov: no longer pinned to the scroll; the steps drive it (hover shows a view, a click keeps it). The frame is
   a fixed, roomy height so the unit keeps its scale. */
.w3stick{position:relative;height:clamp(600px,calc(100vh - 64px),880px);display:flex;flex-direction:column}
.w3head .shead{margin-bottom:clamp(8px,2vh,20px)}
.w3frame{flex:1;min-height:0}
.w3frame{width:100%;display:grid;grid-template-columns:minmax(150px,184px) minmax(0,1fr);grid-template-areas:"nav stage";grid-template-rows:minmax(0,1fr);gap:16px}   /* 4 Nov: the steps in a drawer left of the stage */
.w3stage{grid-area:stage}
/* 4 Nov: no box and no fill, the unit sits on the page itself */
.w3stage{position:relative;min-height:0}
.w3stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s}
.w3stage.ready canvas{opacity:1}
.w3lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.w3line{fill:none;stroke:var(--tx-3);stroke-width:1;vector-effect:non-scaling-stroke}
.w3halo{fill:var(--cy)}
.w3dot{fill:var(--cy);stroke:var(--panel);stroke-width:1.6;filter:drop-shadow(0 0 7px rgba(60,201,240,.85))}
.w3dim{font:500 13px var(--m);letter-spacing:.08em;fill:var(--tx)}
.w3num{font:700 12px var(--m);fill:var(--cy);text-anchor:middle}
.w3labels{position:absolute;inset:0;z-index:3;pointer-events:none}
.w3l{position:absolute;left:0;top:0;font-size:var(--fs-h4);font-weight:500;line-height:1.35;
  letter-spacing:-.005em;color:var(--tx);opacity:0;white-space:nowrap}
/* where the visitor is: the six steps as the product pills on Complete RF Spectrum (4 Nov), the current one lit;
   each one jumps to its place */
.w3steps{grid-area:nav;align-self:center;   /* 4 Nov: level with the unit, which sits at the stage centre */
  list-style:none;display:flex;flex-direction:column;gap:8px}
.w3steps button{width:100%;display:flex;justify-content:center;padding:12px 16px;   /* rounded rectangles, the site's card radius */
  border:1px solid var(--line);border-radius:8px;background:var(--panel-2);font:inherit;font-size:var(--fs-ui,14px);color:var(--tx-2);
  cursor:pointer;transition:border-color .4s,background .4s,color .4s}
/* 4 Nov: the colours and type of the shut domain pills on the homepage (Land, Sea...): the panel-2 fill, a quiet line,
   the body face at 600 in grey, sentence case; hover lifts it as theirs does */
.w3steps b{font-family:var(--s);font-weight:600;letter-spacing:-.005em;color:inherit}
.w3steps button:hover{background:var(--panel);border-color:var(--line-2);color:var(--tx)}
/* the current step: the blue product badge (SWORD, WAVE...) */
.w3steps button[aria-current="step"],.w3steps button[aria-current="step"]:hover{background:rgba(60,201,240,.1);border-color:rgba(60,201,240,.32);color:var(--cy)}
:root[data-theme="light"] .w3steps button[aria-current="step"]{background:var(--cy-soft);border-color:var(--cy-dim)}
.w3steps button:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
.w3list{display:none}
@media(max-width:640px){
  .w3stick{height:auto}
  .w3stage{height:clamp(300px,52vh,460px);flex:none}
  .w3l{display:none}
  .w3frame{display:flex;flex-direction:column;gap:14px}       /* a phone: the stage, its names, then the steps in one sideways row */
  .w3steps{order:3;align-self:stretch;flex-direction:row;position:relative;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad)}
  .w3steps::-webkit-scrollbar{display:none}
  .w3steps li{flex:none}
  .w3steps button{width:auto;padding:10px 14px}
  .w3stage{order:1}
  .w3list{order:2}
  /* the names under the unit, numbered as the dots on it */
  .w3list{display:flex;flex-direction:column;gap:6px;list-style:none;min-height:5.6em;font-size:var(--fs-card);color:var(--tx);
    opacity:var(--w3a,0);transition:opacity .2s}
  .w3list b{display:inline-block;width:1.8em;font:700 12px var(--m);color:var(--cy)}
}
@media(prefers-reduced-motion:reduce){.w3stage canvas{transition:none}}