/*----------------------------------------*/
/*  How it works - wireless flow
/*  Sensor unit -> wireless signal -> controller -> motor. Each stage's motion
/*  is keyed off [data-stage] on .wlhow, which assets/js/how-it-works-wireless.js
/*  advances once the section is in view. With no stage set (no JS, reduced
/*  motion) the scene is shown whole and still.
/*----------------------------------------*/

.wlhow {
  --wl-navy: var(--theme-blue-color, #212877);
  --wl-red: var(--primary-red, #ed1b24);
  --wl-blue: #1f6fe0;
  --wl-sky: #5cb8ff;

  position: relative;
  padding: 96px 0 90px;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(31, 111, 224, 0.08) 0%, rgba(31, 111, 224, 0) 70%),
    linear-gradient(180deg, #f6f9fd 0%, #ffffff 100%);
}

/* ---------- heading ---------- */
.wlhow__head {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center;
}

.wlhow__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 700;
  line-height: 1.18;
  color: var(--wl-navy);
}

.wlhow__title-accent {
  color: var(--wl-red);
}

.wlhow__subtitle {
  margin: 14px auto 0;
  max-width: 40em;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-default);
}

/* ---------- board ---------- */
.wlhow__board {
  padding: 26px 26px 34px;
  background: #ffffff;
  border: 1px solid rgba(33, 40, 119, 0.08);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(20, 26, 52, 0.08);
}

