/* N0EMR Dispatch - public site
   Colour, radii, gloss gradients and glow rings all taken from the
   dispatch console UI. Committed dark, same as the console. */
:root{
  color-scheme:dark;

  /* console colour tokens */
  --bg-card:#1a1a1a; --bg-secondary:#1a1a2e; --bg-topbar:#0d1630;
  --text-primary:#ccc; --text-secondary:#888; --text-muted:#555; --text-heading:#7986cb;
  --border-color:#333; --border-light:#222;
  --accent:#00bcd4; --accent-text:#000;
  --rx-color:#69f0ae; --rx-bright:#00e676; --tx-color:#ff5252; --ptt-border:#f44;
  --info:#29b6f6;
  --n0emr-navy:#0d1630; --n0emr-blue:#1a2f5e; --n0emr-silver:#8a9bb5;
  --n0emr-red:#cc0000; --n0emr-red-glow:#ff2200; --n0emr-white:#e8edf5;
  --page-bg:#0b0d12; --band-bg:#0f1219; --hairline:#242a36;

  /* console shape language */
  --r-card:8px; --r-ctl:6px; --r-chip:4px; --r-big:12px;
  --panel-grad:linear-gradient(180deg,#1a2240 0%,#111930 100%);
  --panel-grad-deep:linear-gradient(180deg,#141a2e 0%,#0d1228 100%);
  --gloss-blue:linear-gradient(180deg,#0c3477 0%,#1565c0 40%,#1e88e5 50%,#1565c0 60%,#0c3477 100%);
  --gloss-red:linear-gradient(180deg,#7f0000 0%,#b71c1c 40%,#e53935 50%,#b71c1c 60%,#7f0000 100%);
  --gloss-steel:linear-gradient(180deg,#0d1f4a 0%,#1a3070 50%,#0d1f4a 100%);
  --lift:0 2px 0 rgba(0,0,0,.55), 0 6px 18px -8px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07);
  --lift-lg:0 3px 0 rgba(0,0,0,.6), 0 16px 34px -14px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);

  --mono:"Share Tech Mono","Courier New",monospace;
  --sans:"Barlow","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page-bg);color:var(--text-primary);font-family:var(--sans);
  font-size:16.5px;line-height:1.64;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.mono{font-family:var(--mono)}

/* ---------- top strip ---------- */
.topbar{background:var(--gloss-steel);border-bottom:1px solid var(--n0emr-blue);
  padding:8px clamp(14px,3vw,28px);display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--n0emr-silver);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.topbar .call{color:var(--n0emr-white)}
.topbar .sep{color:var(--text-muted)}
.topbar .live{display:inline-flex;align-items:center;gap:7px;color:var(--rx-color);margin-left:auto}
.topbar .led{width:8px;height:8px;border-radius:50%;background:var(--rx-bright);
  box-shadow:0 0 6px var(--rx-bright),0 0 12px rgba(0,230,118,.6);flex:none}

/* ---------- nav ---------- */
.nav{background:var(--panel-grad-deep);border-bottom:1px solid var(--border-color);
  padding:11px clamp(14px,3vw,28px);display:flex;align-items:center;gap:clamp(10px,2.1vw,23px);
  flex-wrap:wrap;position:sticky;top:0;z-index:30;box-shadow:0 4px 14px -6px rgba(0,0,0,.85)}
.brand{display:flex;align-items:baseline;gap:9px;margin-right:auto;text-decoration:none}
.brand .mark{font-family:var(--mono);font-size:20px;letter-spacing:.06em;color:var(--n0emr-white)}
.brand .mark b{color:var(--n0emr-red);font-weight:400;text-shadow:0 0 10px var(--n0emr-red-glow)}
.brand .sub{font-family:var(--mono);font-size:11px;color:var(--text-muted);letter-spacing:.13em;text-transform:uppercase}
.nav a.n{font-family:var(--mono);font-size:13px;letter-spacing:.05em;color:var(--text-secondary);
  text-decoration:none;padding:5px 10px;border-radius:var(--r-chip);border:1px solid transparent}
.nav a.n:hover{color:var(--n0emr-white);background:rgba(26,47,94,.5);border-color:var(--n0emr-blue)}
.nav a.n[aria-current=page]{color:var(--n0emr-white);background:var(--gloss-steel);
  border-color:var(--n0emr-blue);box-shadow:var(--lift)}
.nav a.login{font-family:var(--mono);font-size:13px;color:var(--n0emr-white);
  background:var(--gloss-steel);border:1px solid var(--n0emr-blue);
  border-radius:var(--r-ctl);padding:7px 14px;text-decoration:none;box-shadow:var(--lift)}
.nav a.login:hover{box-shadow:var(--lift),0 0 10px rgba(41,182,246,.45);border-color:var(--info)}

/* ---------- layout ---------- */
.band{padding:clamp(40px,6vw,74px) clamp(16px,4vw,40px)}
.band.alt{background:var(--band-bg);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.inner{max-width:1060px;margin:0 auto}
.narrow{max-width:780px;margin:0 auto}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:13px}
h1{font-family:var(--mono);font-weight:400;font-size:clamp(26px,4.3vw,46px);line-height:1.14;
  color:var(--n0emr-white);text-wrap:balance;margin:0 0 18px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
h2{font-family:var(--mono);font-weight:400;font-size:clamp(20px,2.8vw,29px);line-height:1.2;color:var(--n0emr-white);text-wrap:balance;margin:44px 0 13px}
h3{font-family:var(--mono);font-weight:400;font-size:16.5px;color:var(--n0emr-white);margin:0 0 6px}
p{margin:0 0 15px;max-width:64ch}
.sub{font-size:clamp(15.5px,1.9vw,18.5px);color:var(--text-secondary);max-width:60ch}
.lead{font-size:18px;color:var(--n0emr-white)}
a{color:var(--accent);text-underline-offset:2px}
strong{color:var(--n0emr-white);font-weight:600}

/* ---------- glossy console buttons ---------- */
.ctas{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}
.btn{font-family:var(--mono);font-size:14.5px;letter-spacing:.06em;padding:12px 24px;
  border-radius:var(--r-ctl);text-decoration:none;display:inline-block;
  background:var(--gloss-blue);color:#fff;border:1px solid #0a2a5e;
  box-shadow:var(--lift);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.btn:hover{box-shadow:var(--lift),0 0 14px rgba(41,182,246,.55);border-color:var(--info)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.55),inset 0 2px 6px rgba(0,0,0,.5)}
.btn.ghost{background:var(--panel-grad);color:var(--n0emr-silver);border-color:var(--border-color)}
.btn.ghost:hover{color:var(--n0emr-white);border-color:var(--n0emr-silver);box-shadow:var(--lift)}
.btn.go{background:linear-gradient(180deg,#0b4a24 0%,#1b7a3f 40%,#26a35a 50%,#1b7a3f 60%,#0b4a24 100%);
  border-color:#0a3d1e}
.btn.go:hover{box-shadow:var(--lift),0 0 14px rgba(0,230,118,.5);border-color:var(--rx-bright)}

/* ---------- hero ---------- */
.hero{padding:clamp(46px,7vw,90px) clamp(16px,4vw,40px) clamp(34px,5vw,60px);
  background:
    linear-gradient(180deg,rgba(10,18,40,.74) 0%,rgba(9,13,26,.90) 74%,var(--page-bg) 100%),
    radial-gradient(1100px 440px at 12% -12%,rgba(30,136,229,.20),transparent 62%),
    url('/assets/img/console-hero-20261010.png') center 18%/cover no-repeat;
  border-bottom:1px solid var(--n0emr-blue);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.hero-logo{width:clamp(92px,11vw,134px);height:auto;display:block;margin:0 0 18px;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.6))}
.foot-logo{width:56px;height:auto;opacity:.92;margin-bottom:10px;display:block}
.hero h1{max-width:19ch}
.hero .sub{color:var(--text-primary);max-width:58ch}
.modes{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px;padding-top:24px;border-top:1px solid var(--n0emr-blue)}
.chip{font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;padding:7px 13px;border-radius:var(--r-chip);
  background:var(--panel-grad);border:1px solid var(--border-color);color:var(--text-primary);box-shadow:var(--lift)}
.chip.on{border-color:var(--rx-color);color:var(--rx-color);
  background:linear-gradient(180deg,#123d1c 0%,#1b5e20 100%);
  box-shadow:var(--lift),0 0 8px rgba(0,230,118,.28)}

/* ---------- cards: the console "pop out" ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:15px;margin-top:28px}
.card{background:var(--panel-grad);border:1px solid var(--n0emr-blue);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--lift-lg)}
.card .head{background:var(--gloss-steel);border-bottom:1px solid var(--n0emr-blue);padding:10px 15px;
  display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--n0emr-white);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.card .head i{width:7px;height:7px;border-radius:50%;background:var(--info);
  box-shadow:0 0 6px var(--info);flex:none}
.card .body{padding:15px 17px}
.card .body p{font-size:14.9px;color:var(--text-secondary);margin:0;max-width:none}

/* ---------- signal path ---------- */
.path{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;margin-top:30px;
  border:1px solid var(--n0emr-blue);border-radius:var(--r-big);background:var(--panel-grad-deep);
  padding:20px;box-shadow:var(--lift-lg)}
.node{background:var(--panel-grad);border:1px solid var(--n0emr-blue);border-radius:var(--r-card);
  padding:15px 16px;box-shadow:var(--lift)}
.node .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--n0emr-silver)}
.node .v{font-family:var(--mono);font-size:15.5px;color:var(--n0emr-white);margin-top:4px}
.node .d{font-size:13.5px;color:var(--text-secondary);margin-top:7px;line-height:1.45}
.arw{display:flex;align-items:center;justify-content:center;padding:0 13px;color:var(--info)}
.arw svg{width:26px;height:12px;filter:drop-shadow(0 0 5px rgba(41,182,246,.6))}
@media(max-width:820px){.path{grid-template-columns:1fr;gap:9px}.arw{padding:3px 0}.arw svg{transform:rotate(90deg)}}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--n0emr-blue);border-radius:var(--r-card);
  margin-top:26px;box-shadow:var(--lift-lg)}
table{border-collapse:collapse;width:100%;min-width:500px;background:var(--panel-grad)}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--border-light);font-size:14.9px;vertical-align:top}
thead th{background:var(--gloss-steel);font-family:var(--mono);font-weight:400;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--n0emr-white);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
tbody tr:last-child td{border-bottom:0}
td.k{font-family:var(--mono);color:var(--n0emr-white);white-space:nowrap}
td.v{color:var(--text-secondary)}

ul.l{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;max-width:64ch}
ul.l li{position:relative;padding-left:20px;color:var(--text-secondary);font-size:15.4px}
ul.l li::before{content:"";position:absolute;left:1px;top:9px;width:8px;height:8px;border-radius:2px;
  background:var(--info);box-shadow:0 0 6px rgba(41,182,246,.55)}
ul.l li b{color:var(--n0emr-white);font-weight:600}

dl.spec{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;margin:0 0 18px;font-size:15.5px}
dl.spec dt{font-family:var(--mono);color:var(--n0emr-white)}
dl.spec dd{margin:0;color:var(--text-secondary)}

/* ---------- callouts ---------- */
.callout{border:1px solid var(--rx-color);border-radius:var(--r-big);
  background:linear-gradient(180deg,rgba(27,94,32,.4) 0%,rgba(13,22,26,.85) 100%);
  padding:clamp(22px,3.4vw,34px);box-shadow:var(--lift-lg),0 0 22px -6px rgba(0,230,118,.3)}
.callout .eyebrow{color:var(--rx-color)}
.callout .btn{background:linear-gradient(180deg,#0b4a24 0%,#1b7a3f 40%,#26a35a 50%,#1b7a3f 60%,#0b4a24 100%);border-color:#0a3d1e}
.quote{font-family:var(--mono);font-size:clamp(18px,2.6vw,25px);line-height:1.35;color:var(--tx-color);
  border-left:3px solid var(--tx-color);padding:6px 0 6px 20px;margin:28px 0;max-width:24ch;
  text-shadow:0 0 14px rgba(255,82,82,.4)}

.tbd{border:1px solid var(--ptt-border);border-radius:var(--r-big);
  background:linear-gradient(180deg,rgba(127,0,0,.42) 0%,rgba(20,10,12,.85) 100%);
  padding:clamp(20px,3vw,30px);box-shadow:var(--lift-lg),0 0 22px -6px rgba(244,67,54,.3)}
.tbd .eyebrow{color:var(--tx-color)}
.tbd p{color:var(--text-primary)}

/* ---------- guide-page pieces ---------- */
.box{border:1px solid var(--n0emr-blue);border-radius:var(--r-card);background:var(--panel-grad);
  padding:17px 20px;margin:0 0 20px;box-shadow:var(--lift-lg)}
.box .bh{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--n0emr-white);margin-bottom:11px}
.box p:last-child,.box ul:last-child{margin-bottom:0}
.before{border-color:var(--info);box-shadow:var(--lift-lg),0 0 18px -8px rgba(41,182,246,.5)}
.before .bh{color:var(--info)}
.works{border-color:var(--rx-color);box-shadow:var(--lift-lg),0 0 18px -8px rgba(0,230,118,.45)}
.works .bh{color:var(--rx-color)}
.works ul.l li::before{background:var(--rx-bright);box-shadow:0 0 6px rgba(0,230,118,.6)}
.warn{border-color:var(--tx-color);box-shadow:var(--lift-lg),0 0 18px -8px rgba(255,82,82,.45)}
.warn .bh{color:var(--tx-color)}
.warn ul.l li::before{background:var(--tx-color);box-shadow:0 0 6px rgba(255,82,82,.6)}

ol.steps{counter-reset:s;list-style:none;margin:0 0 22px;padding:0}
ol.steps > li{counter-increment:s;position:relative;padding:0 0 24px 48px;
  border-left:1px solid var(--n0emr-blue);margin-left:14px}
ol.steps > li:last-child{border-left-color:transparent;padding-bottom:4px}
ol.steps > li::before{content:counter(s,decimal-leading-zero);position:absolute;left:-15px;top:0;
  font-family:var(--mono);font-size:12px;color:#fff;background:var(--gloss-blue);border:1px solid #0a2a5e;
  width:30px;height:30px;border-radius:var(--r-ctl);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--lift)}
ol.steps > li h3{margin:3px 0 6px}
ol.steps > li p{margin:0 0 10px;color:var(--text-primary)}
ol.steps > li p:last-child{margin-bottom:0}

.state{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  padding:3px 9px;border-radius:var(--r-chip);box-shadow:var(--lift)}
.s-pend{color:#fff;background:var(--gloss-red);border:1px solid #5a0000}
.s-live{color:#04220f;background:linear-gradient(90deg,#00c853,#69f0ae);border:1px solid #0a3d1e}

.related{margin-top:46px;padding-top:22px;border-top:1px solid var(--n0emr-blue)}
.related .bh{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--n0emr-silver);margin-bottom:11px}
.related a{color:var(--accent);display:block;margin-bottom:7px;font-size:15px}

/* ---------- footer ---------- */
footer{background:var(--panel-grad-deep);border-top:1px solid var(--n0emr-blue);
  padding:34px clamp(16px,4vw,40px) 42px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
footer .inner{display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between;align-items:flex-start}
footer h4{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--n0emr-silver);margin:0 0 10px}
footer a,footer span.f{display:block;font-size:14.4px;color:var(--text-secondary);text-decoration:none;margin-bottom:6px}
footer a:hover{color:var(--accent)}
footer .legal{width:100%;margin-top:12px;padding-top:16px;border-top:1px solid var(--n0emr-blue);
  font-family:var(--mono);font-size:12px;color:var(--text-muted)}

a:focus-visible,.btn:focus-visible{outline:2px solid var(--info);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- screenshots ---------- */
figure.shot{margin:30px 0 0;padding:0}
figure.shot img{display:block;width:100%;height:auto;border-radius:var(--r-card);
  border:1px solid var(--n0emr-blue);box-shadow:var(--lift-lg)}
figure.shot figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--text-muted);margin-top:11px;text-align:center}
figure.shot.wide{margin-left:calc(-1 * clamp(0px,3vw,90px));margin-right:calc(-1 * clamp(0px,3vw,90px))}
@media(max-width:900px){figure.shot.wide{margin-left:0;margin-right:0}}
.shotband{padding:0 clamp(16px,4vw,40px) clamp(34px,5vw,60px);background:var(--band-bg);
  border-bottom:1px solid var(--hairline)}
.shotband .inner{max-width:1300px}
.shotband figure.shot{margin-top:0;transform:translateY(-26px)}