.sp-scenes .sp-scene--voip {
  grid-template-columns: minmax(0, 1fr);
}

.sp-scenes .sp-scene--voip > div {
  padding: clamp(24px, 4vw, 48px) 0;
}

.sp-scene--voip .voip-route {
  --voip-ink: #172a39;
  --voip-muted: #587080;
  --voip-panel: #eaf3f5;
  --voip-device: #263c4a;
  --voip-line: #23a9a0;
  display: block;
  width: 100%;
  padding: clamp(18px, 3vw, 34px);
  border-radius: 24px;
  background: var(--voip-panel);
  color: var(--voip-ink);
  box-shadow: inset 0 0 0 1px rgba(27, 64, 78, .09);
}

html[data-theme="dark"] .sp-scene--voip .voip-route {
  --voip-ink: #f0f8fa;
  --voip-muted: #afc5d0;
  --voip-panel: #132631;
  --voip-device: #d4e9ed;
  --voip-line: #56d7c5;
}

.voip-route > figcaption {
  margin: 0 0 24px;
  color: var(--voip-ink);
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  font-weight: 750;
  line-height: 1.2;
}

.voip-route__chain {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(9px, 1.3vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.voip-route__node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.voip-route__node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 47px;
  left: calc(50% + 46px);
  width: calc(100% - 72px);
  min-width: 10px;
  height: 3px;
  border-radius: 4px;
  background: var(--voip-line);
  box-shadow: 0 0 10px color-mix(in srgb, var(--voip-line), transparent 60%);
}

.voip-route__node:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 42px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-top: 3px solid var(--voip-line);
  border-right: 3px solid var(--voip-line);
  transform: rotate(45deg);
}

.voip-route__icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 94px;
  width: min(100%, 108px);
  height: 94px;
  color: var(--voip-device);
}

.voip-route__icon svg { width: 88px; height: 88px; overflow: visible; }
.voip-route__phone svg path { fill: var(--voip-device); }
.voip-route__phone svg rect { fill: var(--voip-panel); }
.voip-route__phone svg circle { fill: var(--voip-panel); }
.voip-route__cloud svg path { fill: none; stroke: var(--voip-device); stroke-width: 5; stroke-linejoin: round; }
.voip-route__pbx svg rect { fill: none; stroke: var(--voip-device); stroke-width: 5; }
.voip-route__pbx svg path { fill: none; stroke: var(--voip-device); stroke-width: 5; stroke-linecap: round; }
.voip-route__pbx svg circle { fill: var(--voip-line); }

.voip-route__switch::before,
.voip-route__router::before {
  content: "";
  width: 94px;
  height: 47px;
  border-radius: 9px;
  background: var(--voip-device);
  box-shadow: 0 9px 0 color-mix(in srgb, var(--voip-device), transparent 70%);
}

.voip-route__ports {
  position: absolute;
  top: 38px;
  display: flex;
  gap: 5px;
}

.voip-route__ports i {
  width: 12px;
  height: 11px;
  border: 2px solid var(--voip-panel);
  border-radius: 2px;
  background: var(--voip-panel);
  opacity: .5;
}

.voip-route__ports i.connected {
  position: relative;
  opacity: 1;
  background: var(--voip-line);
}

.voip-route__ports i.connected::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #69e59a;
  box-shadow: 0 0 6px #69e59a;
  animation: voip-link 2.4s steps(1) infinite;
}

.voip-route__router::after {
  content: "";
  position: absolute;
  top: 13px;
  width: 67px;
  height: 37px;
  border-left: 5px solid var(--voip-device);
  border-right: 5px solid var(--voip-device);
  transform: perspective(70px) rotateX(10deg);
}

.voip-route__router i,
.voip-route__router b {
  position: absolute;
  top: 52px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--voip-line);
  z-index: 1;
}
.voip-route__router i:first-child { left: calc(50% - 22px); }
.voip-route__router i:nth-child(2) { left: calc(50% - 10px); }
.voip-route__router b { right: calc(50% - 28px); background: #69e59a; }

.voip-route__node strong {
  display: block;
  margin-top: 14px;
  color: var(--voip-ink);
  font-size: clamp(.82rem, 1vw, 1rem);
  line-height: 1.25;
}

.voip-route__node small {
  display: block;
  margin-top: 5px;
  color: var(--voip-muted);
  font-size: clamp(.71rem, .9vw, .86rem);
  line-height: 1.35;
}

.voip-route > p {
  margin: 26px 0 0;
  color: var(--voip-muted);
  font-size: .86rem;
  line-height: 1.45;
}

@keyframes voip-link { 50% { opacity: .45; } }

@media (max-width: 900px) {
  .voip-route__chain { grid-template-columns: 1fr; gap: 0; }
  .voip-route__node {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    min-height: 102px;
    padding: 5px 0 24px;
    text-align: left;
  }
  .voip-route__icon { grid-column: 1; grid-row: 1 / 3; width: 86px; transform: scale(.76); transform-origin: left center; }
  .voip-route__node strong { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 4px; font-size: .98rem; }
  .voip-route__node small { grid-column: 2; grid-row: 2; align-self: start; margin: 0; font-size: .84rem; }
  .voip-route__node:not(:last-child)::after {
    top: 84px;
    left: 36px;
    width: 3px;
    min-width: 0;
    height: 29px;
  }
  .voip-route__node:not(:last-child)::before {
    top: 101px;
    left: 32px;
    right: auto;
    transform: rotate(135deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .voip-route__ports i.connected::after { animation: none; }
}

/* Honest print path: a printer belongs to the LAN / configured print service, not a WAN port. */
.sp-scenes .print-route {
  width: 100%;
  padding: clamp(22px, 3vw, 38px);
  border-radius: 24px;
  background: #eaf3f5;
  color: #172a39;
  box-shadow: inset 0 0 0 1px rgba(27, 64, 78, .09);
}
html[data-theme="dark"] .sp-scenes .print-route { background: #132631; color: #f0f8fa; }
.print-route > figcaption { margin: 0 0 24px; color: inherit; font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 750; }
.print-route ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.print-route li { position: relative; min-height: 132px; padding: 20px; border-radius: 16px; background: rgba(255,255,255,.7); border: 1px solid rgba(23,42,57,.16); }
html[data-theme="dark"] .print-route li { background: rgba(2,15,22,.54); border-color: rgba(212,233,237,.2); }
.print-route li::before { content: counter(list-item, decimal-leading-zero); display: block; margin-bottom: 8px; color: #117970; font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
html[data-theme="dark"] .print-route li::before { color: #56d7c5; }
.print-route li strong { display: block; font-size: 1.1rem; line-height: 1.2; }
.print-route li span { display: block; margin-top: 6px; font-size: .86rem; line-height: 1.5; opacity: .78; }
.print-route li:not(:last-child)::after { content: '→'; position: absolute; right: 12px; bottom: 6px; color: #117970; font-size: 1.3rem; }
html[data-theme="dark"] .print-route li:not(:last-child)::after { color: #56d7c5; }
.print-route > p { margin: 20px 0 0; font-size: .82rem; line-height: 1.5; opacity: .8; }
@media (max-width: 600px) { .print-route ol { grid-template-columns: 1fr; } .print-route li { min-height: 0; } .print-route li:not(:last-child)::after { transform: rotate(90deg); } }