/* Connectivity page */

/* hero: coded failover graphic (replaces the hologram truck still) */
.cn-viz{display:grid;gap:0;border-radius:22px;overflow:hidden;background:var(--navy-1);border:1px solid rgba(255,255,255,.1);color:#fff;
  box-shadow:0 60px 120px -60px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.06) inset;
  background-image:radial-gradient(80% 60% at 50% 45%,rgba(51,161,255,.12),transparent 70%)}
.cn-viz-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(3,13,28,.45);font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:rgba(244,247,251,.8)}
.cn-viz-dev{font-family:var(--display);font-weight:600;letter-spacing:-.01em;font-size:15px;color:#fff}
.cn-viz-stat{display:flex;align-items:center;gap:10px}
.cn-viz-chip{padding:3px 8px;border-radius:6px;border:1px solid rgba(94,194,255,.55);color:var(--electric)}
.cn-viz-stat svg{width:20px;height:14px;fill:var(--electric)}
.cn-viz-map{padding:8px 12px 0}
.cn-viz-map svg{display:block;width:100%;height:auto}
.cn-viz-map .z{stroke-width:1.5}
.cn-viz-map .z-a{fill:rgba(244,247,251,.05);stroke:rgba(244,247,251,.28);stroke-dasharray:4 6}
.cn-viz-map .z-b{fill:rgba(51,161,255,.16);stroke:rgba(94,194,255,.75)}
.cn-viz-map .z-c{fill:rgba(0,76,153,.22);stroke:rgba(94,194,255,.35);stroke-dasharray:4 6}
.cn-viz-map .route{fill:none;stroke:rgba(244,247,251,.3);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 9}
.cn-viz-map .route-done{fill:none;stroke:var(--electric);stroke-width:3.5;stroke-linecap:round}
.cn-viz-map .tw circle{fill:var(--navy-0);stroke:rgba(244,247,251,.7);stroke-width:2}
.cn-viz-map .tw text{fill:rgba(244,247,251,.85);font-family:var(--mono);font-size:22px;text-anchor:middle}
.cn-viz-map .truck circle{fill:#fff}
.cn-viz-map .truck .halo{fill:rgba(94,194,255,.25);transform-box:fill-box;transform-origin:center;animation:cnPulse 2.4s ease-out infinite}
@keyframes cnPulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.cn-viz-map .truck .halo{animation:none}}
.cn-viz-nets{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.1)}
.cn-viz-nets li{display:grid;grid-template-columns:auto 1fr;align-items:center;align-content:start;gap:2px 8px;padding:14px 16px;font-family:var(--display);font-weight:600;font-size:14.5px;border-left:1px solid rgba(255,255,255,.1);color:rgba(244,247,251,.7)}
.cn-viz-nets li:first-child{border-left:0}
.cn-viz-nets li.is-on{color:#fff;background:rgba(51,161,255,.1)}
.cn-viz-nets em{grid-column:2;font-style:normal;font-family:var(--body);font-weight:500;font-size:13px;line-height:1.35;color:rgba(244,247,251,.66)}
.cn-viz-nets li.is-on em{color:var(--electric)}
.cn-viz-nets .sw{width:10px;height:10px;border-radius:3px}
.sw-a{background:rgba(244,247,251,.45)}.sw-b{background:var(--electric)}.sw-c{background:#1f6fc4}
@media (max-width:980px){.cn-viz{max-width:620px}}
@media (max-width:480px){.cn-viz-nets li{padding:12px 10px;font-size:13px;grid-template-columns:1fr}.cn-viz-nets em{grid-column:1}.cn-viz-nets .sw{display:none}.cn-viz-bar{padding:12px 16px}}

/* scale band: the world-network film still behind the big numbers */
.cn-scale{overflow:hidden;padding-block:clamp(96px,11vw,168px)}
.cn-scale-bg{position:absolute;inset:0;pointer-events:none}
.cn-scale-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.5}
.cn-scale-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--navy-0) 0%,rgba(3,13,28,.55) 30%,rgba(3,13,28,.6) 65%,var(--navy-0) 100%),
             linear-gradient(90deg,rgba(3,13,28,.85) 0%,rgba(3,13,28,.2) 60%,rgba(3,13,28,.5) 100%)}
