:root,[data-theme="light"]{--bg:#f5f7fb;--fg:#0e1726;--muted:#44526a;--card:#ffffff;--line:#c9d3e3;--accent:#0759a8;--accent-fg:#ffffff;--ok:#0d6b33;--warn:#7a5200;--danger:#a3141a}
[data-theme="dark"]{--bg:#0b1220;--fg:#e8eef8;--muted:#a9b6c9;--card:#131c2e;--line:#2a3854;--accent:#4fb3ff;--accent-fg:#04121f;--ok:#5ee08f;--warn:#ffcf5c;--danger:#ff8a8a}
[data-theme="light"]{--bg:#f5f7fb;--fg:#0e1726;--muted:#44526a;--card:#ffffff;--line:#c9d3e3;--accent:#0759a8;--accent-fg:#ffffff;--ok:#0d6b33;--warn:#7a5200;--danger:#a3141a}
*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}button,.btn{background:var(--accent);color:var(--accent-fg);border:0;border-radius:6px;padding:.5rem 1rem;font:inherit;cursor:pointer;text-decoration:none;display:inline-block}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--warn);outline-offset:2px}
.container{max-width:1100px;margin:0 auto;padding:1.5rem}.narrow{max-width:420px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1rem;display:grid;gap:.8rem}
label{display:grid;gap:.25rem}label.inline{display:inline-flex;gap:.3rem;align-items:center}
input,select{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:.45rem}
fieldset{border:1px solid var(--line);border-radius:8px}
.alert{color:var(--danger);font-weight:600}.ok{color:var(--ok)}.note{color:var(--muted)}
.badge{font-size:.75rem;font-weight:700;padding:.1rem .45rem;border-radius:4px;border:1px solid currentColor}.badge.pending{color:var(--warn)}.badge.ok{color:var(--ok)}
.links{list-style:none;padding:0;display:grid;gap:.5rem}
.topnav{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;padding:.6rem 1.2rem;background:var(--card);border-bottom:1px solid var(--line)}
.topnav .brand,.landing-nav .brand{font-weight:800;letter-spacing:.08em;text-decoration:none;color:var(--fg)}.topnav .who{color:var(--muted);flex:1}
.lang{display:inline-flex;gap:.4rem;align-items:end}.lang label{display:inline-flex;gap:.3rem;align-items:center}
.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%}th,td{border-bottom:1px solid var(--line);padding:.4rem .6rem;text-align:left;vertical-align:top}
/* Full-bleed banners: edge to edge, never stretched (aspect preserved; cover-crop on narrow screens keeps the tower/skyline centered). */
.full-bleed{width:100%;position:relative;overflow:hidden}
.full-bleed>img,.full-bleed>picture>img{display:block;width:100%;height:auto;min-height:260px;object-fit:cover;object-position:center}
.hero-overlay,.footer-overlay{position:absolute;inset:0;display:flex;flex-direction:column;color:#fff}
.hero-overlay{background:linear-gradient(180deg,rgba(4,10,22,.75) 0%,rgba(4,10,22,.15) 45%,rgba(4,10,22,.55) 100%)}
.landing-nav{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;padding:1rem 1.5rem}.landing-nav .brand{color:#fff;flex:1}.landing-nav a:not(.btn){color:#fff}.landing-nav .lang{color:#fff}
.hero-text{margin:auto 0 8% 6%;text-shadow:0 2px 12px rgba(0,0,0,.8)}.hero-text h1{font-size:clamp(2rem,6vw,4.5rem);margin:0;letter-spacing:.06em}.tagline{font-size:clamp(1rem,2.2vw,1.6rem);margin:.3rem 0 0}
.footer-overlay{justify-content:flex-end;padding:1rem 1.5rem;background:linear-gradient(0deg,rgba(4,10,22,.8),transparent 50%);text-shadow:0 1px 6px #000}
/* Montserrat 700/800 bundled locally (SIL OFL 1.1, see /static/fonts/OFL-LICENSE.txt). No external font requests. */
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/montserrat-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/montserrat-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/montserrat-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/montserrat-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
h1,h2,.brand,.hero-text,.cc-wordmark{font-family:Montserrat,"Segoe UI",Arial,sans-serif}
.svg-defs{position:absolute;width:0;height:0}
.hero-text.cc{margin:auto 0 6% 5%;--teal:#1FD1C8}
.cc-wordmark{display:inline-flex;align-items:center;gap:.35em;font-size:clamp(28px,5vw,72px);margin:0;letter-spacing:0}
.cc-mark{width:1.75em;height:1.75em;flex:none;filter:drop-shadow(0 0 .12em rgba(34,224,230,.55))}
.cc-text{display:flex;flex-direction:column;line-height:1}
.cc-name{font-weight:800;white-space:nowrap}.cc-name .a{color:#fff}.cc-name .b{color:#1FD1C8;text-shadow:0 0 .15em rgba(31,209,200,.35)}
.cc-sub{display:flex;align-items:center;gap:.4em;margin-top:.22em;font-size:.3em;font-weight:700;color:#fff;white-space:nowrap}
.cc-sub::before{content:"";flex:0 0 2.2em;height:2px;background:linear-gradient(90deg,transparent,#1FD1C8)}
.cc-tagline{font-weight:800;font-size:clamp(20px,3.2vw,48px);line-height:1.08;margin:.4em 0 0}.cc-tagline span{display:block}.cc-tagline span+span{color:#1FD1C8}
.cc-subheading{font-size:clamp(.9rem,1.4vw,1.2rem);margin:.4em 0 0;max-width:38em}
@media (max-width:640px){.cc-sub{white-space:normal}.cc-subheading{display:none}}
/* ---- Phase 2 modules */
.wide{max-width:1400px}
.badge.demo{color:var(--warn)}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.wall.one{grid-template-columns:1fr;max-width:960px}
.tile{position:relative;margin:0;background:#000;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tile video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.tile figcaption{background:var(--card);padding:.4rem .6rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.tile .state{position:absolute;top:40%;left:0;right:0;text-align:center;color:#fff;font-weight:700;text-shadow:0 1px 4px #000;pointer-events:none}
.tile .over{position:absolute;top:.5rem;right:.5rem;background:rgba(0,0,0,.7)}
.tile.off .nc{aspect-ratio:16/9;display:grid;place-items:center;color:var(--muted);font-weight:700;background:var(--bg)}
.tile:fullscreen video{height:100%;aspect-ratio:auto}
.chip{font-size:.8rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 .5rem}
.chart{width:100%;height:auto;max-height:260px;background:var(--card);border:1px solid var(--line);border-radius:8px}
.c-line{fill:none;stroke:var(--accent);stroke-width:2}.c-line2{fill:none;stroke:var(--ok);stroke-width:1.5}
.c-fc{fill:none;stroke:var(--warn);stroke-width:2.5}.c-base{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 4}
.c-band95{fill:var(--warn);opacity:.12}.c-band80{fill:var(--warn);opacity:.22}
.c-grid{stroke:var(--line);stroke-width:1}.c-axis{fill:var(--muted);font-size:11px}
.legend .lg{margin-right:1rem;font-size:.85rem;border-left:14px solid;padding-left:.35rem}
.legend .c-line{border-color:var(--accent)}.legend .c-line2{border-color:var(--ok)}.legend .c-fc{border-color:var(--warn)}.legend .c-base{border-color:var(--muted)}.legend .c-band95,.legend .c-band80{border-color:var(--warn);opacity:1}
.map{width:100%;max-width:700px;background:var(--card);border:1px solid var(--line);border-radius:8px}
.node{stroke:var(--fg);stroke-width:1.5}.node.online{fill:var(--ok)}.node.degraded{fill:var(--warn)}.node.offline{fill:var(--danger)}.node.unknown{fill:var(--muted)}
.st.online{color:var(--ok)}.st.degraded{color:var(--warn)}.st.offline{color:var(--danger)}
.filters,.inline-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:end;margin:.5rem 0}
.inline-form input{max-width:14rem}
.status-line,.alert-soft{color:var(--muted);border-left:3px solid var(--warn);padding-left:.6rem}
button[disabled]{opacity:.5;cursor:not-allowed}
.hero .full-bleed picture,.full-bleed picture{display:block}
.full-bleed picture img{display:block;width:100%;height:auto;min-height:260px;object-fit:cover}
.hero picture img{object-position:78% center}
.topnav nav{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;width:100%}
.logo-app{height:30px;width:auto;display:block}.topnav .brand{display:flex;align-items:center;background:#07122a;padding:4px 8px;border-radius:8px}
.auth .auth-brand{background:#07122a;border-radius:14px;padding:18px;text-align:center;margin:24px 0 8px}.auth .logo-auth{max-width:100%;height:auto;width:320px}.auth .by{color:#cfe8f5;margin:6px 0 0;font-size:.85rem}
/* ===== v10: sign-in/setup chrome aligned with the TRAK sister-company pattern (docs/DESIGN-SYSTEM.md) ===== */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/barlow-condensed-800.woff2) format("woff2")}
[data-theme=light] .on-dark,[data-theme=dark] .on-light{display:none!important}.on-light,.on-dark{display:contents}
.logo-chip{display:inline-flex;background:#00122c;border-radius:12px;padding:6px 10px}
.auth-hdr{position:sticky;top:0;z-index:50;height:68px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(11,31,68,.12)}
[data-theme=dark] .auth-hdr{background:rgba(0,18,44,.9);border-color:rgba(120,170,255,.18)}
.auth-hdr-in{max-width:1240px;margin:0 auto;height:100%;padding:0 20px;display:flex;align-items:center;gap:20px}
.auth-hdr .hdr-logo{display:flex}.auth-hdr .logo-sm{height:34px;width:auto}
.auth-hdr nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.auth-hdr nav a{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:1.02rem;color:#0b1f44;text-decoration:none}
.auth-hdr nav a.tb-back{font-weight:600;padding-right:22px;border-right:1px solid rgba(11,31,68,.12)}
[data-theme=dark] .auth-hdr nav a{color:#eef4ff}
.auth-hdr .tb-btn{border-radius:999px;padding:.6em 1.2em;font-weight:700;text-decoration:none}
.auth-hdr .theme-btn{background:transparent;border:1px solid rgba(11,31,68,.18);border-radius:999px;width:36px;height:36px;color:inherit;cursor:pointer}
@media (max-width:760px){.auth-hdr nav a:not(.tb-back){display:none}.auth-hdr nav a.tb-back{border:0;padding:0}.auth-hdr .tb-btn{display:none}.auth-hdr .logo-sm{height:26px}}
main.auth{padding-bottom:48px}
.auth h1{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:800;text-transform:uppercase;font-size:2.6rem;line-height:.98;margin:24px 0 16px}
.auth .card{border-radius:20px;padding:28px;box-shadow:0 1px 2px rgba(11,31,68,.04),0 12px 32px -16px rgba(11,31,68,.18);position:relative;overflow:hidden}
.auth .card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#0a6ed8,#22d3ee)}
.auth .card button{border-radius:999px;min-height:48px;font-weight:700;background:linear-gradient(135deg,#0a6ed8,#0a7bc4);box-shadow:0 8px 28px -8px rgba(10,110,216,.6)}
.auth-ftr{border-top:1px solid rgba(11,31,68,.12);background:#f3f6fb;color:#4a5d80;text-align:center;padding:22px 16px;font-size:.85rem}
[data-theme=dark] .auth-ftr{background:#03204a;color:#a9bddb;border-color:rgba(120,170,255,.18)}
.auth-ftr a{color:inherit}
[data-theme=light] .auth .auth-brand{background:#fff;border:1px solid #e2e9f4;box-shadow:0 1px 2px rgba(11,31,68,.04),0 12px 32px -16px rgba(11,31,68,.18)}
[data-theme=light] .auth .auth-brand .logo-chip{background:#00122c}
body:has(.auth-ftr){min-height:100vh;display:flex;flex-direction:column}body:has(.auth-ftr) main.auth{flex:1;width:100%}

/* Public/auth header on phones (320-430px): no sideways scroll. The shared brand sheet loads after this file and forces .tb-btn
   to inline-flex !important, so the overrides below are scoped (.auth-hdr ...) and !important. */
html,body{max-width:100%;overflow-x:clip}
.auth-hdr-in{min-width:0}.auth-hdr .hdr-logo{flex:0 1 auto;min-width:0}.auth-hdr nav{min-width:0}
.auth-hdr .cta-short{display:none}
@media (max-width:760px){
  .auth-hdr-in{gap:10px;padding:0 12px}
  .auth-hdr nav{gap:0}
  .auth-hdr nav a.tb-back{font-size:0!important;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px}
  .auth-hdr nav a.tb-back::before{content:"\2190";font:700 1.25rem/1 system-ui,sans-serif;letter-spacing:0}
  .auth-hdr nav a.tb-back .tb-back-txt{display:none}
  .auth-hdr .tb-btn.hdr-demo{display:inline-flex!important;flex:0 0 auto;min-height:36px;padding:.45em .95em!important;font-size:.85rem!important;box-shadow:none}
  .auth-hdr .theme-btn{flex:0 0 auto}
}
@media (max-width:430px){.auth-hdr .cta-full{display:none}.auth-hdr .cta-short{display:inline}.auth-hdr .logo-sm{height:24px}}