/* MDU Kits page (mdu-kits.html + assets/js/mdu-kits.js).
   The diagram is one flex row of "stages" joined by cable links, all centered
   on a single line. Captions hang below each stage (absolute) so they never
   move that line. The riser stage is a stack of switches fed by an uplink fan on
   the left and gathered by an access-cable bus on the right. */

.rl-mdu {
  --mdu-ink: #063F5B;
  --mdu-text: #252930;
  --mdu-muted: #5d6168;
  --mdu-accent: #0b4dc0;
  --mdu-blue: #005cf4;
  --mdu-soft: #F1F4F8;
  --mdu-line: #e3e6ea;
  --mdu-unit-line: #c7cdd6;
  --mdu-page: #ffffff;
  --mdu-selected: #edf3ff;
  --uplink: #9aa1ab;
  --mdu-shadow: drop-shadow(0 16px 16px rgba(15, 23, 42, .20)) drop-shadow(0 3px 4px rgba(15, 23, 42, .10));
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px 32px 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--mdu-text);
}

html[data-theme="dark"] .rl-mdu {
  --mdu-ink: #e8eef5;
  --mdu-text: #e8eef5;
  --mdu-muted: #a9b1bc;
  --mdu-accent: #7fb0ff;
  --mdu-soft: rgba(255, 255, 255, .06);
  --mdu-line: rgba(255, 255, 255, .10);
  --mdu-unit-line: rgba(255, 255, 255, .22);
  --mdu-page: var(--rl-bg, #050608);
  --mdu-selected: rgba(47, 124, 246, .14);
  --uplink: #7b8491;
  /* Most of the hardware is near-black: lift it off a dark page with a soft halo */
  --mdu-shadow: drop-shadow(0 0 1px rgba(255, 255, 255, .45)) drop-shadow(0 0 18px rgba(160, 190, 230, .22));
}

.rl-mdu-title {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--mdu-ink);
  text-align: center;
}

/* ---- controls ----------------------------------------------------------- */

.rl-mdu-controls {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
}

/* kit cards: icon + the building's wiring + its cable colour */
.rl-mdu-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.rl-mdu-tab {
  font: inherit;
  min-width: 168px;
  min-height: 76px;
  padding: 14px 20px 14px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  border: 2px solid var(--mdu-line);
  border-radius: 18px;
  background: var(--mdu-page);
  color: var(--mdu-ink);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.rl-mdu-tab:hover {
  border-color: rgba(0, 92, 244, .45);
  transform: translateY(-1px);
}
.rl-mdu-tab-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mdu-soft);
  color: var(--mdu-accent);
  transition: background-color .15s ease, color .15s ease;
}
.rl-mdu-tab-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.rl-mdu-tab-name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.rl-mdu-tab[aria-pressed="true"] {
  border-color: var(--mdu-blue);
  background: var(--mdu-selected);
  box-shadow: 0 14px 30px -16px rgba(0, 92, 244, .55);
}
.rl-mdu-tab[aria-pressed="true"] .rl-mdu-tab-icon {
  background: var(--mdu-blue);
  color: #ffffff;
}

