@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("assets/fonts/Montserrat-Variable.ttf") format("truetype");
}
@font-face{
  font-family:"Montserrat";
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url("assets/fonts/Montserrat-Italic-Variable.ttf") format("truetype");
}

/* JB Tech Enterprise : Microsoft 365 status
   Dark tokens are the default. Light is applied only when the
   visitor's system prefers a light scheme. No preference → dark. */
:root{
  color-scheme: dark light;

  --jb-blue-brand:#147AB4;
  --jb-navy:#1B2A3A;
  --jb-navy-2:#24384D;

  /* Dark default (WCAG AA on these surfaces) */
  --bg:#0E1620;
  --bg-header:#121C27;
  --surface:#182433;
  --surface-inset:#1E2C3C;
  --text:#D5DCE3;
  --text-muted:#A8B3BE;
  --heading:#F3F6F8;
  --line:#2C3C4E;
  --jb-blue:#5BA8D4;
  --jb-blue-dark:#8EC9E8;
  --jb-blue-tint:#163044;
  --ok:#5BD38A;
  --ok-bg:#143326;
  --ok-border:#2A6B4A;
  --warn:#F0C14D;
  --warn-bg:#2A2310;
  --warn-border:#8A6B20;
  --down:#FF8A80;
  --down-bg:#3A1816;
  --down-border:#8A3A34;
  --partial:#F0C14D;
  --partial-bg:#2A2310;
  --pill-bg:#121C27;
  --bar-empty:#3A4B5E;
  --spark-bg:#07080A;
  --sample-bg:#3B2A10;
  --sample-text:#FFF4D6;
  --sample-accent:#F5C84C;
  --btn-outline-bg:transparent;
  --btn-outline-fg:var(--heading);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.28);
  --shadow:0 10px 30px -12px rgba(0,0,0,.55);

  --font-sans:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  --fs-xs:.8125rem;
  --fs-sm:.9375rem;
  --fs-base:clamp(1rem,.97rem + .15vw,1.0625rem);
  --fs-lead:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  --fs-h4:clamp(1.0625rem,1rem + .3vw,1.1875rem);
  --fs-h3:clamp(1.1875rem,1.05rem + .55vw,1.375rem);
  --fs-h2:clamp(1.5rem,1.25rem + 1.1vw,2rem);
  --fs-h1:clamp(1.75rem,1.4rem + 1.6vw,2.5rem);

  --lh-tight:1.15;
  --lh-snug:1.25;
  --lh-normal:1.45;
  --lh-body:1.7;
  --ls-h1:-.02em;
  --ls-h2:-.015em;
  --ls-eyebrow:.12em;

  --measure:64ch;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem;
  --gutter:clamp(1rem,.6rem + 1.2vw,1.25rem);
  --container:1120px;
  --radius-sm:6px; --radius:12px; --radius-lg:16px; --radius-pill:999px;
  --tap-min:48px;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#FFFFFF;
    --bg-header:#FFFFFF;
    --surface:#FFFFFF;
    --surface-inset:#FFFFFF;
    --text:#555555;
    --text-muted:#6B6B6B;
    --heading:#1B2A3A;
    --line:#E2E8EE;
    --jb-blue:#147AB4;
    --jb-blue-dark:#0F5F8C;
    --jb-blue-tint:#E8F2F8;
    --ok:#1F7A4D;
    --ok-bg:#E8F6EE;
    --ok-border:#BFE5CD;
    --warn:#9A6B00;
    --warn-bg:#FFF4D6;
    --warn-border:#F0D48A;
    --down:#B42318;
    --down-bg:#FDECEC;
    --down-border:#F0B8B4;
    --partial:#8A5A00;
    --partial-bg:#FFF4D6;
    --pill-bg:#FFFFFF;
    --bar-empty:#D3DCE5;
    --spark-bg:#E4E8ED;
    --sample-bg:#3B2A10;
    --sample-text:#FFF4D6;
    --sample-accent:#F5C84C;
    --btn-outline-bg:#FFFFFF;
    --btn-outline-fg:#1B2A3A;
    --shadow-sm:0 1px 2px rgba(27,42,58,.06),0 1px 3px rgba(27,42,58,.08);
    --shadow:0 10px 30px -12px rgba(27,42,58,.18);
  }
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg)}
body{
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--text);
  font-weight:var(--fw-regular);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--jb-blue);text-underline-offset:.2em}
a:hover{color:var(--jb-blue-dark)}
h1,h2,h3,h4{font-family:var(--font-sans);color:var(--heading);margin:0 0 var(--space-3);text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:var(--fw-bold);letter-spacing:var(--ls-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-snug);font-weight:var(--fw-bold);letter-spacing:var(--ls-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-snug);font-weight:var(--fw-semibold)}
p{margin:0 0 var(--space-4);max-width:var(--measure);text-wrap:pretty}
.wrap{width:min(var(--container),calc(100% - (var(--gutter) * 2)));margin:0 auto}

