:root {
  --page-bg: #eef3f8;
  --surface: #fff;
  --surface-soft: #f6f9fc;
  --ink: #071827;
  --ink-soft: #43546a;
  --border-soft: #dbe4ef;
  --brand: #102bb4;
  --brand-2: #1161c6;
  --header-bg: rgba(255, 255, 255, .86);
  --header-ink: #071827;
}

:root[data-theme="dark"] {
  --page-bg: #071014;
  --surface: #101a24;
  --surface-soft: #0c151e;
  --ink: #f7f9ff;
  --ink-soft: #b7c6d8;
  --border-soft: rgba(255, 255, 255, .12);
  --brand: #4b7dff;
  --brand-2: #35c8ff;
  --header-bg: rgba(8, 14, 22, .86);
  --header-ink: #f7f9ff;
}

body.public-body {
  background: var(--page-bg);
  color: var(--ink);
  padding-bottom: 0;
}

body.public-body p { color: var(--ink-soft); }
body.public-body .button { color: var(--ink); }

body.public-body .site-header {
  align-items: stretch;
  backdrop-filter: blur(24px) saturate(1.25);
  background: var(--header-bg);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(20, 43, 69, .16);
  display: block;
  left: clamp(12px, 4vw, 54px);
  min-height: 0;
  overflow: visible;
  padding: 0;
  position: fixed;
  right: clamp(12px, 4vw, 54px);
  top: 18px;
  z-index: 220;
}

body.public-body .site-header.is-scrolled { top: 10px; box-shadow: 0 18px 60px rgba(20, 43, 69, .16); }
:root[data-theme="dark"] body.public-body .site-header.is-scrolled { box-shadow: 0 18px 60px rgba(0, 0, 0, .42); }

body.public-body .audience-switch {
  align-items: center;
  background: rgba(255, 255, 255, .58);
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  display: flex;
  gap: 0;
  padding: 0 14px;
}

:root[data-theme="dark"] body.public-body .audience-switch { background: rgba(255, 255, 255, .04); }

body.public-body .audience-switch a {
  align-items: center;
  background: var(--surface);
  border-radius: 0;
  box-shadow: inset 0 -2px 0 var(--brand);
  color: var(--ink);
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  white-space: nowrap;
}

body.public-body .audience-switch .icon { height: 16px; width: 16px; }

body.public-body .header-main {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: clamp(150px, 15vw, 230px) minmax(0, 1fr) auto;
  min-height: 64px;
  padding: 9px 11px;
}

body.public-body .brand {
  align-items: center;
  display: inline-flex;
  flex: 0 0 clamp(150px, 15vw, 230px);
  min-width: clamp(150px, 15vw, 230px);
  width: clamp(150px, 15vw, 230px);
}

body.public-body .brand-logo {
  display: block;
  height: 38px;
  max-height: 38px;
  max-width: 100%;
  min-height: 38px;
  object-fit: contain;
  object-position: left center;
  width: 100%;
}

body.public-body .nav {
  --indicator-x: 4px;
  --indicator-y: 4px;
  --indicator-w: 0px;
  --indicator-h: 34px;
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink-soft);
  display: flex;
  font-size: 11px;
  font-weight: 800;
  gap: 3px;
  justify-self: center;
  min-height: 44px;
  padding: 4px;
  position: relative;
  text-transform: uppercase;
  white-space: nowrap;
}

body.public-body .nav a {
  align-items: center;
  border-radius: 999px;
  color: var(--ink-soft);
  display: inline-flex;
  min-height: 34px;
  padding: 0 11px;
  position: relative;
  z-index: 1;
}

body.public-body .nav a:hover { color: var(--ink); }
body.public-body .nav-indicator {
  background: rgba(17, 97, 198, .12);
  border-radius: 999px;
  box-shadow: none;
  height: var(--indicator-h);
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate(var(--indicator-x), var(--indicator-y));
  transition: transform .18s ease, width .18s ease, height .18s ease;
  width: var(--indicator-w);
}

body.public-body .header-actions { align-items: center; display: flex; gap: 8px; }
body.public-body .theme-toggle {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  color: var(--ink);
  display: inline-flex;
  height: 42px;
  justify-content: center;
  min-height: 42px;
  padding: 0;
  width: 42px;
}

body.public-body .theme-toggle .icon { display: block; height: 24px; width: 24px; }
body.public-body .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] body.public-body .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] body.public-body .theme-toggle .icon-sun { display: block; }
body.public-body .header-portal { background: var(--ink); border-color: var(--ink); color: var(--surface); }
body.public-body .menu-toggle { display: none; }