.rl-mdu-badge {
  --c: #9aa1ab;
  display: block;
}
.rl-mdu-badge-swatch {
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--c);
}
.rl-mdu-badge-cat6  { --c: #005cf4; --ink: #0b4dc0; }
.rl-mdu-badge-coax  { --c: #1d2129; --ink: #252930; }
.rl-mdu-badge-phone { --c: #7a5af5; --ink: #5b3fd6; }
.rl-mdu-badge-phone .rl-mdu-badge-swatch {
  background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 10px);
}
html[data-theme="dark"] .rl-mdu-badge-cat6  { --c: #2f7cf6; --ink: #7fb0ff; }
html[data-theme="dark"] .rl-mdu-badge-coax  { --c: #c9d1db; --ink: #dfe5ec; }
html[data-theme="dark"] .rl-mdu-badge-phone { --ink: #b3a1ff; }

/* indoor / outdoor: only for the retrofit wiring (Coax, Phoneline) */
.rl-mdu-env {
  margin-top: 14px;
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: var(--mdu-soft);
}
.rl-mdu-env[hidden] { display: none; }
.rl-mdu-env button {
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  min-height: 40px;
  padding: 8px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mdu-ink);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.rl-mdu-env button:hover { color: var(--mdu-blue); }
.rl-mdu-env button[aria-pressed="true"],
.rl-mdu-env button[aria-pressed="true"]:hover {
  background: var(--mdu-page);
  color: var(--mdu-blue);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}
.rl-mdu-env button:focus-visible {
  outline: 3px solid rgba(0, 92, 244, .45);
  outline-offset: 2px;
}

.rl-mdu-units {
  min-height: 76px;
  box-sizing: border-box;
  padding: 10px 10px 10px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px solid var(--mdu-line);
  border-radius: 18px;
}
.rl-mdu-units label {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mdu-accent);
}
.rl-mdu-stepper {
  display: flex;
  align-items: center;
  padding: 6px;
  border-radius: 999px;
  background: var(--mdu-soft);
}
.rl-mdu-stepper button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--mdu-page);
  color: var(--mdu-ink);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rl-mdu-stepper button:hover { color: var(--mdu-blue); }
.rl-mdu-stepper input {
  width: 96px;
  height: 44px;
  border: 0;
  background: transparent;
  text-align: center;
  font: inherit;
  font-size: 24px;
  font-weight: 800;
  color: var(--mdu-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
.rl-mdu-stepper input::-webkit-outer-spin-button,
.rl-mdu-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.rl-mdu-tab:focus-visible,
.rl-mdu-stepper button:focus-visible,
.rl-mdu-stepper input:focus-visible,
.rl-mdu a:focus-visible {
  outline: 3px solid rgba(0, 92, 244, .45);
  outline-offset: 3px;
}

/* ---- diagram ------------------------------------------------------------ */

.rl-mdu-scroll {
  margin-top: 28px;
  width: 100%;
  overflow-x: auto;
  padding: 40px 0 8px;
}

.rl-mdu-diagram {
  min-width: 1180px;
  padding: 0 8px 96px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.rl-mdu-stage {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl-mdu-node { display: block; text-decoration: none; }

.rl-mdu-pic {
  position: relative;
  display: block;
  overflow: hidden;
  filter: var(--mdu-shadow);
  transition: transform .2s ease;
}
.rl-mdu-pic img {
  position: absolute;
  max-width: none;
}
.rl-mdu-node:hover .rl-mdu-pic,
a.rl-mdu-row-switch:hover .rl-mdu-pic { transform: translateY(-3px); }

.rl-mdu-cloud {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  color: var(--mdu-ink);
  background: var(--mdu-page);
  border-radius: 50%;
}

.rl-mdu-cap {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  white-space: nowrap;
}
.rl-mdu-where {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mdu-accent);
}
.rl-mdu-name {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--mdu-text);
  text-decoration: none;
}
.rl-mdu a.rl-mdu-name { color: var(--mdu-text); }
.rl-mdu a.rl-mdu-name:hover { color: var(--mdu-blue); }
.rl-mdu-qty {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 800;
  color: var(--mdu-muted);
}

/* ---- riser stack -------------------------------------------------------- */

.rl-mdu-risers { flex-direction: column; }
.rl-mdu-risers-cap { top: calc(100% + 24px); }
.rl-mdu-risers-cap .rl-mdu-qty + .rl-mdu-name { margin-top: 8px; }

.rl-mdu-rows {
  --bus: 52px;               /* = BUS in mdu-kits.js */
  --uplink: #9aa1ab;
  --out: #1d2129;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--row-gap, 30px);   /* = rowGap() in mdu-kits.js */
  padding: 0 var(--bus);
}
.rl-mdu-out-cat6  { --out: #005cf4; }
.rl-mdu-out-coax  { --out: #1d2129; }
.rl-mdu-out-phone { --out: #7a5af5; }
html[data-theme="dark"] .rl-mdu-out-cat6 { --out: #2f7cf6; }
html[data-theme="dark"] .rl-mdu-out-coax { --out: #c9d1db; }

.rl-mdu-row {
  position: relative;
  height: var(--row-h, 40px);   /* = rowHeight() in mdu-kits.js */
  display: flex;
  align-items: center;
}

/* one fluid branch per riser: the uplink fans out on the left, the access
   cable gathers on the right (SVG paths built in mdu-kits.js) */
.rl-mdu-branches {
  position: absolute;
  top: 0;
  overflow: visible;
  pointer-events: none;
}
.rl-mdu-branches-in  { left: 0; }
.rl-mdu-branches-out { right: 0; }
.rl-mdu-branch {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.rl-mdu-branches-in .rl-mdu-branch  { stroke: var(--uplink); }
.rl-mdu-branches-out .rl-mdu-branch { stroke: var(--out); }
.rl-mdu-out-phone .rl-mdu-branches-out .rl-mdu-branch { stroke-dasharray: 7 5; }
.rl-mdu-flow {
  fill: none;
  stroke: #ffffff;
  stroke-opacity: .8;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 8 64;
  animation: rl-mdu-dash 1.4s linear infinite;
}
@keyframes rl-mdu-dash { to { stroke-dashoffset: -72; } }

.rl-mdu-row-switch {
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.rl-mdu-row-cap {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  color: var(--mdu-muted);
}
.rl-mdu-row-cap b {
  margin-right: 4px;
  color: var(--mdu-accent);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* one thin access line from each switch to its branch */
.rl-mdu-rows .rl-mdu-row-cable {
  --w: 2.5px;
  --c: var(--out);
  position: relative;
  flex: 1 1 auto;
  min-width: 40px;
  height: 100%;
}
.rl-mdu-row-cable .rl-mdu-line { left: -4px; right: -1px; }

.rl-mdu-more-stack { position: relative; }
.rl-mdu-more-stack .rl-mdu-pic:nth-child(1) { opacity: .4; transform: translate(-10px, -10px); }
.rl-mdu-more-stack .rl-mdu-pic:nth-child(2) { position: absolute; top: 0; left: 0; opacity: .7; transform: translate(-5px, -5px); }
.rl-mdu-more-stack .rl-mdu-pic:nth-child(3) { position: absolute; top: 0; left: 0; }
.rl-mdu-more-text {
  position: relative;
  margin-left: 20px;
  margin-right: 12px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--mdu-muted);
}
.rl-mdu-more-text b { display: block; font-size: 15px; font-weight: 800; color: var(--mdu-ink); }

/* ---- the "every unit" box ---------------------------------------------- */

.rl-mdu-unitbox {
  flex-direction: column;
  border: 2px dashed var(--mdu-unit-line);
  border-radius: 28px;
  padding: 36px 26px 100px;
  margin-top: 64px;           /* = bottom - top padding: keeps the chain on the centerline */
}
.rl-mdu-unit-label {
  position: absolute;
  top: -13px;
  left: 22px;
  padding: 0 10px;
  background: var(--mdu-page);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mdu-accent);
}
.rl-mdu-unit-count {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--mdu-blue);
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 20px -8px rgba(0, 92, 244, .6);
}
.rl-mdu-unit-chain {
  display: flex;
  align-items: center;
}
.rl-mdu-unit-chain .rl-mdu-link { flex: 0 0 48px; min-width: 48px; }
/* equal-height slots so both captions share a baseline; wide enough for each name */
.rl-mdu-unit-chain .rl-mdu-stage { min-width: 112px; }
.rl-mdu-unit-chain .rl-mdu-stage:last-child { min-width: 168px; }
.rl-mdu-unit-chain .rl-mdu-node { height: 128px; display: flex; align-items: center; }

/* ---- cables ------------------------------------------------------------ */

.rl-mdu-link {
  --w: 8px; --c: #9aa1ab; --ink: #5d6168; --speed: 1.4s;
  position: relative;
  flex: 1 1 32px;
  min-width: 32px;
  height: 40px;
}
.rl-mdu-cable-wan    { --w: 2.5px; --c: var(--uplink); --speed: 2.4s; }
.rl-mdu-cable-uplink { --w: 3px;   --c: var(--uplink); --speed: 1.4s; }
.rl-mdu-cable-cat6   { --w: 3px;   --c: #005cf4; --ink: #0b4dc0; --speed: 1.6s; }
.rl-mdu-cable-coax   { --w: 3.5px; --c: #1d2129; --ink: #252930; --speed: 1.6s; }
.rl-mdu-cable-phone  { --w: 3px;   --c: #7a5af5; --ink: #5b3fd6; --speed: 1.8s; }
.rl-mdu-cable-poe    { --w: 3px;   --c: #4DA8DA; --speed: 1.4s; }

html[data-theme="dark"] .rl-mdu-cable-cat6  { --c: #2f7cf6; --ink: #7fb0ff; }
html[data-theme="dark"] .rl-mdu-cable-coax  { --c: #c9d1db; --ink: #dfe5ec; }
html[data-theme="dark"] .rl-mdu-cable-phone { --ink: #b3a1ff; }
html[data-theme="dark"] .rl-mdu-cable-poe   { --ink: #8fd0f2; }

.rl-mdu-link-label {
  position: absolute;
  left: 50%;
  bottom: calc(50% + 12px);
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

/* Runs under each neighbouring device so it reads as plugged in */
.rl-mdu-line {
  position: absolute;
  z-index: 0;
  left: -24px;
  right: -24px;
  top: 50%;
  height: var(--w);
  margin-top: calc(var(--w) / -2);
  border-radius: 999px;
  overflow: hidden;
  background: var(--c);
}
.rl-mdu-cable-phone .rl-mdu-line {
  background: repeating-linear-gradient(90deg, var(--c) 0 7px, transparent 7px 12px);
}
/* the uplink run into the riser stack ends where its branches start */
.rl-mdu-link-feed .rl-mdu-line { right: -2px; }
/* the run from the access bus into the unit box: starts at the bus, stops at the border */
.rl-mdu-link-access { flex: 0 0 72px; min-width: 72px; }
.rl-mdu-link-access .rl-mdu-line { left: -2px; right: 0; }
.rl-mdu-link-access .rl-mdu-link-label {
  left: 14px;
  right: 2px;
  transform: none;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

.rl-mdu-pkt {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40px;
  width: 40px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  animation: rl-mdu-streak var(--speed) linear infinite;
}
.rl-mdu-pkt + .rl-mdu-pkt { animation-delay: calc(var(--speed) / -2); }

@keyframes rl-mdu-streak {
  from { left: -40px; }
  to   { left: 100%; }
}

/* ---- power direction ---------------------------------------------------
   Indoor kits feed power forward (switch -> unit); outdoor RPF kits reverse it
   (unit -> switch). Amber pulses travel the way power flows; a badge names it. */

.rl-mdu-link-power { flex: 0 0 136px; min-width: 136px; }
.rl-mdu-power-pulses {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 12px;
  margin-top: -6px;
  overflow: hidden;
  pointer-events: none;
}
.rl-mdu-power-pulses i {
  position: absolute;
  top: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f2a900;
  box-shadow: 0 0 10px 2px rgba(242, 169, 0, .75);
  animation: rl-mdu-pwr-fwd 1.8s linear infinite;
}
.rl-mdu-power-pulses.is-rev i { animation-name: rl-mdu-pwr-rev; }
.rl-mdu-power-pulses i:nth-child(2) { animation-delay: -.6s; }
.rl-mdu-power-pulses i:nth-child(3) { animation-delay: -1.2s; }
@keyframes rl-mdu-pwr-fwd {
  0%   { left: -14px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: calc(100% + 6px); opacity: 0; }
}
@keyframes rl-mdu-pwr-rev {
  0%   { left: calc(100% + 6px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: -14px; opacity: 0; }
}
.rl-mdu-power-badge {
  position: absolute;
  top: calc(50% + 14px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(242, 169, 0, .14);
  border: 1px solid rgba(242, 169, 0, .55);
  color: #8a5a00;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
html[data-theme="dark"] .rl-mdu-power-badge { color: #f5c04a; background: rgba(242, 169, 0, .12); }
.rl-mdu-power-badge .rl-mdu-power-bolt { color: #f2a900; animation: rl-mdu-zap 1.8s ease-in-out infinite; }
.rl-mdu-power-badge .rl-mdu-power-arrow { color: #f2a900; }
.rl-mdu-power-badge.is-fwd .rl-mdu-power-arrow { animation: rl-mdu-nudge-r 1.8s ease-in-out infinite; }
.rl-mdu-power-badge.is-rev .rl-mdu-power-arrow { animation: rl-mdu-nudge-l 1.8s ease-in-out infinite; }
@keyframes rl-mdu-zap {
  0%, 60%, 100% { opacity: 1; transform: scale(1); }
  70% { opacity: .45; transform: scale(.82); }
  80% { opacity: 1; transform: scale(1.18); }
}
@keyframes rl-mdu-nudge-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes rl-mdu-nudge-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }

/* the access branches carry the same power: forward toward the units, or back to each switch */
.rl-mdu-rows.power-fwd .rl-mdu-branches-out .rl-mdu-flow,
.rl-mdu-rows.power-rev .rl-mdu-branches-out .rl-mdu-flow {
  stroke: #f2a900;
  stroke-opacity: 1;
  stroke-width: 2.5;
}
.rl-mdu-rows.power-rev .rl-mdu-branches-out .rl-mdu-flow { animation-direction: reverse; }

/* outdoor rows: caption beside the narrow enclosure, above its wire */
.rl-mdu-rows.is-rpf .rl-mdu-row-cap {
  top: 6px;
  left: calc(100% + 12px);
}
.rl-mdu-rows.is-rpf .rl-mdu-row-cable { min-width: 124px; }

/* ---- parts ------------------------------------------------------------- */

.rl-mdu-parts {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.rl-mdu-part {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 18px 10px 14px;
  border: 1px solid var(--mdu-line);
  border-radius: 16px;
}
.rl-mdu-part-img { display: flex; align-items: center; justify-content: center; min-width: 44px; }
.rl-mdu-part-img .rl-mdu-pic { filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .28)); }
.rl-mdu-part-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--mdu-text);
  text-decoration: none;
  white-space: nowrap;
}
.rl-mdu a.rl-mdu-part-name { color: var(--mdu-text); }
.rl-mdu a.rl-mdu-part-name:hover { color: var(--mdu-blue); }
.rl-mdu-part-qty {
  font-size: 18px;
  font-weight: 800;
  color: var(--mdu-blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html[data-theme="dark"] .rl-mdu-part-qty { color: #7fb0ff; }

/* ---- CTA --------------------------------------------------------------- */

.rl-mdu-cta {
  margin-top: 36px;
  padding: 16px 32px;
  border-radius: 999px;
  background: #063F5B;
  font-weight: 800;
  font-size: 17px;
  text-decoration: none;
}
.rl-mdu a.rl-mdu-cta,
.rl-mdu a.rl-mdu-cta:hover { color: #ffffff; }
.rl-mdu a.rl-mdu-cta:hover { background: #0a5a82; }
html[data-theme="dark"] .rl-mdu a.rl-mdu-cta { background: var(--mdu-blue); }
html[data-theme="dark"] .rl-mdu a.rl-mdu-cta:hover { background: #2f7cf6; }

@media (prefers-reduced-motion: reduce) {
  .rl-mdu-pkt,
  .rl-mdu-flow,
  .rl-mdu-power-pulses { display: none; }
  .rl-mdu-power-badge svg,
  .rl-mdu-power-badge i { animation: none; }
  .rl-mdu-pic { transition: none; }
}

/* ---- narrow screens: the same chain, top to bottom ------------------- */

@keyframes rl-mdu-streak-down {
  from { top: -40px; }
  to   { top: 100%; }
}

@media (max-width: 899.98px) {
  .rl-mdu { padding: 100px 16px 64px; }
  .rl-mdu-tabs,
  .rl-mdu-tab,
  .rl-mdu-units { width: 100%; }
  .rl-mdu-units { justify-content: space-between; }
  .rl-mdu-scroll { overflow: visible; padding: 8px 0 0; }
  .rl-mdu-diagram {
    min-width: 0;
    padding: 0;
    flex-direction: column;
  }
  .rl-mdu-stage { flex-direction: column; }
  .rl-mdu-cap,
  .rl-mdu-risers-cap {
    position: static;
    transform: none;
    margin-top: 12px;
  }

  /* one representative switch; the count is in its caption */
  .rl-mdu-row ~ .rl-mdu-row,
  .rl-mdu-branches,
  .rl-mdu-row-cable,
  .rl-mdu-row-cap { display: none; }
  .rl-mdu-rows { padding: 0; }

  .rl-mdu-unitbox { margin-top: 24px; padding: 32px 20px 24px; }
  .rl-mdu-unit-chain { flex-direction: column; }

  .rl-mdu-link,
  .rl-mdu-unit-chain .rl-mdu-link,
  .rl-mdu-link-access { flex: 0 0 auto; width: 100%; min-width: 0; height: 72px; }
  .rl-mdu-line,
  .rl-mdu-link-access .rl-mdu-line {
    left: 50%;
    right: auto;
    top: 4px;
    bottom: 4px;
    width: var(--w);
    height: auto;
    margin: 0 0 0 calc(var(--w) / -2);
  }
  .rl-mdu-cable-phone .rl-mdu-line {
    background: repeating-linear-gradient(180deg, var(--c) 0 12px, transparent 12px 19px);
  }
  .rl-mdu-pkt {
    left: 0;
    right: 0;
    top: -40px;
    bottom: auto;
    width: auto;
    height: 40px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
    animation-name: rl-mdu-streak-down;
  }
  .rl-mdu-link-label,
  .rl-mdu-link-access .rl-mdu-link-label {
    left: calc(50% + 18px);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .rl-mdu-part { padding: 8px 14px 8px 10px; }
  .rl-mdu-link-power { flex: 0 0 auto; min-width: 0; height: 96px; }
  .rl-mdu-power-pulses { display: none; }
  .rl-mdu-power-badge { top: 50%; left: auto; right: calc(50% + 16px); transform: translateY(-50%); }
  /* on the vertical wire, forward power points down and reverse power up */
  .rl-mdu-power-badge.is-fwd .rl-mdu-power-arrow,
  .rl-mdu-power-badge.is-rev .rl-mdu-power-arrow { transform: rotate(90deg); animation: none; }
  .rl-mdu-parts { margin-top: 40px; }
}