.cn-scale-in{position:relative}
.cn-srow{border-color:rgba(255,255,255,.18)}
.cn-srow .srow-n{font-size:clamp(48px,6vw,96px)}
.cn-srow .srow-n small{color:var(--electric)}

/* failover route illustration */
.cn-route{margin:0;display:grid;gap:28px;padding:clamp(24px,3.4vw,48px);border-radius:22px;background:var(--paper);border:1px solid var(--line)}
.cn-route-axis{display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.cn-route-axis i{flex:1;height:1px;background:repeating-linear-gradient(90deg,rgba(10,24,48,.3) 0 6px,transparent 6px 12px)}
.cn-lane{display:grid;grid-template-columns:220px minmax(0,1fr);gap:10px 28px;align-items:center}
.cn-lane-t{font-family:var(--display);font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.cn-lane-n{grid-column:2;font-size:14.5px;line-height:1.5;display:flex;align-items:center;gap:8px}
.cn-lane-n::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.cn-lane-n.is-bad{color:#9b2a1a}.cn-lane-n.is-bad::before{background:var(--danger)}
.cn-lane-n.is-good{color:var(--brand)}.cn-lane-n.is-good::before{background:var(--blue)}
.cn-bar{display:flex;gap:4px;height:56px}
.cn-bar .seg{flex:var(--w) 1 0;min-width:0;display:flex;align-items:center;padding:0 14px;border-radius:10px;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-bar .net-a{background:var(--navy-1);color:#fff}
.cn-bar .net-b{background:var(--brand);color:#fff}
.cn-bar .net-c{background:var(--blue);color:var(--navy-0)}
.cn-bar .gap{justify-content:center;color:#9b2a1a;background:repeating-linear-gradient(-45deg,rgba(196,50,31,.1) 0 8px,rgba(196,50,31,.03) 8px 16px);border:1.5px dashed rgba(196,50,31,.55)}
.cn-route figcaption{margin-top:-6px}
@media (max-width:760px){
  .cn-lane{grid-template-columns:1fr}
  .cn-lane-n{grid-column:1}
  .cn-bar{height:48px}
  .cn-bar .seg{padding:0 6px;font-size:13px;justify-content:center}
}
@media (max-width:420px){.cn-bar .seg{padding:0 3px;letter-spacing:-.01em}.cn-bar .seg.gap{flex-basis:30%}}

/* ELD tie-in panel */
.cn-eld{--fg:#fff;--fg-2:rgba(244,247,251,.76);--rule:rgba(255,255,255,.14);
  margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px clamp(32px,5vw,72px);align-items:center;
  padding:clamp(28px,4vw,56px);border-radius:22px;background:var(--navy-0);color:var(--fg);
  background-image:radial-gradient(60% 90% at 100% 50%,rgba(51,161,255,.18),transparent 70%)}
.cn-eld :focus-visible{outline-color:var(--electric)}
.cn-eld-copy{display:grid;gap:18px;justify-items:start}
.cn-eld h3{font-size:clamp(26px,2.6vw,38px);line-height:1.12;letter-spacing:-.03em;color:#fff;text-wrap:balance}
.cn-eld p{color:var(--fg-2);line-height:1.7;max-width:52ch}
.cn-chain{list-style:none;display:grid;gap:10px;counter-reset:link}
.cn-chain li{counter-increment:link;position:relative;display:flex;align-items:center;gap:14px;min-height:52px;padding:12px 18px;border-radius:12px;border:1px solid var(--rule);background:rgba(255,255,255,.04);font-family:var(--display);font-weight:600;font-size:16px}
.cn-chain li::before{content:counter(link,decimal-leading-zero);font-family:var(--mono);font-weight:500;font-size:13px;color:var(--electric)}
.cn-chain li+li::after{content:"";position:absolute;left:30px;top:-11px;width:1px;height:10px;background:rgba(94,194,255,.6)}
.cn-chain li:nth-child(3){border-color:rgba(94,194,255,.6);background:rgba(51,161,255,.12)}
@media (max-width:900px){.cn-eld{grid-template-columns:1fr}}
@media (max-width:600px){.cn-eld .btn{white-space:normal;width:100%;justify-content:center;text-align:center}}

/* line-item bill */
.cn-price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(40px,6vw,96px);align-items:center}
.cn-price-copy{display:grid;gap:20px;justify-items:start}
.cn-price-copy h2{font-size:clamp(32px,3.6vw,52px);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.cn-price-copy p{color:var(--fg-2);line-height:1.75;max-width:52ch}
.cn-bill{display:grid;gap:18px;padding:clamp(24px,3vw,40px);border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(10,24,48,.35)}
.cn-bill-h{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink-2)}
.cn-bill-rows{display:grid}
.cn-bill-rows div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.cn-bill-rows dt{color:var(--ink)}
.cn-bill-rows dd{color:var(--brand);font-weight:600;text-align:right;white-space:nowrap}
.cn-bill-total,.cn-bill-add{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.cn-bill-total span{font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink)}
.cn-bill-total b{font-family:var(--display);font-weight:600;font-size:clamp(48px,5vw,72px);letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.cn-bill small{font-family:var(--body);font-size:15px;font-weight:500;letter-spacing:0;color:var(--ink-2);margin-left:4px}
.cn-bill-add{padding:14px 16px;border-radius:12px;background:var(--paper)}
.cn-bill-add span{font-size:14.5px;color:var(--ink-2);line-height:1.45}
.cn-bill-add b{font-family:var(--display);font-weight:600;font-size:22px;color:var(--ink);white-space:nowrap}
@media (max-width:900px){.cn-price{grid-template-columns:1fr}}

/* status strip */
.cn-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.cn-status h2{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.025em;line-height:1.15}
.cn-status p{margin-top:10px;color:var(--fg-2);max-width:62ch;line-height:1.7}
@media (max-width:600px){.cn-status .btn{width:100%;justify-content:center}}

/* round-2 fixes */
.cn-status a[href^="tel:"]{white-space:nowrap}
.cn-scale{padding-top:clamp(56px,6vw,96px)}
.cn-bill-total{flex-wrap:wrap}
.cn-bill-total span{white-space:nowrap}
@media (max-width:600px){.cn-price-copy .btn-row{width:100%}.cn-price-copy .btn-row .btn{flex:1 1 100%;justify-content:center}}
@media (max-width:600px){.cn-bill-add{flex-direction:column;align-items:flex-start;gap:4px}}

/* round-3: price leads the bill */
.cn-bill-total{padding-bottom:20px;border-bottom:1px solid var(--line)}
.cn-bill-h{margin-top:4px}

/* reconnect without Wi-Fi */
.cn-recon{margin-top:clamp(20px,2.4vw,28px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px clamp(32px,5vw,72px);align-items:center;padding:clamp(24px,3.4vw,44px);border-radius:22px;background:var(--paper);border:1px solid var(--line)}
.cn-recon-copy{display:grid;gap:12px}
.cn-recon h3{font-size:clamp(22px,2.2vw,30px);line-height:1.15;letter-spacing:-.025em;text-wrap:balance}
.cn-recon p{color:var(--ink-2);line-height:1.7;max-width:56ch}
.cn-recon-steps{list-style:none;display:grid;gap:10px}
.cn-recon-steps li{position:relative;display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--ink)}
.cn-recon-steps li+li::after{content:"";position:absolute;left:21px;top:-11px;width:1px;height:10px;background:rgba(10,24,48,.25)}
.cn-recon-steps .dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--brand)}
.cn-recon-steps .dot.is-bad{background:var(--danger)}
.cn-recon-steps .dot.is-good{background:var(--blue)}
@media (max-width:860px){.cn-recon{grid-template-columns:1fr}}