/* Optronix v4: services group B (critical IT & office deployments, rack/stack/patch,
   programme & project management, WiFi survey & design, white glove logistics,
   ITAD & WEEE, secure storage). Shared detail-page template first, then each page's
   bespoke figure. Tokens only; every figure works without JS and under reduced motion. */

/* ================================================================ shared template */
.svcb { --stage: var(--stage-4); }
.svcb .eyebrow .svcb-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--stage); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage) 22%, transparent);
}

.svcb-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--stage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage) 22%, transparent);
}

/* hero: same rhythm as the other service pages (title scale, chips, drawing plate) */
.svcb-hero .page-hero__inner { align-items: center; }
.svcb-hero .page-hero__title { font-size: clamp(2.4rem, 1.3rem + 3.3vw, 4.75rem); }
.svcb-hero__chips { margin-top: var(--s-6); }
.svcb-hero .page-hero__visual { --ratio: 1 / 1; }
.svcb-plate {
  position: absolute; inset: 0; margin: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid var(--line); border-radius: var(--r-2);
  background:
    radial-gradient(70% 60% at 60% 45%, color-mix(in srgb, var(--stage) 12%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0));
}
.svcb-plate__bar {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px;
  font: 500 10px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-4);
}
.svcb-plate__bar b { font-weight: 500; color: var(--fg-3); }
.svcb-plate__bar--foot { border-top: 1px solid var(--line); }
.svcb-plate__bar--head { border-bottom: 1px solid var(--line); }
.svcb-plate__art { position: relative; min-height: 0; --pp: clamp(10px, 2.2vw, 28px); }
.svcb-plate__art > svg { position: absolute; left: var(--pp); top: var(--pp); width: calc(100% - 2 * var(--pp)); height: calc(100% - 2 * var(--pp)); }
@media (max-width: 899px) {
  .svcb-hero .page-hero__visual { --ratio: 5 / 4; margin-inline: auto; max-width: 560px; max-height: none; }
}
@media (max-width: 459px) {
  .svcb-plate__bar { padding: 9px 10px; font-size: 9px; }
  .svcb-plate__bar span:nth-child(2) { display: none; }
}

