/* pages/network.css — rules only the network page needs, on top of story.css (#4305 T4): the tilted US hero, the
   coverage map (no percentages, D3; a pin card with no count, C1), the scorecard model and cards, the assignment
   modal, and the "How the network grows" rows. Inline style stays only inside a stage or the hero. */
:root{--gold:#fbbf24;--silver:#cbd5e1;--bronze:#d97706;--unrated:#94a3b8}
.ico{width:16px;height:16px;flex:none;vertical-align:-3px;margin-right:8px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* the three stages on this page keep the map's southern edge crisp: horizontal edge fades only */
.stage .art{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 90%,transparent 100%)}

/* ---------- hero: a tilted US network that ignites west to east ---------- */
.hero{overflow:clip}
.netbox{position:absolute;z-index:1;right:max(16px,4vw);top:calc(50% - 7svh);transform:translateY(-50%);display:grid;justify-items:center;gap:26px;pointer-events:none;perspective:1400px}
.net{width:min(640px,44vw);aspect-ratio:975/610;transform:rotateY(-18deg) rotateX(9deg);transform-style:preserve-3d;position:relative}
.net .haze{position:absolute;inset:0;background:radial-gradient(55% 55% at 50% 50%,rgba(0,224,255,.16),transparent 70%);opacity:0;animation:glowin 1.8s ease forwards;animation-delay:1.2s}
.usa{position:relative;width:100%;height:100%;overflow:visible;display:block}
.usa .land{fill:#15223f;opacity:0;animation:fadein .9s ease forwards;animation-delay:.2s}
.usa .states{fill:none;stroke:rgba(107,159,212,.32);stroke-width:.8;opacity:0;animation:fadein 1s ease forwards;animation-delay:.6s}
.usa .reveal{clip-path:inset(0 100% 0 0);animation:wipe 2s cubic-bezier(.4,0,.2,1) forwards;animation-delay:.45s}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
.usa .oglow{fill:none;stroke:#00e0ff;stroke-width:7;opacity:.22}
.usa .outline{fill:none;stroke:#9fe3ff;stroke-width:1.4}
.usa .scan{stroke:#00e0ff;stroke-width:2.5;filter:drop-shadow(0 0 10px #00e0ff);opacity:0;animation:scan 2s cubic-bezier(.4,0,.2,1) forwards;animation-delay:.45s}
@keyframes scan{0%{transform:translateX(0);opacity:1}88%{opacity:1}100%{transform:translateX(975px);opacity:0}}
.usa .d{fill:#00e0ff;opacity:0;transform-box:fill-box;transform-origin:center;animation:ignite .9s cubic-bezier(.2,1.2,.3,1) forwards;animation-delay:var(--d)}
@keyframes ignite{0%{opacity:0;transform:scale(5)}35%{opacity:1;fill:#fff}100%{opacity:.85;transform:scale(1)}}
.usa .d.p{animation:ignite .9s cubic-bezier(.2,1.2,.3,1) forwards,dpulse 2.8s ease-in-out infinite;animation-delay:var(--d),calc(3.8s + var(--pd))}
@keyframes dpulse{0%,100%{opacity:.85}50%{opacity:.25}}
.usa .arc{fill:none;stroke:#00e0ff;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1600;stroke-dashoffset:1600;filter:drop-shadow(0 0 5px rgba(0,224,255,.8));
  animation:trace 1.5s ease-in-out forwards,arcdim 1s ease forwards;animation-delay:calc(3.1s + var(--i) * .22s),5.4s}
@keyframes arcdim{to{opacity:.4}}
.usa .glint{mix-blend-mode:screen;opacity:0;animation:hglint 1.3s cubic-bezier(.45,0,.2,1) forwards;animation-delay:2.75s}
@keyframes hglint{0%{opacity:1;transform:translateX(-620px) skewX(-18deg)}100%{opacity:1;transform:translateX(1120px) skewX(-18deg)}}
.hero .marktag{position:relative;z-index:2}
@media (max-width:1100px){.net{transform:rotateY(-18deg) rotateX(9deg) scale(.9)}}
@media (max-width:820px){.netbox{right:auto;left:50%;top:11svh;transform:translateX(-50%);opacity:.72;gap:0;width:100%;justify-items:center}.net{width:min(520px,92vw);transform:rotateY(-10deg) rotateX(6deg) scale(.86);transform-origin:50% 0}.netbox .marktag{display:none}}
@media (prefers-reduced-motion:reduce){.net .haze,.usa .land,.usa .states,.usa .reveal,.usa .scan,.usa .d,.usa .arc,.usa .glint{animation:none!important}.net .haze{opacity:1}.usa .land,.usa .states{opacity:1}.usa .reveal{clip-path:none}.usa .d{opacity:.85}.usa .arc{stroke-dashoffset:0;opacity:.4}.usa .scan,.usa .glint{display:none}}

/* ---------- 01 coverage: dots, radius rings and a pickup pin — no percentage anywhere (D3) ---------- */
.cov{left:90px;top:10px;width:990px;height:580px}
.cov .tb{gap:14px}
.covmap{position:relative;height:540px;overflow:hidden;background:#0a0f1e}
.covmap canvas{display:block;touch-action:manipulation}
/* the radius control sits above the stage, outside its scaling, so it stays a full-size target on phones */
.covctl{display:flex;flex-wrap:wrap;align-items:center;gap:14px 36px;margin:0 0 18px;font:500 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.covctl__g{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
/* the keyboard path to a pin (the canvas itself takes pointer clicks only) */
.covctl .pins{display:inline-flex;flex-wrap:wrap;gap:6px}
.covctl .pins button{min-height:44px;padding:0 14px;font:600 13px var(--mono);letter-spacing:.02em;text-transform:none;color:var(--fg-2);background:var(--bg-2);border:1px solid var(--line);border-radius:999px;cursor:pointer;transition:color .3s,border-color .3s}
.covctl .pins button:hover{color:var(--fg);border-color:var(--accent)}
.segwrap{display:inline-flex;align-items:center;gap:6px;font:600 10px var(--ui-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v-text3)}
.segwrap b{font:700 12px var(--ui-mono);color:var(--v-cyan);letter-spacing:.04em}
.covkey{margin-left:auto;font:12.5px var(--ui);color:var(--v-text2);white-space:nowrap}
.covnote{position:absolute;left:14px;bottom:10px;font:10.5px var(--ui);color:var(--v-text3);max-width:360px;line-height:1.4}
.covhint{position:absolute;left:14px;top:12px;font:600 10px var(--ui-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--v-text3);display:flex;align-items:center;gap:8px}
.covhint i{width:10px;height:10px;border-radius:50%;border:1.5px dashed var(--v-cyan);display:inline-block}
.pincard{position:absolute;right:12px;bottom:12px;width:224px;background:rgba(18,24,40,.94);border:1px solid var(--v-border-hi);border-radius:10px;padding:12px 14px;box-shadow:0 20px 50px rgba(0,0,0,.5);
  font:12px/1.4 var(--ui);color:var(--v-text);opacity:0;transform:translateY(8px) scale(.97);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.pincard.on{opacity:1;transform:none}
.pincard .pt{display:flex;align-items:center;gap:8px;font-weight:600;font-size:12.5px}
.pincard .pt i{width:9px;height:9px;border-radius:50%;background:var(--v-amber);box-shadow:0 0 0 2px #fff,0 0 10px var(--v-amber)}
.pincard .pd{color:var(--v-text2);font-size:11.5px;margin-top:8px}
.pincard .fine{color:var(--v-text3);font-size:10px;margin-top:8px;line-height:1.35}

/* ---------- 02 scorecards ---------- */
.model{left:90px;top:12px;width:380px;height:620px}
.model .pad{padding-top:14px}
.scwin{left:490px;top:12px;width:590px;height:620px}
.scwin .tb .chip{margin-left:auto}
.mtop{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:center}
.donut{width:104px;height:104px;display:block}
.donut .seg{fill:none;stroke:var(--c);stroke-width:14;opacity:.18;transition:opacity .5s ease,stroke-width .4s}
.donut .seg.on{opacity:1}
.donut .seg.hot{stroke-width:18}
.donut .ring{fill:none;stroke:var(--v-recess);stroke-width:14}
.donut text{font:700 17px var(--ui-mono);fill:var(--v-text);text-anchor:middle}
.donut text.s{font:600 8px var(--ui-mono);fill:var(--v-text3);letter-spacing:.12em}
.mtop .big{font:700 30px/1 var(--ui-mono);letter-spacing:-.02em}
.mtop .big span{font-size:14px;color:var(--v-text2);font-weight:500}
.mtop .d{color:var(--v-text2);font-size:12px;line-height:1.45;margin-top:4px}
.frows{display:grid;gap:1px;margin-top:10px}
.frow{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:1px 10px;align-items:center;padding:4px 8px;border-radius:7px;transition:background .4s,opacity .4s;opacity:.45}
.frow.on{opacity:1}
.frow.hot{background:rgba(0,224,255,.08)}
.frow i{width:10px;height:10px;border-radius:3px;background:var(--c);grid-row:span 2;align-self:center}
.frow .n{font-weight:600;font-size:12.5px}
.frow .w{font:700 12px var(--ui-mono);color:var(--v-text2);text-align:right}
.frow .w small{font-weight:500;font-size:9.5px;color:var(--v-text3);letter-spacing:.06em}
.frow .rule{grid-column:2/-1;color:var(--v-text2);font-size:10.5px;line-height:1.3}
.mfoot{margin-top:8px;padding-top:8px;border-top:1px solid var(--v-border);color:var(--v-text2);font-size:11.5px;line-height:1.45}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.scard{background:var(--v-recess);border:1px solid var(--v-border);border-radius:10px;padding:12px 12px 10px;display:grid;gap:10px;align-content:start;--tc:var(--unrated)}
.sc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.sc-name{font-size:12.5px;font-weight:600;line-height:1.3;margin-bottom:5px}
.sc-score{font:700 34px/1 var(--ui-mono);color:var(--tc);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tierpill{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;font:700 11px/1.5 var(--ui);white-space:nowrap;color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,transparent);border:1px solid color-mix(in srgb,var(--tc) 28%,transparent)}
.tierpill b{font-family:var(--ui-mono);font-weight:700}
.sc-rows{display:grid;gap:7px}
.sc-row .top{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--v-text2)}
.sc-row .top span:last-child{font:600 11px var(--ui-mono);color:var(--v-text);font-variant-numeric:tabular-nums}
.sc-row .fbar{margin-top:3px;height:5px;border-radius:3px;background:rgba(148,163,184,.14);overflow:hidden}
.sc-row .fbar i{display:block;height:100%;width:0;border-radius:3px;background:var(--v-cyan);transition:width 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--k) * 90ms)}
.sc-row .fbar i.lo{background:var(--v-amber)}
.sc-row .fbar i.bad{background:var(--v-red)}
.sc-at{font:10.5px var(--ui-mono);color:var(--v-text3)}
.thresh{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:11.5px;color:var(--v-text2);margin-top:12px}
.thresh .k{font:600 10px var(--ui-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--v-text3);margin-right:2px}
.thresh__note{color:var(--v-text3);font-size:11px}
.watch{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;margin-top:10px;border:1px solid rgba(248,113,113,.4);background:rgba(248,113,113,.07);border-radius:10px;padding:10px 12px;font-size:12px}
.watch .wn{font-weight:600}
.watch .wd{grid-column:1;color:var(--v-text2);font-size:11.5px;line-height:1.4}
.watch .wd b{color:var(--v-red);font-weight:600}
.watch .wp{grid-row:span 2;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.watch .wp .was{text-decoration:line-through;opacity:.55}

/* ---------- 03 assignment ---------- */
.amodal{left:90px;top:10px;width:990px;height:560px;display:grid;grid-template-rows:44px minmax(0,1fr)}
.ahead{display:flex;flex-wrap:nowrap;overflow:hidden;align-items:center;gap:7px;padding:0 12px;border-bottom:1px solid var(--v-border);background:rgba(14,20,34,.6)}
.ahead .ttl{font-size:14px;font-weight:600;white-space:nowrap}
.achip{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:5px;background:rgba(107,159,212,.13);color:var(--v-text);font-size:11px;white-space:nowrap;flex:none}
.achip .k{font:600 9px var(--ui-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v-text3)}
.abody{display:grid;grid-template-columns:600px minmax(0,1fr);min-height:0}
.amap{position:relative;overflow:hidden;background:#0b1020;border-right:1px solid var(--v-border)}
.amap canvas{display:block}
.amap .lbl{position:absolute;left:12px;top:10px}
.amap .leg{position:absolute;right:12px;top:9px;font:10.5px var(--ui);color:var(--v-text2);text-align:right;line-height:1.4}
.amap .leg b{color:var(--v-text);font-weight:500}
.amap .osm{position:absolute;right:10px;bottom:8px;font:10px var(--ui);color:var(--v-text3)}
.amap .ph{position:absolute;left:12px;bottom:10px;display:inline-flex;align-items:center;gap:8px;font:600 10px var(--ui-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v-text2);background:rgba(13,13,26,.7);border:1px solid var(--v-border-hi);border-radius:6px;padding:4px 8px}
.amap .ph i{width:7px;height:7px;border-radius:50%;background:var(--v-cyan);animation:pulse 1.4s ease-in-out infinite}
.arail{display:flex;flex-direction:column;min-height:0}
.rhead{display:flex;align-items:center;gap:8px;padding:10px 14px 6px}
.rhead .lbl{margin-right:auto;white-space:nowrap}
.sortlbl{font:11px var(--ui);color:var(--v-text3);white-space:nowrap}
.arail .seg{display:inline-flex;border:1px solid var(--v-border-hi);border-radius:7px;overflow:hidden;background:rgba(13,13,26,.7)}
.arail .seg span{font:600 11px var(--ui-mono);letter-spacing:.06em;color:var(--v-text2);padding:5px 8px;transition:background .3s,color .3s}
.arail .seg span+span{border-left:1px solid var(--v-border-hi)}
.arail .seg span.on{background:rgba(0,224,255,.16);color:var(--v-cyan)}
.arail .seg span.press{box-shadow:inset 0 0 0 2px rgba(0,224,255,.5)}
.agents{display:flex;flex-direction:column;padding:0 8px}
.agent{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:3px 12px;align-items:baseline;padding:9px 10px;border:1px solid transparent;border-radius:10px;text-align:left;
  transition:background .25s,border-color .25s,opacity .3s,transform .3s}
.agent+.agent{border-top-color:var(--v-border)}
.agent.sel{border-radius:10px;border-color:color-mix(in srgb,var(--agc) 55%,transparent);background:color-mix(in srgb,var(--agc) 9%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--agc) 8%,transparent)}
.agent.sel+.agent{border-top-color:transparent}
.agent.fade{opacity:0;transform:translateY(4px)}
.agent .l1{display:flex;align-items:center;gap:8px;min-width:0}
.agent .l1 .dot{background:var(--agc);width:8px;height:8px}
.agent .name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent .eta{font:700 16px/1 var(--ui-mono);text-align:right;white-space:nowrap}
.agent .eta small{font:500 10.5px var(--ui);color:var(--v-text2)}
.agent .l2{display:flex;gap:0;white-space:nowrap;overflow:hidden;font-size:11.5px;color:var(--v-text2);padding-left:16px;min-width:0}
.agent .l2>span+span::before{content:"·";margin:0 6px;color:var(--v-text3)}
.agent .l2 .tr i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--tc);margin-right:5px;vertical-align:1px}
.agent .cost{font:600 11.5px var(--ui-mono);text-align:right;white-space:nowrap;color:var(--v-text)}
.agent .cost.none{color:var(--v-amber);font:600 10.5px var(--ui);grid-column:1/-1;text-align:left;padding-left:16px}
.agent .asg{display:none}
.agent.done .asg{display:inline-flex}
.why{padding:6px 18px 0;font-size:11.5px;color:var(--v-text2);line-height:1.45;min-height:48px}
.why b{color:var(--v-text);font-weight:600}
.order{margin:8px 14px 0;border:1px solid rgba(52,211,153,.4);background:rgba(52,211,153,.06);border-radius:9px;padding:8px 10px;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:2px 10px;align-items:center;font-size:12px}
.order .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(52,211,153,.16);color:var(--v-emerald);font-weight:700;font-size:12px;grid-row:span 2}
.order .on{font-weight:600}
.order .on .tag{font:600 9px var(--ui-mono);letter-spacing:.12em;color:var(--v-emerald);background:rgba(52,211,153,.14);border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:1px}
.order .od{grid-column:2;color:var(--v-text2);font-size:11px}
.order .chg{grid-row:span 2;font:600 11px var(--ui);color:var(--v-text2);border:1px solid var(--v-border-hi);border-radius:6px;padding:4px 8px}
.afoot{margin-top:auto;padding:10px 14px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;border-top:1px solid var(--v-border)}
.toast{font:600 11.5px var(--ui);color:var(--v-emerald);display:none;align-items:center;gap:6px;flex-basis:100%;order:-1}
.toast.on{display:inline-flex;animation:fadein .4s ease}
.toast svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.pbtn{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--ui);color:#0d1a2a;background:var(--v-cyan);border:0;border-radius:7px;padding:8px 12px;transition:box-shadow .3s,transform .3s;margin-left:auto;white-space:nowrap}
.pbtn.hl{box-shadow:0 0 0 4px rgba(0,224,255,.2),0 0 24px rgba(0,224,255,.35);transform:translateY(-1px)}
.gold{--tc:var(--gold)}.silver{--tc:var(--silver)}.bronze{--tc:var(--bronze)}.unrated{--tc:var(--unrated)}

/* ---------- after: how the network grows, the quote form ---------- */
#grows .srow:nth-child(1){--i:0}
#grows .srow:nth-child(2){--i:1}
#grows .srow:nth-child(3){--i:2}
#grows .srow:nth-child(4){--i:3}
#grows a.srow{text-decoration:none;color:inherit}
#grows a.srow:hover .tag{color:var(--fg)}
.srow .t{display:flex;align-items:center}
.srow .t .ico{color:var(--accent-hi)}
.contact__lede{margin-top:14px}
.contact__lede a{color:inherit;text-decoration-color:var(--line);text-underline-offset:3px}
.contact__lede a:hover{color:var(--fg)}
@media (prefers-reduced-motion:reduce){.pincard,.agent,.frow,.donut .seg,.sc-row .fbar i,.toast,.rv,.seg button,.seg span,.pins button,.pbtn{transition:none!important}.toast.on{animation:none}.amap .ph i{animation:none}}

/* ---------- without the engine (JS off, or story.js failed): show what the markup holds, hide what only the engine draws ---------- */
html:not(.story) .stage[data-h="640"]{height:640px}
html:not(.story) :is(.covctl,.covhint,#ch-cover .stage,.hero .netbox){display:none}