:root{--navy:#1F4E79;--navy-dark:#163a5f;--navy-light:#2e6da4;--accent:#2e9cca;--green:#1a7f4b;--green-bg:#e8f5ee;--grey:#64748b;--grey-light:#f1f5f9;--border:#e2e8f0;--text:#1e293b}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--text)}
header{background:var(--navy);color:#fff;padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.brand{display:flex;align-items:center;gap:10px;font-size:1.1rem;font-weight:700;letter-spacing:.3px;color:#fff;text-decoration:none}
header nav{display:flex;gap:28px;align-items:center}
header nav a{color:rgba(255,255,255,.8);text-decoration:none;font-size:.875rem;font-weight:500;transition:color .15s}
header nav a:hover{color:#fff}
header nav a.active{color:#fff;font-weight:600}
.nav-cta{background:#fff;color:var(--navy)!important;padding:7px 18px;border-radius:7px;font-weight:600!important;font-size:.85rem!important;transition:background .15s,opacity .15s!important}
.nav-cta:hover{background:#e8f0f8!important}
#status-pill{display:flex;align-items:center;gap:7px;font-size:.8rem;font-weight:500;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:4px 12px;transition:background .2s;text-decoration:none;color:rgba(255,255,255,.85)}
#status-pill .dot{width:8px;height:8px;border-radius:50%;background:#94a3b8;transition:background .3s}
#status-pill.connected .dot{background:#4ade80}
#status-pill.connected{background:rgba(74,222,128,.15);border-color:rgba(74,222,128,.3)}
#status-pill.disconnected .dot{background:#f87171}
.hamburger{display:none;background:none;border:none;cursor:pointer;color:#fff;padding:6px;border-radius:6px;align-items:center;justify-content:center;flex-shrink:0}
.hamburger:hover{background:rgba(255,255,255,.12)}
.nav-flyout{display:none;position:absolute;top:64px;left:0;right:0;z-index:200;background:var(--navy-dark);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 6px 20px rgba(0,0,0,.3);flex-direction:column;padding:8px 0}
.nav-flyout.open{display:flex}
.nav-flyout a{padding:14px 24px;color:rgba(255,255,255,.85);text-decoration:none;font-size:.9rem;font-weight:500;display:block}
.nav-flyout a:hover,.nav-flyout a.active{background:rgba(255,255,255,.08);color:#fff}
@media(max-width:750px){header{position:relative}header nav a:not(.nav-cta){display:none}#status-text{display:none}.hamburger{display:flex}}
@media(max-width:950px){header.authenticated{position:relative}header.authenticated nav a:not(.nav-cta){display:none}header.authenticated .hamburger{display:flex}}
@media(max-width:600px){header{padding:0 20px}}
.page-hero{background:linear-gradient(160deg,var(--navy) 0%,#163a5f 100%);color:#fff;padding:72px 40px 80px;text-align:center}
.page-hero-eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:16px}
.hero h1 em,.page-hero h1 em{font-style:normal;color:#7dd3fc}
.page-hero h1{color:#fff;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;line-height:1.15;margin-bottom:16px;max-width:700px;margin-left:auto;margin-right:auto}
.page-hero p{font-size:1rem;color:rgba(255,255,255,.75);line-height:1.65;max-width:560px;margin:0 auto}
@media(max-width:600px){.page-hero{padding:52px 20px 60px}}