/* Mockup ribbon */
.mockup-banner{
  background:var(--jb-navy);
  color:#fff;
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  letter-spacing:.04em;
  text-align:center;
  padding:.7rem 1.25rem;
}
.mockup-banner strong{color:#F5C84C;font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;margin-right:.4rem}
.mockup-banner span{font-weight:var(--fw-regular);letter-spacing:0;display:inline}

/* Header : centered stack, like the Novak composition, with JB Tech actions */
.site-header{
  background:var(--bg);
  border-bottom:0;
  padding:1.75rem 0 .25rem;
}
.site-header .inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:1rem;
  padding:0;
}
.brand{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-decoration:none;color:inherit;min-width:0}
.brand-logo{display:inline-flex;align-items:center;flex-shrink:0}
.brand img,.brand-logo img{height:48px;width:auto}
.brand-logo{position:relative;flex-shrink:0}
.logo--color{display:none !important}
.logo--white{display:block}
@media (prefers-color-scheme: light){
  .logo--white{display:none !important}
  .logo--color{display:block !important}
}
.tagline{
  font-size:var(--fs-xs);
  color:var(--text-muted);
  line-height:1.4;
  max-width:none;
  margin:0;
  font-style:italic;
  white-space:nowrap;
}
.header-actions{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;flex-shrink:0}
.header-phone{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--heading);text-decoration:none;font-weight:var(--fw-semibold);
  font-size:var(--fs-sm);white-space:nowrap;min-height:var(--tap-min);
}
.header-phone:hover{color:var(--jb-blue)}
.header-phone svg{width:18px;height:18px}

/* Hero */
.hero{
  padding:1.1rem 0 1.25rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero .lead{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{
  display:inline-block;
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--jb-blue);
  margin-bottom:var(--space-3);
}
.lead{font-size:var(--fs-lead);line-height:1.6;max-width:52ch;margin-bottom:0}

/* Status banner */
.banner{
  border-radius:var(--radius-lg);
  padding:1.35rem 1.5rem 1.25rem;
  margin:1.25rem 0 2.25rem;
  box-shadow:var(--shadow-sm);
}
.banner.degraded{background:var(--warn-bg);border:1px solid var(--warn-border)}
.banner.ok{background:var(--ok-bg);border:1px solid var(--ok-border)}
.banner.outage,.banner.down{background:var(--down-bg);border:1px solid var(--down-border)}
.banner h2{margin:0 0 .4rem;font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem)}
.banner p{margin:0 0 .85rem;max-width:none;color:var(--heading)}
.banner p:last-child{margin-bottom:0}
.meta-row{
  display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;
  font-size:var(--fs-xs);color:var(--text);
  margin-top:.35rem;
}
.meta-row span{white-space:normal}

/* Pills */
.pill{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  letter-spacing:.02em;text-transform:uppercase;
  border-radius:var(--radius-pill);
  padding:.28rem .7rem;
  line-height:1.2;
  margin-bottom:.7rem;
}
.pill .dot{width:.55rem;height:.55rem;border-radius:50%;background:currentColor;flex-shrink:0}
.pill.degraded,.pill.partial{background:var(--pill-bg);color:var(--warn);border:1px solid var(--warn-border)}
.pill.impacted,.pill.down,.pill.outage{background:var(--pill-bg);color:var(--down);border:1px solid var(--down-border)}
.pill.ok,.pill.operational{background:var(--pill-bg);color:var(--ok);border:1px solid var(--ok-border)}

/* Sections */
section{padding:0 0 2.75rem}
section > .intro{
  font-size:var(--fs-sm);
  color:var(--text-muted);
  margin:-.25rem 0 1.25rem;
  max-width:62ch;
}

/* Live connection checks: heading + intro match the card-grid edges */
.live-checks > h2,
.live-checks > .intro{
  max-width:none;
  width:100%;
}

/* Service grid */
.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.15rem 1.2rem 1.1rem;
  box-shadow:var(--shadow-sm);
}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.5rem}
.card-head h3{margin:0;font-size:1.05rem}
.card .blurb{font-size:var(--fs-sm);color:var(--text-muted);margin:0}
.card.impacted,.card.down,.card.outage{border-left:4px solid var(--down)}
.card.partial,.card.degraded{border-left:4px solid var(--warn)}
.card.ok{border-left:4px solid var(--ok)}

/* Split */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:1.25rem}
.split .card h3{margin-bottom:.75rem}
.list{margin:0 0 1rem;padding:0 0 0 1.15rem}
.list li{margin:0 0 .55rem;padding-left:.15rem}
.list li:last-child{margin-bottom:0}
.kicker{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--jb-blue);margin-bottom:.35rem}