.wlhow--js .wlhow__board {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.wlhow--js.is-inview .wlhow__board {
  opacity: 1;
  transform: none;
}

/* ---------- scene ---------- */
.wlhow__scene {
  position: relative;
  aspect-ratio: 1200 / 300;
  border-radius: 20px;
  background:
    radial-gradient(40% 70% at 38% 20%, rgba(92, 184, 255, 0.16) 0%, rgba(92, 184, 255, 0) 70%),
    linear-gradient(180deg, #f2f7fd 0%, #eaf1f9 100%);
  overflow: hidden;
}

.wlhow__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wl-shadow {
  fill: rgba(20, 26, 52, 0.08);
}

/* ----- tank ----- */
.wl-tank__plinth {
  fill: #cfd8e3;
}

.wl-tank__cap {
  fill: #dfe6ef;
  stroke: #c9d3df;
  stroke-width: 1.2;
}

.wl-tank__body {
  fill: url(#wl-g-tank);
  stroke: #c9d3df;
  stroke-width: 1.5;
}

.wl-water__wave {
  fill: url(#wl-g-water);
  opacity: 0.9;
}

.wl-water {
  animation: wl-wave 3.2s linear infinite;
}

@keyframes wl-wave {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(60px);
  }
}

.wl-tank__rib {
  fill: rgba(255, 255, 255, 0.3);
}

.wl-tank__sheen {
  fill: rgba(255, 255, 255, 0.35);
}

/* ----- water level + float switch -----
   .wl-level carries the water surface and the float together. The controller
   senses two levels and the drawing shows only those two: the tank rests at
   the low level - where it starts, and where it returns to - and rises to the
   full level once the controller has run the motor (stage 3). */
.wl-level {
  transform: translateY(205px);
  transition: transform 2.2s cubic-bezier(0.45, 0, 0.55, 1);
}

.wlhow[data-stage="0"] .wl-level,
.wlhow[data-stage="1"] .wl-level,
.wlhow[data-stage="2"] .wl-level {
  transform: translateY(205px);
}

.wlhow[data-stage="3"] .wl-level {
  transform: translateY(118px);
  transition-duration: 3.2s;
}

.wl-float__cable,
.wl-float__lead {
  fill: none;
  stroke: #1d2230;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.wl-gland {
  fill: #2a3142;
}

.wl-float__hull {
  fill: url(#wl-g-float);
  stroke: #b8480a;
  stroke-width: 0.8;
}

.wl-float__nozzle {
  fill: #e25f12;
}

.wl-float__shine {
  fill: rgba(255, 255, 255, 0.32);
}

.wl-float__brand {
  font-family: var(--font-heading);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: #ffffff;
}

/* riding the surface: a gentle bob and rock */
.wl-float__bob {
  transform-box: fill-box;
  transform-origin: center;
  animation: wl-bob 2.4s ease-in-out infinite;
}

@keyframes wl-bob {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(1.8px) rotate(-3deg);
  }
}

/* ----- transmitter: white case, blue label ----- */
.wl-tx__case {
  fill: #f3f4f6;
  stroke: #d3d8df;
  stroke-width: 1;
  filter: drop-shadow(0 4px 6px rgba(20, 26, 52, 0.18));
}

.wl-tx__label {
  fill: url(#wl-g-panel);
}

.wl-tx__screw {
  fill: #8a929e;
}

.wl-tx__mark path {
  fill: none;
  stroke: #6fd6ff;
  stroke-width: 1.1;
  stroke-linecap: round;
}

.wl-tx__mark .wl-tx__mast {
  fill: #6fd6ff;
  stroke: none;
}

.wl-tx__print {
  fill: rgba(255, 255, 255, 0.9);
}

.wl-tx__print--sub {
  fill: rgba(255, 255, 255, 0.6);
}

/* shared by both units */
.wl-splash {
  fill: #46c4f7;
}

.wl-seal {
  fill: #c99a12;
}

.wl-seal__in {
  fill: #f3c637;
}

.wl-seal__num {
  font-family: var(--font-heading);
  font-size: 8px;
  font-weight: 700;
  fill: #3d2c05;
}

.wl-antenna {
  fill: #1d2230;
}

.wl-antenna__joint {
  fill: #2a2f3a;
}

.wl-antenna__base {
  fill: #c29a3a;
}

.wl-ring {
  fill: none;
  stroke: var(--wl-blue);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* ----- radio arcs ----- */
.wl-arcs path {
  fill: none;
  stroke: var(--wl-blue);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.22;
}

/* ----- signal ----- */
.wl-beam__track {
  fill: none;
  stroke: #9cc2f2;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 2 10;
}

.wl-beam__pulse {
  fill: none;
  stroke: var(--wl-blue);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 0.1 200;
  stroke-dashoffset: 0;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(31, 111, 224, 0.7));
}

/* ----- controller: drawn from the real wireless unit ----- */
.wl-ctrl__glow {
  fill: var(--wl-sky);
  opacity: 0;
}

.wl-ctrl__body {
  fill: url(#wl-g-panel);
  stroke: #1446ad;
  stroke-width: 1.2;
  filter: drop-shadow(0 12px 18px rgba(20, 26, 52, 0.2));
}

.wl-ctrl__spray {
  fill: none;
  stroke: #46c4f7;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.wl-ctrl__lamp-label,
.wl-ctrl__btn-label,
.wl-ctrl__switch-label,
.wl-ctrl__brand,
.wl-ctrl__brand-sub {
  font-family: var(--font-heading);
  font-weight: 700;
  fill: #ffffff;
}

.wl-ctrl__lamp-label {
  font-size: 4.7px;
  letter-spacing: 0.02em;
}

.wl-ctrl__btn-label {
  font-size: 3.5px;
}

.wl-ctrl__switch-label {
  font-size: 4.3px;
}

.wl-lamp {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 0.8;
}

.wl-lamp--red {
  fill: #ff3b30;
}

.wl-lamp--green,
.wl-lamp--signal {
  fill: #2fdc6a;
}

/* the motor lamp lights while the motor runs */
.wl-lamp--motor {
  fill: #1f6b3d;
  transition: fill 0.4s ease;
}

.wlhow:not([data-stage]) .wl-lamp--motor,
.wlhow[data-stage="3"] .wl-lamp--motor {
  fill: #3dff8a;
}

.wl-ctrl__display {
  fill: #140c10;
}

/* 7-segment display: the unlit segments show faintly behind the lit ones,
   which carry a soft red glow */
.wl-seg {
  fill: rgba(255, 45, 35, 0.1);
}

.wl-seg--on {
  fill: #ff2d2d;
}

.wl-seg-set--lit {
  filter: drop-shadow(0 0 1.2px rgba(255, 40, 30, 0.9));
}

/* while the controller receives the signal, the readout flashes on and off */
.wlhow[data-stage="2"] .wl-seg-set--lit {
  animation: wl-display 0.6s steps(1, end) infinite;
}

@keyframes wl-display {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.08;
  }
}

.wl-ctrl__btn {
  fill: #1b5fd4;
  stroke: #ffffff;
  stroke-width: 1.1;
}

.wl-ctrl__btn-icon {
  fill: none;
  stroke: #ffffff;
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wl-ctrl__rocker {
  fill: #101217;
}

.wl-ctrl__rocker-in {
  fill: #23262e;
}

.wl-ctrl__rocker-mark {
  font-size: 6px;
  font-weight: 700;
  fill: #e9edf2;
}

.wl-ctrl__mark {
  color: #6fd6ff;
  transition: color 0.4s ease;
}

.wl-ctrl__mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.wl-ctrl__mark circle,
.wl-ctrl__mark .wl-ctrl__mast {
  fill: currentColor;
  stroke: none;
}

.wl-ctrl__brand {
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

.wl-ctrl__brand-sub {
  font-size: 5.4px;
  letter-spacing: 0.02em;
}

.wl-ctrl__print {
  font-size: 4.8px;
  fill: #0a1f55;
}

.wl-ctrl__print--bold {
  font-size: 5.2px;
  font-weight: 700;
}

.wl-ctrl__strip {
  fill: #f1f1ee;
  stroke: #cfd0cc;
  stroke-width: 1;
}

.wl-ctrl__screw {
  fill: #d4d6d2;
  stroke: #a9aca6;
  stroke-width: 0.8;
}

.wl-ctrl__slot {
  fill: none;
  stroke: #6f736c;
  stroke-width: 1;
  stroke-linecap: round;
}

/* ----- cable ----- */
.wl-cable__line {
  fill: none;
  stroke: #2a3142;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wl-cable__pulse {
  fill: none;
  stroke: var(--wl-sky);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 10 200;
  stroke-dashoffset: 10;
  opacity: 0;
}

/* ----- motor ----- */
.wl-pump__halo {
  fill: var(--wl-sky);
  opacity: 0;
}

.wl-pump__pipe {
  fill: none;
  stroke: #b9c4d2;
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wl-pump__flow {
  fill: none;
  stroke: #e9f5ff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 10 14;
  opacity: 0;
}

.wl-pump__base {
  fill: #9aa7b8;
}

.wl-pump__foot {
  fill: #25508f;
}

.wl-pump__cap {
  fill: #1b4f93;
}

.wl-pump__body {
  fill: url(#wl-g-pump);
}

.wl-pump__fin {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 2;
}

.wl-pump__box {
  fill: #1f2a44;
}

.wl-pump__volute {
  fill: #1d5eab;
}

.wl-pump__face {
  fill: #dbe8f6;
}

.wl-pump__impeller {
  transform-box: view-box;
  transform-origin: 1108px 222px;
}

.wl-pump__impeller path {
  stroke: #1d5eab;
  stroke-width: 4;
  stroke-linecap: round;
}

.wl-pump__impeller circle {
  fill: #1d5eab;
}

/* ----- labels over the scene ----- */
.wlhow__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.5em 1em;
  font-family: var(--font-heading);
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--wl-navy);
  background: #ffffff;
  border: 1px solid rgba(31, 111, 224, 0.22);
  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(20, 26, 52, 0.08);
  transform: translate(-50%, -50%);
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease,
    transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.wlhow__chip svg {
  width: 1.25em;
  height: 1.25em;
  color: var(--wl-blue);
  stroke-width: 2;
  transition: color 0.45s ease;
}

.wlhow__chip--signal {
  left: 47%;
  top: 27%;
}

/* the product's headline claim: solid brand red, with a ring pulsing off it
   so the eye lands here first */
.wlhow__chip--range {
  left: 47%;
  top: 42%;
  padding: 0.6em 1.15em;
  font-size: clamp(10.5px, 0.95vw, 13px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #f8323b 0%, var(--wl-red) 55%, #bd1219 100%);
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(237, 27, 36, 0.32);
  animation: wl-range-pulse 2.8s ease-out infinite;
}

.wlhow__chip--range svg {
  color: #ffffff;
  stroke-width: 2.2;
}

@keyframes wl-range-pulse {
  0% {
    box-shadow: 0 10px 26px rgba(237, 27, 36, 0.32), 0 0 0 0 rgba(237, 27, 36, 0.45);
  }

  55%,
  100% {
    box-shadow: 0 10px 26px rgba(237, 27, 36, 0.32), 0 0 0 16px rgba(237, 27, 36, 0);
  }
}

/* while the signal is travelling, it lifts with the beam */
.wlhow[data-stage="1"] .wlhow__chip--range {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 14px 32px rgba(237, 27, 36, 0.42);
}

.wlhow__chip--motor {
  left: 88%;
  top: 17%;
}

/* ---------- steps ---------- */
.wlhow__steps {
  display: grid;
  /* proportioned to the scene so each caption sits under its own part */
  grid-template-columns: 23.3fr 29.4fr 24.6fr 22.7fr;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.wlhow__step {
  position: relative;
  padding: 0 14px;
  text-align: center;
}

/* the rail through the step numbers, and its progress fill */
.wlhow__step::before,
.wlhow__step::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 0;
  right: 0;
  height: 2px;
}

.wlhow__step:first-child::before,
.wlhow__step:first-child::after {
  left: 50%;
}

.wlhow__step:last-child::before,
.wlhow__step:last-child::after {
  right: 50%;
}

.wlhow__step::before {
  background: rgba(33, 40, 119, 0.1);
}

.wlhow__step::after {
  background: var(--wl-navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.wlhow__step.is-active::after {
  transform: scaleX(0.5);
  transition-delay: 0.25s;
}

.wlhow__step:first-child.is-active::after {
  transform: scaleX(0);
}

.wlhow__step:last-child.is-active::after,
.wlhow__step.is-done::after {
  transform: scaleX(1);
}

.wlhow__pick {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.wlhow__pick:focus-visible {
  outline: none;
}

.wlhow__pick:focus-visible .wlhow__num {
  box-shadow: 0 0 0 4px rgba(31, 111, 224, 0.35);
}

.wlhow__marker {
  position: relative;
  display: grid;
  place-items: center;
}

/* the picture stands in for the scene on narrow screens only */
.wlhow__icon {
  display: none;
}

.wlhow__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--wl-navy);
  background: #ffffff;
  border: 2px solid rgba(33, 40, 119, 0.14);
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.wlhow__name {
  margin-top: 14px;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wl-navy);
  transition: color 0.4s ease;
}

.wlhow__text {
  max-width: 250px;
  margin: 8px auto 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-default);
  transition: opacity 0.4s ease;
}

.wlhow__pick:hover .wlhow__num {
  border-color: rgba(237, 27, 36, 0.5);
}

/* ---------- stage states ---------- */
.wlhow--js[data-stage] .wlhow__step:not(.is-active) .wlhow__text {
  opacity: 0.66;
}

.wlhow__step.is-done .wlhow__num {
  color: #ffffff;
  background: var(--wl-navy);
  border-color: var(--wl-navy);
}

.wlhow__step.is-active .wlhow__num {
  color: #ffffff;
  background: var(--wl-red);
  border-color: var(--wl-red);
  box-shadow: 0 0 0 7px rgba(237, 27, 36, 0.14);
}

.wlhow__step.is-active .wlhow__name {
  color: var(--wl-red);
}

/* 1 - detection: rings off the transmitter while the level falls */
.wlhow[data-stage="0"] .wl-ring--detect {
  animation: wl-ring 1.8s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

.wlhow[data-stage="0"] .wl-ring--late {
  animation-delay: 0.9s;
}

@keyframes wl-ring {
  from {
    opacity: 0.9;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(2.3);
  }
}

/* the SIGNAL lamp flickers while the controller receives */
.wlhow[data-stage="2"] .wl-lamp--signal {
  animation: wl-blink 0.6s ease-in-out infinite;
}

@keyframes wl-blink {
  0%,
  100% {
    fill: #1f6b3d;
  }

  50% {
    fill: #3dff8a;
  }
}

/* 2 - signal: arcs off the sensor, pulses along the link */
.wlhow[data-stage="1"] .wl-arcs--tx path {
  animation: wl-arc 1.2s ease-in-out infinite;
}

.wlhow[data-stage="1"] .wl-beam__pulse {
  animation: wl-travel 1.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.wlhow[data-stage="1"] .wl-beam__pulse:nth-of-type(3) {
  animation-delay: 0.5s;
}

.wlhow[data-stage="1"] .wl-beam__pulse:nth-of-type(4) {
  animation-delay: 1s;
}

.wlhow[data-stage="1"] .wl-beam__track {
  stroke: #6fa6ec;
}

.wlhow[data-stage="1"] .wlhow__chip--signal,
.wlhow[data-stage="3"] .wlhow__chip--motor {
  color: #ffffff;
  background: var(--wl-blue);
  border-color: var(--wl-blue);
  box-shadow: 0 12px 26px rgba(31, 111, 224, 0.3);
  transform: translate(-50%, -50%) scale(1.06);
}

.wlhow[data-stage="1"] .wlhow__chip--signal svg,
.wlhow[data-stage="3"] .wlhow__chip--motor svg {
  color: #ffffff;
}

/* 3 - controller: arcs in, a glow round the unit, the mark lit */
.wlhow[data-stage="2"] .wl-arcs--rx path {
  animation: wl-arc-in 1.2s ease-in-out infinite;
}

.wlhow[data-stage="2"] .wl-ctrl__glow {
  animation: wl-glow-strong 1.6s ease-in-out infinite;
}

.wlhow[data-stage="2"] .wl-ctrl__mark {
  color: #e6f6ff;
  filter: drop-shadow(0 0 5px rgba(160, 220, 255, 0.95));
}

@keyframes wl-glow-strong {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 0.85;
  }
}

.wl-arcs path:nth-child(2) {
  animation-delay: 0.18s !important;
}

.wl-arcs path:nth-child(3) {
  animation-delay: 0.36s !important;
}

/* receive arcs light from the outside in */
.wl-arcs--rx path:nth-child(3) {
  animation-delay: 0s !important;
}

.wl-arcs--rx path:nth-child(1) {
  animation-delay: 0.36s !important;
}

@keyframes wl-arc {
  0%,
  100% {
    opacity: 0.2;
  }

  45% {
    opacity: 1;
  }
}

@keyframes wl-arc-in {
  0%,
  100% {
    opacity: 0.2;
  }

  45% {
    opacity: 1;
  }
}

@keyframes wl-glow {
  0%,
  100% {
    opacity: 0.18;
  }

  50% {
    opacity: 0.55;
  }
}

@keyframes wl-travel {
  0% {
    stroke-dashoffset: 0;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: -100;
    opacity: 0;
  }
}

/* 4 - motor: a pulse down the cable, then the pump running */
.wlhow[data-stage="3"] .wl-cable__pulse {
  animation: wl-cable 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.wlhow[data-stage="3"] .wl-pump__impeller {
  animation: wl-spin 0.7s linear infinite;
}

.wlhow[data-stage="3"] .wl-pump__flow {
  opacity: 1;
  animation: wl-flow 0.9s linear infinite;
}

.wlhow[data-stage="3"] .wl-pump__halo {
  animation: wl-glow 1.8s ease-in-out infinite;
}

.wlhow[data-stage="3"] .wl-ctrl__glow {
  opacity: 0.14;
}

@keyframes wl-cable {
  0% {
    stroke-dashoffset: 10;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: -100;
    opacity: 0;
  }
}

@keyframes wl-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes wl-flow {
  to {
    stroke-dashoffset: -24;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .wlhow__name {
    font-size: 16px;
  }

  .wlhow__text {
    font-size: 13.5px;
    line-height: 21px;
  }
}

@media (max-width: 991px) {
  .wlhow {
    padding: 70px 0 64px;
  }

  .wlhow__head {
    margin-bottom: 34px;
  }

  .wlhow__board {
    padding: 18px 16px 28px;
    border-radius: 22px;
  }

  .wlhow__step {
    padding: 0 8px;
  }

  .wlhow__num {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }

  .wlhow__step::before,
  .wlhow__step::after {
    top: 18px;
  }

  /* the scene is shorter here, so the range badge drops clear of the one above */
  .wlhow__chip--range {
    top: 48%;
    padding: 0.5em 0.95em;
  }
}

/* vertical timeline: the scene would be too small to read */
@media (max-width: 767px) {
  .wlhow__scene {
    display: none;
  }

  .wlhow__board {
    padding: 26px 20px 8px;
  }

  .wlhow__steps {
    display: block;
    margin: 0;
  }

  .wlhow__step {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 16px;
    padding: 0 0 26px;
    text-align: left;
  }

  /* the rail runs down between the markers instead */
  .wlhow__step::before,
  .wlhow__step::after,
  .wlhow__step:first-child::before,
  .wlhow__step:first-child::after,
  .wlhow__step:last-child::before,
  .wlhow__step:last-child::after {
    top: 62px;
    bottom: 4px;
    left: 28px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .wlhow__step:last-child::before,
  .wlhow__step:last-child::after {
    display: none;
  }

  /* the two wireless hops are dashed, the controller-to-motor hop is a cable */
  .wlhow__step:nth-child(-n + 2)::before {
    background: repeating-linear-gradient(180deg, rgba(31, 111, 224, 0.4) 0 5px, transparent 5px 10px);
  }

  .wlhow__step::after {
    background: var(--wl-navy);
    transform: scaleY(0);
    transform-origin: center top;
  }

  .wlhow__step.is-active::after,
  .wlhow__step:first-child.is-active::after,
  .wlhow__step:last-child.is-active::after {
    transform: scaleY(0);
  }

  .wlhow__step.is-done::after {
    transform: scaleY(1);
  }

  .wlhow__pick {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    text-align: left;
  }

  .wlhow__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    color: var(--wl-blue);
    background: #eef4fd;
    border: 2px solid rgba(31, 111, 224, 0.14);
    border-radius: 50%;
    transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  }

  .wlhow__icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.8;
  }

  .wlhow__num {
    position: absolute;
    right: -4px;
    top: -4px;
    width: 24px;
    height: 24px;
    font-size: 10.5px;
    border-width: 1.5px;
  }

  .wlhow__step.is-active .wlhow__num {
    box-shadow: none;
  }

  .wlhow__step.is-active .wlhow__icon {
    color: #ffffff;
    background: var(--wl-blue);
    border-color: var(--wl-blue);
    box-shadow: 0 0 0 7px rgba(31, 111, 224, 0.14);
  }

  .wlhow__name {
    margin: 0;
    font-size: 17px;
  }

  .wlhow__text {
    grid-column: 2;
    max-width: none;
    margin: 4px 0 0;
  }
}

@media (max-width: 575px) {
  .wlhow {
    padding: 56px 0 52px;
  }
}

/* ---------- reduced motion ----------
   No autoplay. A step picked by hand still highlights, but nothing loops. */
@media (prefers-reduced-motion: reduce) {
  .wlhow--js .wlhow__board {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .wlhow .wl-water,
  .wlhow .wl-ring,
  .wlhow .wl-float__bob,
  .wlhow .wl-lamp--signal,
  .wlhow .wl-seg-set--lit,
  .wlhow .wl-arcs path,
  .wlhow .wl-beam__pulse,
  .wlhow .wl-ctrl__glow,
  .wlhow .wl-cable__pulse,
  .wlhow .wl-pump__impeller,
  .wlhow .wl-pump__flow,
  .wlhow .wl-pump__halo,
  .wlhow__chip--range {
    animation: none !important;
  }

  .wlhow[data-stage="1"] .wl-arcs--tx path,
  .wlhow[data-stage="2"] .wl-arcs--rx path {
    opacity: 1;
  }

  .wlhow[data-stage="2"] .wl-ctrl__glow,
  .wlhow[data-stage="3"] .wl-pump__halo {
    opacity: 0.35;
  }

  .wlhow__step::after,
  .wlhow__chip,
  .wlhow__num,
  .wlhow .wl-level {
    transition: none;
  }
}