/* line-art language shared by every drawing */
.svcb-art { display: block; width: 100%; height: auto; overflow: visible; }
.svcb-art .ln, .svcb-art .ln * { fill: none; stroke: var(--line-3); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.svcb-art .ln--faint, .svcb-art .ln--faint * { stroke: var(--line-2); }
.svcb-art .ln--glass, .svcb-art .ln--glass * { stroke: rgba(161, 163, 255, 0.45); stroke-dasharray: 4 3; }
.svcb-art .ac, .svcb-art .ac * { fill: none; stroke: var(--ox-300); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.svcb-art .dm, .svcb-art .dm * { fill: none; stroke: var(--fg-4); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svcb-art .face { fill: rgba(255, 255, 255, 0.012); }
.svcb-art .face--top { fill: rgba(161, 163, 255, 0.05); }
.svcb-art .face--side { fill: rgba(255, 255, 255, 0.022); }
.svcb-art .face--front { fill: rgba(8, 8, 13, 0.55); }
.svcb-art .face--acc { fill: rgba(161, 163, 255, 0.16); }
.svcb-art .face--acc2 { fill: rgba(123, 126, 242, 0.12); }
.svcb-art .face--acc3 { fill: rgba(92, 225, 230, 0.08); }
.svcb-art .lb { font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.08em; fill: var(--fg-3); text-transform: uppercase; paint-order: stroke; stroke: var(--ink-0); stroke-width: 3px; stroke-linejoin: round; }
.svcb-art .lb--hi { fill: var(--fg-2); }
.svcb-art .lb--ink { fill: var(--ink-0); stroke: none; font-weight: 600; }
.svcb-art .big { font: 500 26px/1 var(--font-mono); letter-spacing: -0.02em; fill: var(--fg); }
.svcb-art .big--s { font-size: 21px; }
.svcb-art .node { fill: var(--ink-1); stroke: var(--cyan); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.svcb-art .led { fill: var(--cyan); animation: svcb-blink 2.8s steps(2, jump-none) infinite; }
.svcb-art .led--v { fill: var(--violet); animation-delay: -1.3s; }
.svcb-art .lightpath__base, .svcb-art .lightpath__pulse { vector-effect: non-scaling-stroke; }
@keyframes svcb-blink { 0%, 70% { opacity: 1; } 85% { opacity: 0.25; } 100% { opacity: 1; } }

/* RSP rack */
.svcb-art .dv { fill: rgba(255, 255, 255, 0.03); }
.svcb-art .dv--acc { fill: rgba(123, 126, 242, 0.16); stroke: rgba(161, 163, 255, 0.55); }
.svcb-art .dv--blank { fill: rgba(255, 255, 255, 0.012); stroke: var(--line-2); }
.svcb-art .ports { fill: none; stroke: var(--line-3); stroke-width: 3; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.svcb-art .vent { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 1 3; vector-effect: non-scaling-stroke; }
.svcb-art .cord { fill: none; stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.svcb-art .cord--f { stroke: var(--cyan); opacity: 0.85; }
.svcb-art .cord--c { stroke: #b9a2ff; opacity: 0.55; }
.svcb-art .trunk { fill: none; stroke: var(--ox-300); stroke-width: 3; opacity: 0.55; vector-effect: non-scaling-stroke; }
.svcb-art .slide { animation: svcb-slide 6s var(--ease-in-out) infinite; }
@keyframes svcb-slide { 0%, 18% { transform: translate(0, 0); } 48%, 70% { transform: translate(-46px, -27px); } 100% { transform: translate(0, 0); } }

/* CIT clock */
.svcb-art--clock .day { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.svcb-art--clock .win-base { fill: none; stroke: rgba(123, 126, 242, 0.16); stroke-width: 18; vector-effect: non-scaling-stroke; }
.svcb-art--clock .win { fill: none; stroke: url(#ox-grad-mark); stroke-width: 2; vector-effect: non-scaling-stroke; }
.svcb-art--clock .ph { fill: var(--ink-0); stroke: var(--cyan); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.svcb-art--clock .hand { transform-origin: 280px 270px; transform-box: view-box; animation: svcb-hand 14s linear infinite; }
.svcb-art--clock .hand path { stroke: var(--fg-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svcb-art--clock .hand__tip { fill: #e9fbff; filter: drop-shadow(0 0 6px var(--cyan)) drop-shadow(0 0 14px rgba(140, 82, 255, 0.8)); }
.svcb-art--clock .hand__hub { fill: var(--ink-0); stroke: var(--line-3); }
@keyframes svcb-hand { from { transform: rotate(270deg); } to { transform: rotate(480deg); } }

/* PPM network */
.svcb-art--net .nd { fill: var(--ink-1); }
.svcb-art--net .nd--crit { fill: color-mix(in srgb, var(--ox-500) 16%, var(--ink-1)); stroke: rgba(161, 163, 255, 0.6); }
.svcb-art--net .dep path { fill: none; stroke: var(--line-3); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.svcb-art--net .bar path { fill: none; stroke: var(--line-2); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.svcb-art--net .gate-line { fill: none; stroke: rgba(92, 225, 230, 0.28); stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.svcb-art--net .gate { fill: var(--ink-0); stroke: var(--cyan); stroke-width: 1.4; vector-effect: non-scaling-stroke; animation: svcb-gate 5s var(--ease-out) infinite; animation-delay: calc(var(--i) * 1.2s); }
.svcb-art--net .hp { fill: rgba(245, 184, 74, 0.12); stroke: var(--warn); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.svcb-art--net .now path { stroke: var(--ox-300); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svcb-art--net .now rect { fill: var(--ox-300); }
@keyframes svcb-gate { 0%, 100% { fill: var(--ink-0); } 10% { fill: var(--cyan); } 30% { fill: var(--ink-0); } }

/* WiFi floor */
.svcb-art--wifi .grid path { fill: none; stroke: rgba(255, 255, 255, 0.045); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svcb-art--wifi .ring { fill: none; stroke: rgba(92, 225, 230, 0.4); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.svcb-art--wifi .wave { fill: none; stroke: var(--cyan); stroke-width: 1.2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; animation: svcb-wave 4.2s var(--ease-out) infinite; animation-delay: calc(var(--i) * 1.4s); }
.svcb-art--wifi .ap { fill: var(--ink-2); stroke: var(--fg-2); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.svcb-art--wifi .link { fill: none; stroke: rgba(92, 225, 230, 0.5); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; animation: svcb-dash 1.6s linear infinite; }
@keyframes svcb-wave { 0% { transform: scale(0.08); opacity: 0.9; } 100% { transform: scale(1); opacity: 0; } }
@keyframes svcb-dash { to { stroke-dashoffset: -12; } }

@media (prefers-reduced-motion: reduce) {
  .svcb-art--clock .hand { animation: none; transform: rotate(390deg); }
  .svcb-art--wifi .wave { animation: none; opacity: 0; }
  .svcb-art .slide { animation: none; transform: translate(-46px, -27px); }
}

/* WGL route */
.svcb-art--route .map path { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 6; vector-effect: non-scaling-stroke; }
.svcb-art--route .blk rect { fill: rgba(255, 255, 255, 0.018); stroke: rgba(255, 255, 255, 0.05); }
.svcb-art--route .route-shadow { fill: none; stroke: rgba(123, 126, 242, 0.18); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.svcb-art--route .route { fill: none; stroke: var(--ox-300); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.svcb-art--route .fence { fill: rgba(92, 225, 230, 0.05); stroke: rgba(92, 225, 230, 0.45); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.svcb-art--route .cp { fill: var(--ink-0); stroke: var(--line-3); stroke-width: 1.4; vector-effect: non-scaling-stroke; transition: stroke var(--t-med), fill var(--t-med); }
.svcb-art--route .cp.is-done { stroke: var(--cyan); fill: color-mix(in srgb, var(--cyan) 30%, var(--ink-0)); }
.svcb-art--route .van__body rect, .svcb-art--route .van__body path { fill: var(--ink-2); stroke: #e9fbff; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.svcb-art--route .van__body circle { fill: var(--ink-0); stroke: #e9fbff; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.svcb-art--route .van__ping { fill: none; stroke: var(--cyan); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: svcb-wave 2.4s var(--ease-out) infinite; }
.svcb-art--route .card-st rect { fill: rgba(14, 14, 21, 0.86); stroke: var(--line-2); vector-effect: non-scaling-stroke; }
.svcb-art--route .lb--v { fill: var(--cyan); }

/* ITAD drive */
.svcb-art--itad .platter { fill: rgba(161, 163, 255, 0.1); stroke: var(--ox-300); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.svcb-art--itad .track { fill: none; stroke: rgba(161, 163, 255, 0.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svcb-art--itad .hubc { fill: var(--ink-1); stroke: var(--ox-300); vector-effect: non-scaling-stroke; }
.svcb-art--itad .arm { stroke-width: 3; }
.svcb-art--itad .guide path { stroke-dasharray: 2 4; }
.svcb-art--itad .pt { fill: rgba(161, 163, 255, 0.12); stroke: var(--ox-300); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.svcb-art--itad .sheet { fill: rgba(244, 244, 248, 0.04); stroke: var(--line-3); vector-effect: non-scaling-stroke; }
.svcb-art--itad .sig { fill: none; stroke: var(--fg-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svcb-art--itad .stamp circle, .svcb-art--itad .stamp path { fill: none; stroke: var(--cyan); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.svcb-art--itad .ex--1 { animation: svcb-ex1 7s var(--ease-in-out) infinite; }
.svcb-art--itad .ex--3 { animation: svcb-ex3 7s var(--ease-in-out) infinite; }
@keyframes svcb-ex1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes svcb-ex3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* Storage cage */
.svcb-art--store .grid path { fill: none; stroke: rgba(255, 255, 255, 0.04); vector-effect: non-scaling-stroke; }
.svcb-art--store .mesh path { fill: none; stroke: rgba(161, 163, 255, 0.13); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svcb-art--store .tag { fill: rgba(92, 225, 230, 0.5); stroke: none; }
.svcb-art--store .tag--hot { fill: var(--cyan); }
.svcb-art--store .bx--hot .face { fill: rgba(92, 225, 230, 0.12); }
.svcb-art--store .bx--hot path { stroke: var(--cyan); }
.svcb-art--store .reader { fill: var(--ink-2); stroke: var(--fg-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svcb-art--store .cam { fill: var(--ink-2); stroke: var(--fg-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svcb-art--store .cone { fill: rgba(140, 82, 255, 0.07); stroke: rgba(161, 163, 255, 0.2); stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; transform-box: view-box; transform-origin: 520px 66px; animation: svcb-cone 8s var(--ease-in-out) infinite; }
@keyframes svcb-cone { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }

/* ================================================================ template sections */
/* 01 overview: copy left, benefits card right */
.svcb-overview__copy > * + * { margin-top: var(--s-5); }
.svcb-overview__copy .h2 { margin-bottom: var(--s-6); }
.svcb-overview__copy p:not(.eyebrow) { color: var(--fg-2); font-size: 1.125rem; line-height: 1.65; max-width: 38em; text-wrap: pretty; }
.svcb-benefits { gap: var(--s-5); }
.svcb-benefits__title {
  display: flex; align-items: center; gap: 10px;
  font: 500 var(--fs-mono)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3);
}
.svcb-benefits .ticks li { color: var(--fg); }
.svcb-benefits__foot { border-top: 1px solid var(--line); padding-top: var(--s-4); display: flex; flex-wrap: wrap; gap: 8px 16px; }
.svcb-proof {
  margin-top: clamp(56px, 7vw, 112px);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-7) clamp(32px, 5vw, 80px); align-items: end;
}
.svcb-proof--solo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 899px) { .svcb-proof { grid-template-columns: minmax(0, 1fr); } }
.svcb-proof .stat__label { max-width: 26em; }
.svcb-le { font-size: 0.7em; margin-right: 0.04em; color: var(--accent-text); vertical-align: 0.12em; }
.svcb-quote {
  position: relative; margin: 0; padding: clamp(24px, 2.6vw, 36px);
  border: 1px solid var(--line-2); border-radius: var(--r-3);
  background: linear-gradient(160deg, rgba(123, 126, 242, 0.1), transparent 55%), var(--ink-2);
}
.svcb-quote::before {
  content: ""; position: absolute; left: clamp(24px, 2.6vw, 36px); top: -1px; width: 40px; height: 2px; background: var(--grad-mark-h);
}
.svcb-quote blockquote { margin: 0; }
.svcb-quote blockquote p { font-size: clamp(1.125rem, 1.02rem + 0.4vw, 1.375rem); line-height: 1.45; color: var(--fg); text-wrap: pretty; letter-spacing: -0.01em; }
.svcb-quote blockquote p::before { content: "\201C"; }
.svcb-quote blockquote p::after { content: "\201D"; }
.svcb-quote figcaption { margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: var(--fs-small); color: var(--fg-3); }
.svcb-quote figcaption .mono { color: var(--accent-text); }

/* 02 figure band */
.svcb-figsec { overflow: clip; }
.svcb-fig {
  position: relative; margin: 0; min-width: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-3);
  background: radial-gradient(120% 80% at 50% 0%, rgba(123, 126, 242, 0.08), transparent 60%), var(--ink-1);
}
.svcb-fig__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.svcb-fig__bar .mono { font-size: 10.5px; color: var(--fg-3); }
.svcb-fig__bar .mono.accent { color: var(--accent-text); }
.svcb-fig__hint { margin-left: auto; }
.svcb-fig__hint::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); vertical-align: 1px; }
@media (max-width: 599px) { .svcb-fig__hint { margin-left: 0; width: 100%; } }
.svcb-fig .lb { font: 500 9px/1 var(--font-mono); letter-spacing: 0.08em; fill: var(--fg-3); text-transform: uppercase; }
.svcb-fig .lb--hi { fill: var(--fg-2); }
.svcb-fig .dm, .svcb-fig .dm * { fill: none; stroke: var(--fg-4); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* small mono data table (patch schedules, custody logs) */
.svcb-table { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--ink-1); }
.svcb-table:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.svcb-table table { width: 100%; border-collapse: collapse; font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.02em; }
.svcb-table th { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line-2); color: var(--fg-3); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; white-space: nowrap; }
.svcb-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--fg-2); white-space: nowrap; }
.svcb-table tr:last-child td { border-bottom: 0; }
.svcb-table tbody tr { transition: background-color var(--t-med); }
.svcb-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }


/* 05 paper detail */
.svcb-detail .grid-12 { row-gap: var(--s-8); }
/* ox.css sets .span-6 as 'grid-column: span 6', which .start-7 then overrides to a single column: pin both ends here */
@media (min-width: 900px) { .svcb-detail .span-5 { grid-column: 1 / span 5; } .svcb-detail .span-6.start-7 { grid-column: 7 / span 6; } }
.svcb-logo-tile { display: inline-flex; align-items: center; gap: 14px; margin-top: var(--s-5); padding: 12px 16px; border-radius: var(--r-2); background: var(--ink-1); border: 1px solid var(--line-2); }
.svcb-logo-tile img { height: 26px; width: auto; }
.svcb-logo-tile span { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }

/* related */
.svcb-rel .card__eyebrow { display: flex; align-items: center; gap: 8px; }
.svcb-rel__more { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: var(--s-7); }

/* ================================================================ RSP: rack elevation */
.rsp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px); align-items: start; }
.rsp__draw { padding: clamp(10px, 2vw, 28px) clamp(6px, 1.6vw, 24px); }
.rsp__svg { display: block; width: 100%; height: auto; margin-inline: auto; overflow: visible; }
@media (min-width: 1100px) { .rsp__svg { max-height: calc(100vh - 200px); min-height: 420px; } .rsp__draw { padding: 14px 10px; } }
.rsp__svg .rk { fill: none; stroke: var(--line-3); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.rsp__svg rect.rk { fill: rgba(255, 255, 255, 0.012); }
.rsp__svg .holes { fill: none; stroke: var(--fg-4); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rsp__svg .mgr { fill: rgba(255, 255, 255, 0.015); stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rsp__svg .fingers { fill: none; stroke: var(--line-2); vector-effect: non-scaling-stroke; }
.rsp__svg .un { font: 500 7.5px/1 var(--font-mono); fill: var(--fg-4); letter-spacing: 0.04em; transition: fill var(--t-med); }
.rsp__svg .un.is-hot { fill: var(--cyan); }
.rsp-dev { cursor: pointer; outline: none; }
.rsp-dev .body { fill: var(--ink-2); stroke: var(--line-3); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke var(--t-fast), fill var(--t-fast); }
.rsp-dev .body--ppf, .rsp-dev .body--sw { fill: color-mix(in srgb, var(--ox-500) 12%, var(--ink-2)); }
.rsp-dev .body--st { fill: color-mix(in srgb, var(--ox-500) 8%, var(--ink-2)); }
.rsp-dev .body--bl { fill: var(--ink-1); stroke: var(--line-2); }
.rsp-dev .body--pdu { fill: transparent; stroke: var(--fg-4); stroke-dasharray: 3 3; }
.rsp-dev .hatch { fill: url(#ox-hatch); opacity: 0.35; }
.rsp-dev .port { fill: rgba(255, 255, 255, 0.04); stroke: var(--fg-4); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.rsp-dev .port--f { stroke: rgba(92, 225, 230, 0.6); }
.rsp-dev .port--sw { stroke: rgba(161, 163, 255, 0.55); }
.rsp-dev .bay { fill: rgba(255, 255, 255, 0.02); stroke: var(--line-2); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.rsp-dev .vent, .rsp-dev .fing { fill: none; stroke: var(--line-2); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.rsp-dev .led { fill: var(--cyan); }
.rsp-dev .led--v { fill: var(--violet); }
.rsp-dev:hover .body { stroke: var(--ox-300); }
.rsp-dev:focus-visible .body { stroke: var(--focus); stroke-width: 2.4; }
.rsp-dev.is-sel .body { stroke: var(--cyan); fill: color-mix(in srgb, var(--cyan) 14%, var(--ink-2)); filter: drop-shadow(0 0 6px rgba(92, 225, 230, 0.45)); }
.rsp-dev--pdu.is-sel .body { fill: rgba(92, 225, 230, 0.12); }
.rsp__svg .cord { fill: none; stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.rsp__svg .cord--f { stroke: var(--cyan); }
.rsp__svg .cord--c { stroke: #b9a2ff; opacity: 0.8; }
.rsp__svg .cord--c2 { stroke: var(--ox-300); opacity: 0.7; }
.rsp__svg .cord.is-hot { stroke-width: 2; opacity: 1; filter: drop-shadow(0 0 3px currentColor); }
.rsp-lab .lb { font-size: 8.5px; }
.rsp-lab.is-hot .lb { fill: var(--cyan); }
.rsp-stamp rect { fill: rgba(92, 225, 230, 0.06); stroke: rgba(92, 225, 230, 0.5); vector-effect: non-scaling-stroke; }
.rsp-stamp path { fill: none; stroke: var(--cyan); stroke-width: 1.6; vector-effect: non-scaling-stroke; }

.rsp__side { display: grid; gap: var(--s-6); min-width: 0; }
.rsp__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rsp__steps li {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px;
  padding: 14px 14px 14px 12px; border-radius: var(--r-2); border-left: 2px solid var(--line);
  opacity: 0.6; transition: opacity var(--t-med), background-color var(--t-med), border-color var(--t-med);
}
.rsp__steps li.is-on { opacity: 1; background: rgba(255, 255, 255, 0.025); border-left-color: var(--cyan); }
.rsp__steps li.is-past { opacity: 1; border-left-color: rgba(161, 163, 255, 0.45); }
.rsp__steps .mono { color: var(--accent-text); padding-top: 3px; }
.rsp__steps h3 { font-size: 1.0625rem; line-height: 1.3; color: var(--fg); font-weight: 500; }
.rsp__steps p { margin-top: 4px; font-size: var(--fs-small); color: var(--fg-2); line-height: 1.5; }
html:not(.js) .rsp__steps li { opacity: 1; }
.rsp__panel {
  position: relative; padding: clamp(20px, 2vw, 28px); border-radius: var(--r-3);
  border: 1px solid rgba(92, 225, 230, 0.3); background: linear-gradient(160deg, rgba(92, 225, 230, 0.07), transparent 55%), var(--ink-2);
}
.rsp__u { color: var(--cyan); }
.rsp__name { margin-top: 8px; font-size: var(--fs-h4); line-height: 1.25; color: var(--fg); font-weight: 500; letter-spacing: -0.01em; }
.rsp__dl { margin: var(--s-4) 0 0; display: grid; gap: 12px; }
.rsp__dl > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
.rsp__dl dt { font: 500 10.5px/1.6 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.rsp__dl dd { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: var(--fg-2); }
.rsp__panel.is-swap .rsp__name, .rsp__panel.is-swap .rsp__dl { animation: ox-tabin 0.45s var(--ease-out); }
.rsp__docs { margin-top: clamp(32px, 4vw, 56px); display: grid; gap: var(--s-4); }
.rsp__docs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
@media (max-width: 1099px) {
  .rsp { grid-template-columns: minmax(0, 1fr); }
  .rsp__fig { max-width: 640px; width: 100%; margin-inline: auto; }
  .rsp__side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 799px) {
  .rsp__side { grid-template-columns: minmax(0, 1fr); }
  .rsp__panel { order: -1; }
}

/* ================================================================ PPM: programme */
.ppm__fig { overflow: hidden; }
.ppm__fig.corners { overflow: visible; }
.ppm__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ppm__toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.ppm__toggles .chip { cursor: pointer; }
.svcb button.chip--mono { font: 500 10.5px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.ppm__toggles .chip[aria-pressed="false"] { opacity: 0.5; border-color: var(--line-2); background: transparent; }
.ppm__chart { --lw: 220px; --pad: clamp(14px, 2vw, 24px); position: relative; overflow: hidden; padding: 38px var(--pad) 34px; }
.ppm__scale { display: grid; grid-template-columns: var(--lw) minmax(0, 1fr); }
.ppm__weeks { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--fg-4); }
.ppm__weeks span { padding: 0 0 9px 4px; border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.ppm__rows { list-style: none; margin: 0; padding: 0; }
.ppm__row { display: grid; grid-template-columns: var(--lw) minmax(0, 1fr); align-items: center; border-top: 1px solid var(--line); }
.ppm__row:last-child { border-bottom: 1px solid var(--line); }
.ppm__label { padding-right: 14px; font-size: 0.875rem; line-height: 1.3; color: var(--fg-3); transition: color var(--t-med); }
.ppm__row.is-crit .ppm__label { color: var(--fg); }
.ppm.hide-crit .ppm__row.is-crit .ppm__label { color: var(--fg-3); }
.ppm__track { position: relative; height: 46px; background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 6.25%); }
.ppm__bar {
  position: absolute; top: 14px; height: 18px; border-radius: 4px; overflow: hidden;
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line-3);
  transform-origin: left center;
}
.ppm__fill { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.16); transform-origin: left center; transform: scaleX(var(--f, 1)); }
.ppm__row.is-crit .ppm__bar { background: rgba(123, 126, 242, 0.12); box-shadow: inset 0 0 0 1px rgba(161, 163, 255, 0.55); }
.ppm__row.is-crit .ppm__fill { background: var(--grad-mark-h); opacity: 0.9; }
.ppm.hide-crit .ppm__row.is-crit .ppm__bar { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line-3); }
.ppm.hide-crit .ppm__row.is-crit .ppm__fill { background: rgba(255, 255, 255, 0.16); }
.ppm__hp {
  position: absolute; top: 50%; z-index: 3; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.ppm__hp svg { width: 16px; height: 14px; margin-top: -2px; overflow: visible; }
.ppm__hp path { fill: rgba(245, 184, 74, 0.18); stroke: var(--warn); stroke-width: 1.4; stroke-linejoin: round; transition: fill var(--t-med); }
.ppm__hp.is-passed path, .ppm__hp[aria-pressed="true"] path { fill: var(--warn); }
.ppm__hp[aria-pressed="true"] svg { filter: drop-shadow(0 0 6px rgba(245, 184, 74, 0.8)); }
.ppm__hp span { position: absolute; left: 24px; top: 50%; translate: 0 -50%; font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--warn); white-space: nowrap; }
.ppm__over { position: absolute; top: 6px; bottom: 34px; left: calc(var(--pad) + var(--lw)); right: var(--pad); pointer-events: none; }
.ppm__gate {
  position: absolute; top: 0; bottom: 0; width: 34px; margin-left: -17px; padding: 0; border: 0; background: none;
  pointer-events: auto; cursor: pointer; border-radius: var(--r-1);
}
.ppm__gate::after {
  content: ""; position: absolute; left: 50%; top: 26px; bottom: 0; width: 1px;
  background: repeating-linear-gradient(180deg, rgba(92, 225, 230, 0.55) 0 3px, transparent 3px 7px);
}
.ppm__diamond {
  position: absolute; left: 50%; top: 5px; width: 13px; height: 13px; margin-left: -6.5px;
  transform: rotate(45deg); background: var(--ink-1); border: 1.5px solid var(--cyan);
  transition: background-color var(--t-med), box-shadow var(--t-med);
}
.ppm__gate.is-passed .ppm__diamond { background: var(--cyan); box-shadow: 0 0 12px rgba(92, 225, 230, 0.7); }
.ppm__gl { position: absolute; left: calc(50% + 12px); top: 6px; font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--cyan); }
.ppm__gate:last-of-type .ppm__gl { left: auto; right: calc(50% + 12px); }
.ppm__gate[aria-pressed="true"] .ppm__diamond { box-shadow: 0 0 0 4px rgba(92, 225, 230, 0.25), 0 0 16px rgba(92, 225, 230, 0.7); }
.ppm__gate:hover .ppm__diamond, .ppm__gate:focus-visible .ppm__diamond { background: rgba(92, 225, 230, 0.4); }
.ppm__gate:focus-visible, .ppm__hp:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ppm.hide-qg .ppm__gate, .ppm.hide-hp .ppm__hp { visibility: hidden; }
.ppm__now { position: absolute; top: 24px; bottom: 0; left: 0; width: 100%; transform: translateX(calc(var(--p, 1) * 100%)); }
.ppm__now i { position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; margin-left: -0.75px; background: var(--ox-300); box-shadow: 0 0 10px rgba(161, 163, 255, 0.8); }
.ppm__now b {
  position: absolute; left: 0; bottom: -26px; transform: translateX(calc(var(--p, 1) * -100%));
  padding: 3px 7px; border-radius: 3px; background: var(--ox-300); color: var(--ink-0);
  font: 600 9.5px/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.ppm__info { display: grid; gap: 6px; padding: 18px var(--pad, 20px) 22px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); }
.ppm__k { color: var(--cyan); }
.ppm__info.is-hp .ppm__k { color: var(--warn); }
.ppm__t { font-size: var(--fs-h4); line-height: 1.25; font-weight: 500; color: var(--fg); }
.ppm__d { color: var(--fg-2); font-size: var(--fs-small); max-width: 64em; }
.ppm__info.is-swap .ppm__t, .ppm__info.is-swap .ppm__d { animation: ox-tabin 0.45s var(--ease-out); }
@media (max-width: 799px) {
  .ppm__chart { --lw: 0px; padding-top: 34px; }
  .ppm__scale { grid-template-columns: minmax(0, 1fr); }
  .ppm__scale .ppm__label { display: none; }
  /* phones: only W01, W08 and W16 are labelled; every other label would sit under a gate line */
  .ppm__weeks span { overflow: visible; }
  .ppm__weeks span:not(:nth-child(1)):not(:nth-child(8)):not(:nth-child(16)) { color: transparent; }
  .ppm__weeks span:nth-child(16) { text-align: right; padding: 0 6px 9px 0; }
  .ppm__row { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
  .ppm__label { font-size: 0.8125rem; padding: 0; }
  .ppm__track { height: 34px; }
  .ppm__bar { top: 9px; height: 16px; }
  .ppm__hp span { display: none; }
  .ppm__gl { font-size: 9px; left: 50%; top: -13px; transform: translateX(-50%); }
  .ppm__gate:last-of-type .ppm__gl { left: 50%; right: auto; }
  .ppm__over { top: 20px; }
  .ppm__chart { padding-top: 52px; }
  .ppm__now { top: 30px; }
}

/* segmented control (shared by the figures) */
.svcb-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; max-width: 100%; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.02); }
.svcb-seg button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  min-height: 36px; padding: 0 16px; border-radius: var(--r-pill);
  font: 500 0.875rem/1 var(--font-sans); color: var(--fg-3); white-space: nowrap;
  transition: color var(--t-med), background-color var(--t-med), box-shadow var(--t-med);
}
.svcb-seg button:hover { color: var(--fg); }
.svcb-seg button[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: 0 6px 20px -8px rgba(123, 126, 242, 0.8); }
.svcb-seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 459px) { .svcb-seg button { padding: 0 12px; font-size: 0.8125rem; } }

/* ================================================================ WiFi: coverage model */
.wifi__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.wifi__legend { display: flex; align-items: center; min-height: 36px; }
.wifi__scale { display: grid; grid-template-columns: repeat(5, auto); gap: 6px 14px; font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--fg-3); }
.wifi__scale i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #5ce1e6, #6fa8f0 28%, #8c52ff 55%, rgba(90, 60, 160, 0.7) 78%, rgba(40, 30, 80, 0.2)); }
.wifi__scale .is-target { color: var(--fg); }
.wifi__chans { display: none; flex-wrap: wrap; gap: 8px 12px; font: 500 10px/1 var(--font-mono); color: var(--fg-2); }
.wifi__chans span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px; background: var(--c); vertical-align: -1px; }
.wifi[data-mode="chan"] .wifi__scale { display: none; }
.wifi[data-mode="chan"] .wifi__chans { display: flex; }
.wifi__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: clamp(16px, 2vw, 28px); padding: clamp(10px, 2vw, 24px); align-items: start; }
@media (max-width: 999px) { .wifi__body { grid-template-columns: minmax(0, 1fr); } }
.wifi__side { display: grid; gap: var(--s-5); min-width: 0; }
.wifi__aps tr.is-hot td { color: var(--cyan); background: rgba(92, 225, 230, 0.06); }
.wifi__aps td, .wifi__aps th { padding: 8px 12px; }
.wifi__stage {
  position: relative; aspect-ratio: 1000 / 600;
  border-radius: var(--r-2); overflow: hidden; background: #0a0a12; cursor: crosshair; touch-action: pan-y;
  box-shadow: inset 0 0 0 1px var(--line);
}
.wifi__stage:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.wifi__heat, .wifi__plan { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wifi__plan { pointer-events: none; }
.wf-floor { fill: rgba(255, 255, 255, 0.015); }
.wf-desks rect { fill: rgba(255, 255, 255, 0.025); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wf-desks path, .wf-core rect, .wf-core path { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wf-w { stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wf-w--ext { stroke: rgba(244, 244, 248, 0.5); stroke-width: 3; }
.wf-w--con { stroke: rgba(244, 244, 248, 0.75); stroke-width: 4; }
.wf-w--dry { stroke: rgba(244, 244, 248, 0.45); stroke-width: 2; }
.wf-w--gla { stroke: rgba(92, 225, 230, 0.65); stroke-width: 1.5; stroke-dasharray: 6 4; }
.wf-w--met { stroke: var(--warn); stroke-width: 3; }
.wf-only-a { opacity: 0; transition: opacity 0.5s var(--ease-out); }
.wifi[data-mode="active"] .wf-only-a { opacity: 1; }
.wf-rooms text { font: 500 12px/1 var(--font-mono); letter-spacing: 0.1em; fill: rgba(244, 244, 248, 0.62); }
.wf-note-a text { font: 600 12px/1 var(--font-mono); letter-spacing: 0.08em; fill: var(--warn); paint-order: stroke; stroke: rgba(8, 8, 13, 0.85); stroke-width: 4px; }
.wf-walk polyline { fill: none; stroke: rgba(244, 244, 248, 0.6); stroke-width: 1.4; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.wf-walk circle { fill: #e9fbff; }
.wf-ap__ring { fill: rgba(8, 8, 13, 0.55); stroke: #e9fbff; stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke var(--t-fast); }
.wf-ap__dot { fill: #e9fbff; }
.wf-ap__n { font: 600 14px/1 var(--font-mono); letter-spacing: 0.06em; fill: #fff; paint-order: stroke; stroke: rgba(8, 8, 13, 0.5); stroke-width: 3px; }
.wf-ap__ch { font: 500 13px/1 var(--font-mono); fill: rgba(244, 244, 248, 0.9); paint-order: stroke; stroke: rgba(8, 8, 13, 0.5); stroke-width: 3px; opacity: 0; transition: opacity 0.4s; }
.wifi[data-mode="chan"] .wf-ap__ch { opacity: 1; }
.wf-ap.is-hot .wf-ap__ring { stroke: var(--cyan); stroke-width: 3; }
.wf-scale path { fill: none; stroke: rgba(244, 244, 248, 0.6); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wf-scale text { font: 500 12px/1 var(--font-mono); letter-spacing: 0.08em; fill: rgba(244, 244, 248, 0.6); }
@media (max-width: 699px) {
  .wf-rooms text { font-size: 21px; }
  .wf-rooms text:nth-child(n + 4) { display: none; }
  .wf-ap__n { font-size: 24px; }
  .wf-ap__ch { font-size: 22px; }
  .wf-note-a text, .wf-scale text { font-size: 20px; }
  .wf-ap__ring { r: 20px; }
}
.wifi__probe { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0; transform: translate(var(--px, 50%), var(--py, 50%)); transition: opacity var(--t-fast); }
.wifi__probe.is-on { opacity: 1; }
.wifi__probe i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 3px rgba(8, 8, 13, 0.45), 0 0 14px rgba(92, 225, 230, 0.6); }
.wifi__probe span { position: absolute; left: 16px; white-space: nowrap; padding: 4px 8px; background: rgba(14, 14, 21, 0.92); border: 1px solid var(--line-2); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.04em; }
.wifi__probe-v { top: -26px; color: #fff; border-radius: 4px 4px 0 0; }
.wifi__probe-ap { top: -4px; color: var(--fg-3); border-top: 0 !important; border-radius: 0 0 4px 4px; }
.wifi__probe.is-left span { left: auto; right: 16px; }
.wifi__note { display: grid; gap: 8px; margin: 0; color: var(--fg-2); font-size: var(--fs-small); line-height: 1.55; min-height: 7.5em; }
.wifi__note b { color: var(--accent-text); font-weight: 500; }
.wifi__note.is-swap span { animation: ox-tabin 0.45s var(--ease-out); }

/* ================================================================ CIT: move night */
.cit__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: clamp(16px, 2vw, 28px); padding: clamp(10px, 2vw, 24px); align-items: start; }
@media (max-width: 999px) { .cit__body { grid-template-columns: minmax(0, 1fr); } }
.cit__main, .cit__side { min-width: 0; }
.cit__side { display: grid; gap: 12px; }
.cit__stage { position: relative; }
.cit__svg { display: block; width: 100%; height: auto; overflow: visible; }
html.no-js .cit__main, html.no-js .cit__read { display: none; }
.cit__read {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px;
  padding: 12px 14px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--ink-2);
  font: 500 10.5px/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3);
}
.cit__time { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.cit__ph { color: var(--cyan); }
.cit__count { flex-basis: 100%; }
.cit__svg .pl-box { fill: rgba(255, 255, 255, 0.015); stroke: var(--line-3); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: opacity 0.6s; }
.cit__svg .pl-room { fill: rgba(255, 255, 255, 0.02); stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cit__svg .pl-desk { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cit__svg .pl-door { stroke: var(--ink-1); stroke-width: 4; }
.cit__svg .pl-lab { font: 500 11px/1 var(--font-mono); letter-spacing: 0.1em; fill: var(--fg-3); text-transform: uppercase; }
.cit__svg .pl-lab--hi { fill: var(--fg); }
.cit__svg .pl-room-lab { font: 500 9px/1 var(--font-mono); letter-spacing: 0.1em; fill: var(--fg-4); }
.cit__svg .pl-a.is-dim { opacity: 0.45; }
.cit__svg .route-base { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.cit__svg .route-lit { fill: none; stroke: var(--ox-300); stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 0.4s; }
.cit__svg .route-lit.is-on { opacity: 1; }
.cit__svg .patch { fill: none; stroke: var(--cyan); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: 0.8; }
.cit__svg .it .dev { fill: var(--ink-2); stroke: var(--fg-3); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke 0.3s, fill 0.3s; }
.cit__svg .it .crate { fill: color-mix(in srgb, var(--ox-500) 20%, var(--ink-2)); stroke: var(--ox-300); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0; }
.cit__svg .it .dot { fill: var(--fg-4); }
.cit__svg .it.is-live .dot, .cit__svg .it.is-ok .dot { fill: var(--cyan); }
.cit__svg .it.is-live .dev { stroke: rgba(92, 225, 230, 0.7); }
.cit__svg .it.is-crate .crate { opacity: 1; }
.cit__svg .it.is-crate .dev, .cit__svg .it.is-crate .dot { opacity: 0; }
.cit__svg .it.is-ok .dev { stroke: var(--cyan); fill: color-mix(in srgb, var(--cyan) 14%, var(--ink-2)); }
.cit__svg .it .tick { fill: none; stroke: var(--cyan); stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: 0; }
.cit__svg .it.is-ok .tick { opacity: 1; }
.cit__svg .ready { opacity: 0; transition: opacity 0.5s; }
.cit__svg .ready.is-on { opacity: 1; }
.cit__svg .ready rect { fill: rgba(92, 225, 230, 0.1); stroke: var(--cyan); vector-effect: non-scaling-stroke; }
.cit__svg .ready text { font: 600 11px/1 var(--font-mono); letter-spacing: 0.12em; fill: var(--cyan); }
.cit__controls { display: flex; align-items: center; gap: 16px; padding-top: 16px; }
.cit__play {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--ink-2); color: var(--fg);
  transition: background-color var(--t-med), border-color var(--t-med);
}
.cit__play:hover { background: var(--accent); border-color: var(--accent); }
.cit__play:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cit__play svg { width: 18px; height: 18px; fill: currentColor; }
.cit__play .i-pause { display: none; }
.cit__play.is-playing .i-pause { display: block; }
.cit__play.is-playing .i-play { display: none; }
.cit__track { position: relative; flex: 1; min-width: 0; padding-bottom: 22px; }
.cit__range { width: 100%; margin: 0; accent-color: var(--ox-400); height: 28px; cursor: pointer; background: transparent; }
.cit__range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--violet), var(--blue) 55%, var(--cyan)); opacity: 0.85; }
.cit__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #e9fbff; box-shadow: 0 0 0 4px rgba(92, 225, 230, 0.25), 0 0 14px rgba(92, 225, 230, 0.6); }
.cit__range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--violet), var(--blue) 55%, var(--cyan)); }
.cit__range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #e9fbff; }
.cit__range { -webkit-appearance: none; appearance: none; }
.cit__range:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.cit__ticks { position: absolute; left: 9px; right: 9px; bottom: 0; height: 16px; }
.cit__ticks span { position: absolute; top: 0; transform: translateX(-50%); font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--fg-4); white-space: nowrap; }
.cit__ticks span:first-child { transform: none; }
.cit__ticks span:last-child { transform: translateX(-100%); }
@media (max-width: 699px) { .cit__ticks span:nth-child(2n) { display: none; } }
.cit__phases { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cit__phases button {
  width: 100%; text-align: left; display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: baseline; gap: 4px 10px; cursor: pointer;
  padding: 9px 12px; border-radius: var(--r-2); border: 1px solid transparent; background: transparent; color: var(--fg-2);
  font: inherit; transition: border-color var(--t-med), background-color var(--t-med);
}
.cit__phases button:hover { border-color: var(--line-2); }
.cit__phases button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cit__phases .mono { color: var(--fg-4); }
.cit__phases b { font-weight: 500; color: var(--fg-2); font-size: 0.9375rem; }
.cit__d { grid-column: 2; display: none; font-size: 0.8125rem; line-height: 1.5; color: var(--fg-3); }
.cit__phases button[aria-current="step"] { border-color: rgba(92, 225, 230, 0.45); background: rgba(92, 225, 230, 0.06); }
.cit__phases button[aria-current="step"] .mono { color: var(--cyan); }
.cit__phases button[aria-current="step"] b { color: var(--fg); }
.cit__phases button[aria-current="step"] .cit__d { display: block; }
.cit__phases button.is-past .mono { color: var(--accent-text); }
html.no-js .cit__d { display: block; }

/* ================================================================ WGL: packing layers + hero route */
.wgl__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(16px, 3vw, 48px); padding: clamp(14px, 2.4vw, 32px); align-items: center; }
@media (max-width: 899px) { .wgl__body { grid-template-columns: minmax(0, 1fr); } }
.wgl__draw { position: relative; min-width: 0; }
.wgl__svg { display: block; width: 100%; height: auto; max-height: 620px; overflow: visible; --e: 1; }
.wgl__toggle { position: absolute; left: 0; bottom: 0; }
@media (max-width: 899px) { .wgl__toggle { position: static; margin-top: 12px; } }
/* phones: the side labels would render at ~5px, so crop the drawing to the case itself (the
   numbered list below names every layer) and let it fill the width */
@media (max-width: 599px) {
  .wgl__draw { overflow: hidden; padding: 4px; margin: -4px; }
  .wgl__svg { width: 143%; max-width: none; max-height: none; }
  .wgl__svg .pk-lab { display: none; }
}
.wgl__svg .face { fill: var(--ink-2); stroke: var(--line-3); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.wgl__svg .face--top { fill: color-mix(in srgb, var(--ox-500) 7%, var(--ink-2)); }
.wgl__svg .face--side { fill: color-mix(in srgb, var(--ox-500) 4%, var(--ink-1)); }
.wgl__svg .face--front { fill: var(--ink-1); }
.wgl__svg .face--acc { fill: color-mix(in srgb, var(--ox-500) 18%, var(--ink-2)); stroke: rgba(161, 163, 255, 0.6); }
.wgl__svg .foam { fill: rgba(161, 163, 255, 0.1); stroke: rgba(161, 163, 255, 0.35); vector-effect: non-scaling-stroke; }
.wgl__svg .foam-l { fill: none; stroke: rgba(161, 163, 255, 0.2); vector-effect: non-scaling-stroke; }
.wgl__svg .bag { fill: rgba(92, 225, 230, 0.06); stroke: rgba(92, 225, 230, 0.55); stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.wgl__svg .bag-w { fill: none; stroke: rgba(92, 225, 230, 0.35); vector-effect: non-scaling-stroke; }
.wgl__svg .bayi { fill: rgba(255, 255, 255, 0.03); stroke: var(--line-3); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.wgl__svg .tagl, .wgl__svg .lbl { fill: rgba(244, 244, 248, 0.85); stroke: none; }
.wgl__svg .seal { fill: var(--cyan); }
.wgl__svg .led { fill: var(--cyan); }
.wgl__svg .lb { font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.08em; fill: var(--fg-3); text-transform: uppercase; }
.wgl__svg .lb--hi { fill: var(--fg-2); }
.wgl__svg .node { fill: var(--ink-1); stroke: var(--cyan); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wgl__svg .dm { fill: none; stroke: var(--fg-4); vector-effect: non-scaling-stroke; }
.pk-layer { transition: opacity var(--t-med); }
.pk-lab { opacity: clamp(0, calc((var(--e) - 0.55) * 3), 1); }
.wgl.has-sel .pk-layer { opacity: 0.28; }
.wgl.has-sel .pk-layer.is-sel { opacity: 1; }
.wgl .pk-layer.is-sel .lb--hi { fill: var(--cyan); }
.wgl .pk-layer.is-sel .face { stroke: rgba(92, 225, 230, 0.75); }
.wgl__layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wgl__layers button {
  width: 100%; text-align: left; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; align-items: baseline; cursor: pointer;
  padding: 12px 14px; border-radius: var(--r-2); border: 1px solid var(--line); background: transparent; color: var(--fg-2); font: inherit;
  transition: border-color var(--t-med), background-color var(--t-med);
}
.wgl__layers button:hover { border-color: var(--line-3); }
.wgl__layers button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wgl__layers .mono { color: var(--accent-text); }
.wgl__layers b { font-weight: 500; color: var(--fg); }
.wgl__d { grid-column: 2; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-3); display: none; }
.wgl__layers button[aria-pressed="true"] { border-color: rgba(92, 225, 230, 0.5); background: rgba(92, 225, 230, 0.06); }
.wgl__layers button[aria-pressed="true"] .wgl__d, html.no-js .wgl__d { display: block; }
html.no-js .wgl__toggle { display: none; }
/* hero route: the van is moved by JS; the card updates at each checkpoint */
.svcb-art--route .van { will-change: transform; }

/* ================================================================ ITAD: chain of custody */
.coc__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.coc__sn { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); }
.coc__sn i { width: 8px; height: 8px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.coc__replay { margin-left: auto; }
.coc .coc__steps {
  --k: 0; position: relative; list-style: none; margin: 0; padding: clamp(20px, 3vw, 36px) clamp(14px, 2vw, 24px) 8px;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
}
.coc__steps::before, .coc__steps::after {
  content: ""; position: absolute; left: calc(clamp(14px, 2vw, 24px) + (100% - 2 * clamp(14px, 2vw, 24px)) / 12); right: calc(clamp(14px, 2vw, 24px) + (100% - 2 * clamp(14px, 2vw, 24px)) / 12);
  top: calc(clamp(20px, 3vw, 36px) + 26px); height: 1px; background: var(--line-2);
}
.coc__steps::after { background: var(--grad-mark-h); transform-origin: left; transform: scaleX(calc(var(--k) / 5)); transition: transform 0.9s var(--ease-out); height: 2px; margin-top: -0.5px; }
.coc__step { position: relative; z-index: 1; min-width: 0; }
.coc__step button { width: 100%; display: grid; justify-items: center; text-align: center; gap: 8px; padding: 0 4px 12px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: var(--r-2); }
.coc__step button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.coc__ico {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-3); background: var(--ink-1); color: var(--fg-3);
  transition: border-color var(--t-med), color var(--t-med), box-shadow var(--t-med), background-color var(--t-med);
}
.coc__ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.coc__step.is-done .coc__ico { border-color: rgba(161, 163, 255, 0.6); color: var(--ox-300); }
.coc__step.is-now .coc__ico { border-color: var(--cyan); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, var(--ink-1)); box-shadow: 0 0 0 5px rgba(92, 225, 230, 0.12), 0 0 22px rgba(92, 225, 230, 0.45); }
.coc__n { color: var(--fg-4); }
.coc__step.is-done .coc__n { color: var(--accent-text); }
.coc__t { font-weight: 500; color: var(--fg); line-height: 1.25; }
.coc__d { font-size: 0.8125rem; line-height: 1.5; color: var(--fg-3); max-width: 22em; }
.coc__step:not(.is-done) .coc__t { color: var(--fg-3); }
.coc.is-onsite .coc__step[data-step="2"] .coc__ico { border-style: dashed; color: var(--fg-4); box-shadow: none; background: var(--ink-1); }
.coc__log { padding: 8px clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px); }
.coc__log tr { transition: opacity var(--t-med); }
.coc__log tr:not(.is-done) { opacity: 0.35; }
.coc__log tr.is-now td { color: var(--fg); }
.coc__st { color: var(--cyan) !important; }
.coc__log tr:not(.is-done) .coc__st { color: var(--fg-4) !important; }
@media (max-width: 899px) {
  .coc .coc__steps { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .coc .coc__steps::before, .coc .coc__steps::after { left: calc(clamp(14px, 2vw, 24px) + 26px); right: auto; top: calc(clamp(20px, 3vw, 36px) + 26px); bottom: 40px; width: 1px; height: auto; }
  .coc .coc__steps::after { width: 2px; margin: 0 0 0 -0.5px; transform-origin: top; transform: scaleY(calc(var(--k) / 5)); }
  .coc__step button { grid-template-columns: 52px 30px minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; gap: 4px 12px; padding: 0 0 14px; }
  .coc__d { grid-column: 3; }
  .coc__replay { margin-left: 0; }
}

/* ITAD: shred sizes */
.shred { margin-top: clamp(48px, 6vw, 88px); }
.shred__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: var(--s-6); }
.shred__head > .shred__intro { max-width: 46em; display: grid; gap: 12px; }
.shred__head .svcb-seg { flex: none; flex-wrap: nowrap; }
.shred__head p:not(.mono) { color: var(--fg-2); text-wrap: pretty; }
.shred__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
@media (max-width: 799px) { .shred__grid { grid-template-columns: minmax(0, 1fr); } }
.shred__svg { display: block; width: 100%; max-width: 440px; margin: 0 auto; height: auto; padding: 14px 10px 0; overflow: visible; }
.shred__st { margin: 0; padding: 0 18px 18px; text-align: center; font-size: var(--fs-small); color: var(--fg-2); min-height: 3.2em; }
.shred__panel.is-warn .shred__st { color: var(--warn); }
.shred__panel.is-ok .shred__st { color: var(--cyan); }
.shred__svg .smp-base--hdd { fill: #1b1838; }
.shred__svg .smp-arcs circle { fill: none; stroke: rgba(161, 163, 255, 0.35); stroke-width: 1.2; }
.shred__svg .smp-glint { stroke: rgba(255, 255, 255, 0.08); stroke-width: 40; }
.shred__svg .smp-base--ssd { fill: #10202a; }
.shred__svg .smp-trace { fill: none; stroke: rgba(92, 225, 230, 0.28); stroke-width: 1.5; }
.shred__svg .die { fill: #232336; stroke: rgba(161, 163, 255, 0.7); stroke-width: 1.2; }
.shred__svg .die-l { stroke: rgba(161, 163, 255, 0.3); stroke-width: 1; }
.shred__svg .die-hot { fill: rgba(245, 184, 74, 0.25); stroke: var(--warn); stroke-width: 2; }
.shred__svg .cutl { fill: none; stroke: rgba(244, 244, 248, 0.35); stroke-dasharray: 3 3; }
.shred__svg svg { overflow: hidden; display: inline; max-width: none; }
.shred__svg .pt { transition: transform 0.7s var(--ease-out); transition-delay: var(--d, 0s); }
.shred__svg .is-shred .pt { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
.shred__svg .pt-edge { fill: none; stroke: rgba(8, 8, 13, 0.9); stroke-width: 1.2; }
.shred__svg .lb { font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em; fill: var(--fg-3); }
.shred__svg .dm path { fill: none; stroke: var(--fg-4); }

/* ================================================================ Storage: vault */
.vlt__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: clamp(16px, 2vw, 28px); padding: clamp(10px, 2vw, 24px); align-items: start; }
@media (max-width: 999px) { .vlt__body { grid-template-columns: minmax(0, 1fr); } }
.vlt__main, .vlt__side { min-width: 0; }
.vlt__side { display: grid; gap: 16px; }
.vlt__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; font: 500 10.5px/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.vlt__legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 2px; vertical-align: -1px; background: var(--c); }
.vlt__legend .is-hold { --c: var(--violet); }
.vlt__legend .is-spare { --c: var(--cyan); }
.vlt__legend .is-eol { --c: var(--fg-3); }
.vlt__svg { display: block; width: 100%; height: auto; overflow: visible; }
.vlt__svg .vlt-floor { fill: rgba(255, 255, 255, 0.015); }
.vlt__svg .vlt-wall { fill: none; stroke: var(--fg-3); stroke-width: 2; vector-effect: non-scaling-stroke; }
.vlt__svg .vlt-swing { fill: none; stroke: var(--line-3); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.vlt__svg .vlt-cone { fill: rgba(140, 82, 255, 0.06); stroke: rgba(161, 163, 255, 0.18); stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.vlt__svg .vlt-cam rect, .vlt__svg .vlt-sensor rect, .vlt__svg .vlt-reader rect { fill: var(--ink-2); stroke: var(--fg-3); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.vlt__svg .vlt-sensor circle { fill: var(--cyan); }
.vlt__svg .vlt-led { fill: var(--fg-4); transition: fill 0.3s; }
.vlt.is-access .vlt-led { fill: var(--cyan); filter: drop-shadow(0 0 4px var(--cyan)); }
.vlt__svg .lb { font: 500 12px/1 var(--font-mono); letter-spacing: 0.1em; fill: var(--fg-3); }
.vlt__svg .lb--dim { fill: var(--fg-4); }
.vlt__svg .lb--row { font-size: 16px; fill: var(--fg-2); }
.vlt-bay { cursor: pointer; outline: none; }
.vlt-bay .vlt-slot { fill: rgba(255, 255, 255, 0.02); stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke var(--t-fast), fill var(--t-fast); }
.vlt-bay--empty .vlt-slot { stroke-dasharray: 4 4; }
.vlt-bay .vlt-item rect { fill: var(--ink-3); stroke: var(--fg-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vlt-bay .vlt-item text, .vlt-bay .vlt-id { font: 500 11px/1 var(--font-mono); letter-spacing: 0.06em; fill: var(--fg-2); }
.vlt-bay .vlt-id { font-size: 10px; fill: var(--fg-4); }
.vlt-bay--hold .vlt-item .vlt-stripe, .vlt-mover.is-hold rect.vlt-stripe { fill: var(--violet); stroke: none; }
.vlt-bay--spare .vlt-item .vlt-stripe, .vlt-mover.is-spare rect.vlt-stripe { fill: var(--cyan); stroke: none; }
.vlt-bay--eol .vlt-item .vlt-stripe, .vlt-mover.is-eol rect.vlt-stripe { fill: var(--fg-3); stroke: none; }
.vlt-bay:hover .vlt-slot { stroke: var(--ox-300); }
.vlt-bay:focus-visible .vlt-slot { stroke: var(--focus); stroke-width: 2.4; }
.vlt-bay.is-sel .vlt-slot { stroke: var(--cyan); fill: rgba(92, 225, 230, 0.07); }
.vlt-bay.is-sel .vlt-id { fill: var(--cyan); }
.vlt-bay.is-out .vlt-item { opacity: 0.15; }
.vlt-bay.is-pulse .vlt-slot { animation: svcb-bay 0.9s var(--ease-out) 2; }
@keyframes svcb-bay { 50% { fill: rgba(92, 225, 230, 0.25); } }
.vlt__svg .vlt-path { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(92, 225, 230, 0.7)); opacity: 0; }
.vlt.is-path .vlt-path { opacity: 1; }
.vlt-mover { opacity: 0; pointer-events: none; }
.vlt-mover rect { fill: var(--ink-3); stroke: var(--cyan); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.vlt-mover.is-on { opacity: 1; }
.vlt-mover.is-scan rect:first-child { fill: rgba(92, 225, 230, 0.35); }
.vlt__card {
  padding: clamp(18px, 2vw, 24px); border-radius: var(--r-3); border: 1px solid rgba(92, 225, 230, 0.3);
  background: linear-gradient(160deg, rgba(92, 225, 230, 0.07), transparent 55%), var(--ink-2);
  display: grid; gap: 12px;
}
.vlt__tag { color: var(--cyan); }
.vlt__name { font-size: var(--fs-h4); line-height: 1.25; font-weight: 500; color: var(--fg); }
.vlt__dl { margin: 0; display: grid; gap: 8px; }
.vlt__dl > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
.vlt__dl dt { font: 500 10.5px/1.6 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.vlt__dl dd { margin: 0; font-size: var(--fs-small); color: var(--fg-2); }
.vlt__card.is-swap .vlt__name, .vlt__card.is-swap .vlt__dl { animation: ox-tabin 0.45s var(--ease-out); }
.vlt__urgent { font-size: var(--fs-small); }
.vlt .vlt__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.vlt__steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; align-items: baseline; padding: 10px 12px; border-radius: var(--r-2); border-left: 2px solid var(--line); opacity: 0.72; transition: opacity var(--t-med), border-color var(--t-med), background-color var(--t-med); }
.vlt__steps .mono { color: var(--accent-text); }
.vlt__steps b { font-weight: 500; color: var(--fg); font-size: 0.9375rem; }
.vlt__d { grid-column: 2; font-size: 0.8125rem; line-height: 1.45; color: var(--fg-3); }
.vlt__steps li.is-done { opacity: 1; border-left-color: rgba(161, 163, 255, 0.6); }
.vlt__steps li.is-now { opacity: 1; border-left-color: var(--cyan); background: rgba(92, 225, 230, 0.06); }
html.no-js .vlt__steps li { opacity: 1; }
html.no-js .vlt__urgent, html.no-js .vlt__card .cluster { display: none; }
@media (max-width: 699px) { .vlt__svg .lb { font-size: 18px; } .vlt-bay .vlt-item text { font-size: 15px; } .vlt-bay .vlt-id { display: none; } .vlt__svg .lb--row { font-size: 22px; } }

/* headline phrase guard: keep a phrase on one line where there is room (every phone from 360px up) */
@media (min-width: 360px) { .nw-lg { white-space: nowrap; } }

/* ================================================================ family polish (matches services.css)
   Phones: hero chips hidden (the scope grid follows), plate full width and square,
   drawing labels scaled so they render at roughly 8.5px instead of 5px. */
@media (max-width: 599px) { .svcb-hero__chips { display: none; } }
@media (max-width: 899px) {
  .svcb-hero .page-hero__visual { --ratio: 1 / 1; margin-inline: 0; }
  .svcb-hero .svcb-art .lb { font-size: clamp(10.5px, 24px - 2.5vw, 15px); letter-spacing: 0.05em; stroke-width: 4px; }
  /* where the bigger labels would collide: re-anchor, trim or step down */
  .svcb-hero .svcb-art--net text[x="150"][y="24"] { text-anchor: end; transform: translateX(390px); }
  .svcb-hero .svcb-art--net text[x="540"][y="24"] { display: none; }
  .svcb-hero .svcb-art--net text[x="485.8"][y="93.5"] { text-anchor: end; transform: translateX(-16px); }
  .svcb-hero .svcb-art--net text[x="519.5"][y="93.5"] { text-anchor: start; transform: translateX(16px); }
  .svcb-hero .svcb-art--net text[y="233.5"] { font-size: clamp(10px, 20px - 2.2vw, 12px); letter-spacing: 0.02em; }
  .svcb-hero .svcb-art--itad text.lb[x="300"]:not(.lb--hi) { display: none; }
  .svcb-hero .svcb-art--itad text.lb[x="426"]:not(.lb--hi), .svcb-hero .svcb-art--itad text.lb[x="480"] { font-size: clamp(10px, 20px - 2.2vw, 12px); }
}
.vlt-hit { fill: transparent; stroke: none; }
/* rack, stack and patch: the patch schedule stacks into labelled rows on phones instead of scrolling sideways */
@media (max-width: 599px) {
  .rsp__docs .svcb-table { overflow-x: visible; }
  .rsp__docs .svcb-table table, .rsp__docs .svcb-table tbody { display: block; }
  .rsp__docs .svcb-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rsp__docs .svcb-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .rsp__docs .svcb-table tbody tr:last-child { border-bottom: 0; }
  .rsp__docs .svcb-table td { display: block; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .rsp__docs .svcb-table td::before { display: block; margin-bottom: 3px; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-4); }
  .rsp__docs .svcb-table td:nth-child(1)::before { content: "From"; }
  .rsp__docs .svcb-table td:nth-child(2)::before { content: "To"; }
  .rsp__docs .svcb-table td:nth-child(3)::before { content: "Media"; }
  .rsp__docs .svcb-table td:nth-child(4)::before { content: "Route"; }
}