/* Official update */
.update{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.25rem 1.4rem;
}
.update .meta{font-size:var(--fs-sm);color:var(--text-muted);margin:0 0 1rem}
.update-body{
  background:var(--surface-inset);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:1rem 1.15rem;
  font-size:var(--fs-sm);
  line-height:1.65;
}
.update-body p{max-width:none;margin:0 0 .85rem}
.update-body ul{margin:.2rem 0 1rem;padding-left:1.15rem}
.update-body li{margin:0 0 .45rem}
.feed-empty{
  background:var(--ok-bg);
  border:1px solid var(--ok-border);
  border-radius:var(--radius);
  padding:1.15rem 1.25rem;
}
.feed-empty h3{margin-bottom:.35rem}

/* CTA : stays navy in both themes */
.cta{
  background:var(--jb-navy);
  color:#fff;
  border-radius:var(--radius-lg);
  padding:1.75rem 1.75rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  margin-bottom:2.75rem;
}
.cta h2{color:#fff;margin:0 0 .4rem;font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem)}
.cta p{color:rgba(255,255,255,.82);margin:0;max-width:46ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:.7rem;flex-shrink:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:var(--tap-min);padding:.7rem 1.15rem;
  border-radius:var(--radius-sm);
  font-weight:var(--fw-semibold);font-size:var(--fs-sm);
  text-decoration:none;white-space:nowrap;
  border:1px solid transparent;
}
.btn svg{width:18px;height:18px}
.btn--primary{background:var(--jb-blue-brand);color:#fff}
.btn--primary:hover{background:#0F5F8C;color:#fff}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn--ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.btn--outline{background:var(--btn-outline-bg);color:var(--btn-outline-fg);border-color:var(--line)}
.btn--outline:hover{border-color:var(--jb-blue);color:var(--jb-blue)}

/* Footer : stays navy in both themes */
.site-footer{
  background:var(--jb-navy);
  color:rgba(255,255,255,.78);
  padding:2.25rem 0 2.35rem;
  font-size:var(--fs-sm);
}
.site-footer .inner{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:1.75rem;
}
.site-footer h2{color:#fff;font-size:1rem;margin:0 0 .6rem}
.site-footer a{color:#fff}
.site-footer a:hover{color:#C9E3F3}
.site-footer address{font-style:normal;line-height:1.7}
.site-footer .legal{
  grid-column:1 / -1;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:1.1rem;
  margin-top:.25rem;
  font-size:var(--fs-xs);
  color:rgba(255,255,255,.72);
  max-width:none;
}
.nav-links{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}

@media (max-width:800px){
  .tagline{white-space:normal;max-width:22rem}
  .grid,.split,.site-footer .inner{grid-template-columns:1fr}
  .cta{flex-direction:column;align-items:center;text-align:center}
  .cta p{margin-left:auto;margin-right:auto}
  .cta-actions{justify-content:center}
  .hero{padding-top:1.15rem}
  .header-phone::after{content:none}
  .site-footer{text-align:center}
  .site-footer .nav-links{align-items:center}
}
@media (max-width:480px){
  .site-header{padding-top:1.25rem}
  .brand img,.brand-logo img{height:44px}
  .banner{padding:1.1rem 1.1rem}
  .cta{padding:1.35rem 1.2rem}
  .cta-actions{width:100%}
  .cta-actions .btn{flex:1}
}

/* App-specific additions */
.preview-note,.sample-banner,.stale-banner{
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  text-align:center;
  padding:.7rem 1.25rem;
  line-height:1.5;
}
.preview-note{background:var(--jb-navy);color:#fff}
.preview-note strong{color:#F5C84C;letter-spacing:.08em;text-transform:uppercase;margin-right:.4rem}
.sample-banner{background:var(--sample-bg);color:var(--sample-text)}
.sample-banner strong{color:var(--sample-accent);letter-spacing:.08em;text-transform:uppercase;margin-right:.4rem}
.stale-banner{background:var(--warn-bg);color:var(--heading);border-bottom:1px solid var(--warn-border)}
.stale-banner + .stale-banner{border-top:0}

.incident-list{display:flex;flex-direction:column;gap:1rem}
.incident-card .ids{font-family:var(--font-sans);font-weight:var(--fw-bold);letter-spacing:.02em;color:var(--jb-blue);margin:0 0 .35rem}
.incident-meta{font-size:var(--fs-sm);color:var(--text-muted);margin:0 0 .75rem}
.ok-summary{
  margin-top:1rem;
  padding:1rem 1.15rem;
  background:var(--ok-bg);
  border:1px solid var(--ok-border);
  border-radius:var(--radius);
}
.ok-summary p{margin:0;max-width:none;color:var(--heading);font-size:var(--fs-sm)}
.ok-summary details{margin-top:.6rem;font-size:var(--fs-sm)}
.ok-summary summary{cursor:pointer;font-weight:var(--fw-semibold);color:var(--heading)}
.ok-list{margin:.6rem 0 0;padding:0;list-style:none;columns:2;gap:1rem}
.ok-list li{break-inside:avoid;margin:0 0 .35rem;color:var(--text)}

.timeline{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-inset);overflow:hidden}
.tl-item{padding:1.1rem 1.25rem;border-bottom:1px solid var(--line)}
.tl-item:last-child{border-bottom:0}
.tl-item h3{margin:0 0 .35rem;font-size:1.05rem}
.tl-item .body{font-size:var(--fs-sm);white-space:pre-wrap;max-height:10rem;overflow:auto}
.tl-item .body p{max-width:none;margin:0 0 .4rem}

.empty{color:var(--text-muted);font-size:var(--fs-sm)}
.notice-card{background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.notice-card p{margin:0;max-width:none}

@media (max-width:800px){
  .ok-list{columns:1}
}

/* Live connection-check cards */
.probe-card{display:flex;flex-direction:column;gap:.7rem}
.probe-card .card-head{margin-bottom:0}
.probe-card .blurb{margin:.2rem 0 0}
.metrics{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;font-variant-numeric:tabular-nums}
.metric b{display:block;font-size:1.15rem;letter-spacing:-.02em;color:var(--heading);font-weight:var(--fw-semibold)}
.metric span{color:var(--text-muted);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;font-weight:var(--fw-semibold)}
.endpoints{display:grid;gap:.35rem}
.ep{display:flex;justify-content:space-between;gap:.7rem;font-size:var(--fs-xs);color:var(--text-muted)}
.ep code{color:var(--heading);font-family:var(--font-sans);font-size:var(--fs-xs);word-break:break-all;background:none;padding:0}
.ep span{flex-shrink:0;font-variant-numeric:tabular-nums;text-align:right}
.timing{color:var(--text-muted);font-size:.7rem;opacity:.9;font-variant-numeric:tabular-nums}
.muted{color:var(--text-muted);font-size:var(--fs-xs);margin:0}
.official-note{
  margin:0;
  font-size:var(--fs-xs);
  color:var(--heading);
  background:var(--warn-bg);
  border:1px solid var(--warn-border);
  border-radius:var(--radius-sm);
  padding:.65rem .75rem;
  max-width:none;
}

.footer-name{color:#fff;font-weight:var(--fw-semibold)}
.about-copy{max-width:none;margin:0}
.recent-heading{margin-top:1.25rem}
.feed-block{margin-bottom:1rem}
.feed-build{margin:0}
.cta{margin-left:auto;margin-right:auto}
section > h2, section .intro{text-wrap:pretty}

/* Novak-style spark: variable-height bars, 36px track, 2px gaps, min 8px */
.hourchart{margin-top:.45rem}
.hourchart-strip{
  background:var(--spark-bg);
  border-radius:4px;
  padding:8px 10px 6px;
}
.hourchart-bars{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:36px;
  width:100%;
}
.hourbar{
  flex:1 1 0;
  min-width:0;
  border-radius:2px 2px 0 0;
  background:var(--bar-empty);
  display:block;
}
.hourbar.ok{background:var(--ok)}
.hourbar.degraded,.hourbar.partial{background:var(--warn)}
.hourbar.down,.hourbar.outage{background:var(--down)}
.hourbar.nodata{background:var(--bar-empty)}
.hourbar.hb-8{height:8px}
.hourbar.hb-9{height:9px}
.hourbar.hb-10{height:10px}
.hourbar.hb-11{height:11px}
.hourbar.hb-12{height:12px}
.hourbar.hb-13{height:13px}
.hourbar.hb-14{height:14px}
.hourbar.hb-15{height:15px}
.hourbar.hb-16{height:16px}
.hourbar.hb-17{height:17px}
.hourbar.hb-18{height:18px}
.hourbar.hb-19{height:19px}
.hourbar.hb-20{height:20px}
.hourbar.hb-21{height:21px}
.hourbar.hb-22{height:22px}
.hourbar.hb-23{height:23px}
.hourbar.hb-24{height:24px}
.hourbar.hb-25{height:25px}
.hourbar.hb-26{height:26px}
.hourbar.hb-27{height:27px}
.hourbar.hb-28{height:28px}
.hourbar.hb-29{height:29px}
.hourbar.hb-30{height:30px}
.hourbar.hb-31{height:31px}
.hourbar.hb-32{height:32px}
.hourbar.hb-33{height:33px}
.hourbar.hb-34{height:34px}
.hourbar.hb-35{height:35px}
.hourbar.hb-36{height:36px}
.hourchart-axis{
  display:flex;
  justify-content:space-between;
  margin-top:.25rem;
  padding:0 2px;
  font-size:.65rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:var(--fw-semibold);
}