body.public-body main { padding: 162px clamp(16px, 4vw, 54px) 70px; }
body.public-body .status-hero {
  background: linear-gradient(120deg, rgba(3, 21, 54, .92), rgba(15, 91, 154, .70)), url("/assets/media/hero/dc01-scaled.jpg") center / cover;
  border-radius: 14px;
  box-shadow: 0 22px 70px rgba(20, 43, 69, .16);
  color: #fff;
  gap: clamp(20px, 4vw, 48px);
  margin: 0 auto 52px;
  max-width: 1220px;
  padding: clamp(28px, 5vw, 56px);
}

body.public-body .hero-copy h1 { font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -.045em; line-height: 1.02; margin-bottom: 18px; }
body.public-body .hero-copy p, body.public-body .hero-copy .eyebrow { color: #fff; }
body.public-body .overall-card { background: rgba(7, 16, 20, .82); border-color: rgba(255, 255, 255, .18); box-shadow: 0 18px 60px rgba(0, 0, 0, .18); }
body.public-body .overall-card p, body.public-body .overall-card > small, body.public-body .overall-card > div > span { color: #c9d7e4; }
body.public-body .overall-card.status-maintenance:before { background: var(--amber); }
body.public-body .status-maintenance { color: var(--amber); }
body.public-body .maintenance-strip { background: color-mix(in srgb, var(--amber) 10%, var(--surface)); border-color: color-mix(in srgb, var(--amber) 35%, var(--border-soft)); }
body.public-body .section-heading h2, body.public-body .component-group h3, body.public-body .component-top strong, body.public-body .no-incidents h3, body.public-body .incident-card h3, body.public-body .recent-incidents h3 { color: var(--ink); }
body.public-body .component-group, body.public-body .incident-card { background: var(--surface); border-color: var(--border-soft); box-shadow: 0 18px 55px rgba(20, 43, 69, .08); }
body.public-body .component-group > h3 { background: var(--surface-soft); border-color: var(--border-soft); }
body.public-body .component-row + .component-row, body.public-body .recent-incidents details { border-color: var(--border-soft); }
body.public-body .uptime-bars .empty { background: var(--border-soft); }
body.public-body .no-incidents { background: color-mix(in srgb, var(--green) 8%, var(--surface)); border-color: color-mix(in srgb, var(--green) 25%, var(--border-soft)); }
body.public-body .empty-state { border-color: var(--border-soft); }

body.public-body .subscribe-section { align-items:start; background:var(--surface); border:1px solid var(--border-soft); border-radius:14px; box-shadow:0 18px 55px rgba(20,43,69,.08); display:grid; gap:clamp(28px,6vw,70px); grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr); padding:clamp(26px,4vw,46px); }
body.public-body .subscribe-copy h2 { color:var(--ink); font-size:clamp(2rem,4vw,3rem); letter-spacing:-.045em; margin-bottom:14px; }
body.public-body .subscribe-form { display:grid; gap:14px; }
body.public-body .subscribe-form label { color:var(--ink); font-size:13px; font-weight:800; }
body.public-body .subscribe-form input, body.public-body .subscribe-form select { background:var(--surface-soft); border:1px solid var(--border-soft); border-radius:9px; color:var(--ink); display:block; margin-top:7px; min-height:46px; padding:0 12px; width:100%; }
body.public-body .subscribe-form input:focus, body.public-body .subscribe-form select:focus { border-color:var(--brand-2); outline:3px solid color-mix(in srgb,var(--brand-2) 16%,transparent); }
body.public-body .subscribe-form .button { justify-self:start; }
body.public-body .subscribe-form small { color:var(--ink-soft); font-size:12px; line-height:1.5; }
body.public-body .subscribe-honeypot { height:0; left:-10000px; overflow:hidden; position:absolute; width:0; }
body.public-body .subscription-notice { border:1px solid; border-radius:9px; font-size:13px; padding:12px 14px; }
body.public-body .subscription-notice.success { background:color-mix(in srgb,var(--green) 9%,var(--surface)); border-color:color-mix(in srgb,var(--green) 35%,var(--border-soft)); color:var(--green); }
body.public-body .subscription-notice.danger { background:color-mix(in srgb,var(--red) 9%,var(--surface)); border-color:color-mix(in srgb,var(--red) 35%,var(--border-soft)); color:var(--red); }
@media(max-width:800px){body.public-body .subscribe-section{grid-template-columns:1fr}}

body.public-body .incident-card { border-left-width:8px; padding:0 24px; }
body.public-body .incident-card.impact-minor { border-left-color:#ea7317; }
body.public-body .incident-card.impact-degradation { border-left-color:#d98f16; }
body.public-body .incident-card.impact-maintenance { border-left-color:#2d6cdf; }
body.public-body .incident-summary-head { align-items:center; display:flex; gap:20px; justify-content:space-between; padding:24px 0; }
body.public-body .incident-summary-head span { color:var(--ink-soft); font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
body.public-body .incident-summary-head h3 { font-size:clamp(1.25rem,3vw,1.65rem); margin:7px 0 0; }
body.public-body .incident-summary-head h3 a:hover { color:var(--brand-2); }
body.public-body .incident-view-link { align-items:center; background:var(--surface-soft); border:1px solid var(--border-soft); border-radius:10px; color:var(--ink); display:inline-flex; flex:none; font-size:13px; font-weight:850; gap:8px; min-height:44px; padding:0 15px; }
body.public-body .incident-view-link:hover { background:color-mix(in srgb,var(--brand-2) 9%,var(--surface)); border-color:color-mix(in srgb,var(--brand-2) 28%,var(--border-soft)); }
body.public-body .incident-view-link .icon { height:17px; width:17px; }
body.public-body .incident-summary-update, body.public-body .incident-summary-affected, body.public-body .incident-summary-footer { border-top:1px solid var(--border-soft); padding:22px 0; }
body.public-body .incident-summary-update>strong, body.public-body .incident-summary-affected>strong { color:var(--ink); display:block; font-size:14px; margin-bottom:5px; }
body.public-body .incident-summary-update p, body.public-body .incident-summary-affected p { color:var(--ink-soft); margin:0; }
body.public-body .incident-summary-footer { color:var(--ink-soft); font-size:12px; }
body.public-body .recent-incidents { margin-top:34px; }
body.public-body .recent-incident-link { align-items:center; border-bottom:1px solid var(--border-soft); display:grid; gap:14px; grid-template-columns:1fr auto auto; padding:17px 3px; }
body.public-body .recent-incident-link:hover strong { color:var(--brand-2); }
body.public-body .recent-incident-link>span { display:grid; gap:3px; }
body.public-body .recent-incident-link strong { color:var(--ink); }
body.public-body .recent-incident-link small, body.public-body .recent-incident-link time { color:var(--ink-soft); font-size:12px; }
body.public-body .recent-incident-link .icon { color:var(--ink-soft); height:17px; width:17px; }

body.public-body .incident-detail-page { min-height:70vh; }
body.public-body .incident-detail-section { max-width:920px; }
body.public-body .incident-back-link { color:var(--ink-soft); display:inline-block; font-size:13px; font-weight:800; margin-bottom:20px; }
body.public-body .incident-back-link:hover { color:var(--brand-2); }
body.public-body .incident-detail-card { background:var(--surface); border:1px solid var(--border-soft); border-left:8px solid #d98f16; border-radius:14px; box-shadow:0 18px 55px rgba(20,43,69,.08); overflow:hidden; }
body.public-body .incident-detail-card.impact-major, body.public-body .incident-detail-card.impact-critical { border-left-color:#dc3545; }
body.public-body .incident-detail-card.impact-minor { border-left-color:#ea7317; }
body.public-body .incident-detail-card.impact-maintenance { border-left-color:#2d6cdf; }
body.public-body .incident-detail-header { align-items:flex-start; display:flex; gap:24px; justify-content:space-between; padding:clamp(25px,4vw,40px); }
body.public-body .incident-detail-header .eyebrow { color:var(--brand-2); margin-bottom:10px; }
body.public-body .incident-detail-header h1 { color:var(--ink); font-size:clamp(2rem,5vw,3.4rem); letter-spacing:-.045em; line-height:1.08; margin:0; }
body.public-body .incident-state { background:color-mix(in srgb,var(--amber) 12%,var(--surface)); border:1px solid color-mix(in srgb,var(--amber) 35%,var(--border-soft)); border-radius:999px; color:#b5740a; flex:none; font-size:12px; font-weight:850; padding:8px 12px; }
body.public-body .incident-state.is-resolved { background:color-mix(in srgb,var(--green) 10%,var(--surface)); border-color:color-mix(in srgb,var(--green) 30%,var(--border-soft)); color:var(--green); }
body.public-body .incident-detail-meta { border-bottom:1px solid var(--border-soft); border-top:1px solid var(--border-soft); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
body.public-body .incident-detail-meta>div { padding:20px clamp(18px,3vw,30px); }
body.public-body .incident-detail-meta>div+div { border-left:1px solid var(--border-soft); }
body.public-body .incident-detail-meta strong { color:var(--ink); display:block; font-size:12px; margin-bottom:6px; }
body.public-body .incident-detail-meta p { color:var(--ink-soft); font-size:13px; margin:0; }
body.public-body .incident-detail-updates { padding:clamp(25px,4vw,40px); }
body.public-body .incident-detail-updates h2 { color:var(--ink); font-size:1.35rem; margin-bottom:28px; }
body.public-body .incident-detail-updates .incident-timeline { margin:0; }
body.public-body .incident-detail-updates .incident-timeline li { gap:18px; padding-bottom:26px; }
body.public-body .incident-detail-updates .incident-timeline li>i { background:var(--brand-2); border-color:var(--surface); box-shadow:0 0 0 1px var(--border-soft); }
body.public-body .incident-update-heading { align-items:center; display:flex; gap:14px; justify-content:space-between; }
body.public-body .incident-update-heading strong { color:var(--ink); }
body.public-body .incident-update-heading time { color:var(--ink-soft); font-size:12px; }
body.public-body .incident-detail-updates p { color:var(--ink-soft); margin:7px 0 0; }
body.public-body .incident-not-found { min-height:45vh; padding-top:40px; }
body.public-body .incident-not-found h1 { color:var(--ink); font-size:clamp(2.2rem,5vw,4rem); }
@media(max-width:700px){body.public-body .incident-summary-head,body.public-body .incident-detail-header{align-items:flex-start;flex-direction:column}.incident-view-link{width:100%}body.public-body .incident-detail-meta{grid-template-columns:1fr}body.public-body .incident-detail-meta>div+div{border-left:0;border-top:1px solid var(--border-soft)}body.public-body .incident-update-heading{align-items:flex-start;flex-direction:column;gap:4px}}

body.public-body .octa-footer {
  background: linear-gradient(135deg, #0d171d 0%, #091115 58%, #071014 100%);
  border: 0;
  border-top: 1px solid rgba(73, 101, 116, .22);
  color: #8fa0aa;
  display: block;
  margin: 56px 0 0;
  padding: 0;
}

body.public-body .octa-footer__inner { margin: 0 auto; max-width: 1220px; width: min(calc(100% - 48px), 1220px); }
body.public-body .octa-footer__main { align-items: center; display: flex; gap: 48px; justify-content: space-between; padding: 32px 0 28px; }
body.public-body .octa-footer__brand { min-width: 0; }
body.public-body .octa-footer__logo { align-items: center; display: inline-flex; }
body.public-body .octa-footer__logo img { display: block; height: auto; width: min(350px, 72vw); }
body.public-body .octa-footer__brand p { color: #8fa0aa; font-size: 13px; font-weight: 800; line-height: 1.65; margin: 13px 0 0; max-width: 430px; }
body.public-body .octa-footer__links { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
body.public-body .octa-footer__links a, body.public-body .octa-footer__links button {
  align-items: center;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(73, 101, 116, .22);
  border-radius: 10px;
  color: #b5c0c6;
  display: inline-flex;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  gap: 8px;
  min-height: 40px;
  padding: 0 13px;
}

body.public-body .octa-footer__links button { cursor: pointer; }
body.public-body .octa-footer__links .icon { color: #7d929e; height: 15px; width: 15px; }
body.public-body .octa-footer__links a:hover, body.public-body .octa-footer__links button:hover { background: #192a34; border-color: #3d5a69; color: #fff; transform: translateY(-1px); }
body.public-body .octa-footer__bottom { align-items: center; border-top: 1px solid rgba(73, 101, 116, .22); display: flex; gap: 24px; justify-content: space-between; padding: 13px 0; }
body.public-body .octa-footer__legal { align-items: center; color: #8fa0aa; display: flex; flex-wrap: wrap; font-size: 12px; font-weight: 800; gap: 10px; line-height: 1.5; }
body.public-body .octa-footer__legal span:first-child { color: #b5c0c6; font-weight: 900; }
body.public-body .octa-footer__separator { background: #40535e; border-radius: 50%; height: 3px; width: 3px; }
body.public-body .octa-footer__utilities, body.public-body .octa-footer__social { align-items: center; display: flex; }
body.public-body .octa-footer__utilities { gap: 12px; }
body.public-body .octa-footer__social { gap: 7px; list-style: none; margin: 0; padding: 0; }
body.public-body .octa-footer__social a, body.public-body .octa-footer__portal { align-items: center; background: rgba(255, 255, 255, .035); border: 1px solid rgba(73, 101, 116, .22); border-radius: 10px; color: #9dafb8; display: inline-flex; gap: 8px; justify-content: center; min-height: 34px; }
body.public-body .octa-footer__social a { width: 34px; }
body.public-body .octa-footer__portal { font-size: 13px; font-weight: 800; padding: 0 13px; }
body.public-body .octa-footer__social .icon, body.public-body .octa-footer__portal .icon { height: 15px; width: 15px; }
body.public-body .icon-discord, body.public-body .icon-facebook, body.public-body .icon-x { fill: currentColor; stroke: none; }

:root[data-theme="light"] body.public-body .octa-footer { background: linear-gradient(135deg, #fff 0%, #f7fafc 58%, #eef4f8 100%); border-top-color: #dbe4ef; box-shadow: 0 -18px 60px rgba(20, 43, 69, .08); color: #43546a; }
:root[data-theme="light"] body.public-body .octa-footer__brand p, :root[data-theme="light"] body.public-body .octa-footer__legal { color: #526174; }
:root[data-theme="light"] body.public-body .octa-footer__legal span:first-child { color: #071827; }
:root[data-theme="light"] body.public-body .octa-footer__bottom { border-top-color: #dbe4ef; }
:root[data-theme="light"] body.public-body .octa-footer__links a, :root[data-theme="light"] body.public-body .octa-footer__links button, :root[data-theme="light"] body.public-body .octa-footer__social a, :root[data-theme="light"] body.public-body .octa-footer__portal { background: #f6f9fc; border-color: #dbe4ef; color: #43546a; }

@media (max-width: 1120px) {
  body.public-body .menu-toggle { align-items: center; background: transparent; border: 0; color: var(--header-ink); display: inline-flex; height: 44px; justify-content: center; padding: 0; width: 44px; }
  body.public-body .header-main { grid-template-columns: clamp(150px, 15vw, 230px) 1fr auto; }
  body.public-body .nav { display: none; }
  body.public-body .nav.open { align-items: stretch; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 8px; box-shadow: 0 24px 70px rgba(0, 0, 0, .24); color: var(--ink); display: grid; gap: 4px; left: 0; min-height: 0; padding: 10px; position: absolute; right: 0; top: 100%; z-index: 240; }
  body.public-body .nav.open a { border-radius: 6px; color: var(--ink); justify-content: flex-start; padding: 8px 12px; }
  body.public-body .nav-indicator { display: none; }
}

@media (max-width: 991px) {
  body.public-body .octa-footer__main { align-items: flex-start; flex-direction: column; gap: 24px; }
  body.public-body .octa-footer__links { justify-content: flex-start; }
}

@media (max-width: 780px) {
  body.public-body .audience-switch { display: none; }
  body.public-body .site-header { border-radius: 14px; }
  body.public-body .header-main { grid-template-columns: 168px 1fr auto; min-height: 58px; }
  body.public-body .brand, body.public-body .brand-logo { min-width: 168px; width: 168px; }
  body.public-body .brand-logo { height: 32px; max-height: 32px; min-height: 32px; }
  body.public-body .header-actions .header-portal { display: none; }
  body.public-body main { padding: 110px 16px 50px; }
  body.public-body .status-hero { border-radius: 10px; display: block; padding: 22px; }
  body.public-body .overall-card { margin-top: 24px; }
  body.public-body .octa-footer { margin-top: 40px; }
  body.public-body .octa-footer__inner { width: calc(100% - 24px); }
  body.public-body .octa-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  body.public-body .octa-footer__links a, body.public-body .octa-footer__links button { justify-content: center; }
  body.public-body .octa-footer__bottom { align-items: flex-start; flex-direction: column; gap: 14px; padding: 18px 0 21px; }
  body.public-body .octa-footer__utilities { justify-content: space-between; width: 100%; }
}

@media (max-width: 420px) {
  body.public-body .octa-footer__links { grid-template-columns: 1fr; }
  body.public-body .octa-footer__separator { display: none; }
  body.public-body .octa-footer__legal { align-items: flex-start; flex-direction: column; gap: 4px; }
}