:root {
  color-scheme: light dark;
  --brand: #2eaa54;
  --brand-strong: #1d8743;
  --forest: #0d201b;
  --bg: light-dark(#eef3f0, #0e1914);
  --surface: light-dark(#ffffff, #15271f);
  --text: light-dark(#12211c, #edf5f0);
  --muted: light-dark(#53665b, #b2c9bc);
  --border: light-dark(#dce7e0, #304a3a);
  --subtle: light-dark(#f3f7f5, #1e3528);
  --accent: light-dark(#237637, #89dba1);
  --good: light-dark(#15744e, #6bdbab);
  --good-bg: light-dark(#eef8f2, #192f29);
  --warn: light-dark(#835000, #ffca76);
  --warn-bg: light-dark(#fff7e8, #342b1c);
  --bad: light-dark(#a02734, #ff9da6);
  --bad-bg: light-dark(#fff0f1, #371f28);
  --unknown: light-dark(#59675f, #bdccc3);
  --unknown-bg: light-dark(#edf1ee, #2a3b31);
  --maintenance: light-dark(#315fa0, #a7c7ff);
  --maintenance-bg: light-dark(#edf4fe, #202e44);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.page { width: min(1104px, 100%); margin: auto; padding: 0 32px; }
.company-strip { background: #0b1c16; color: #c6d9ce; font-size: 11px; }
.company-strip-inner { min-height: 33px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.strip-separator { margin: 0 9px; color: #85ab94; }
.company-strip a { color: #d5e8dc; text-decoration: none; white-space: nowrap; }
.company-strip a:hover { text-decoration: underline; }
.site-header { background: var(--surface); border-bottom: 4px solid #35a74f; }
.header-inner { min-height: 91px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 17px; }
.brand { display: inline-flex; gap: 11px; align-items: center; color: var(--text); text-decoration: none; flex-shrink: 0; }
.brand img { display: block; width: 44px; height: 44px; }
.brand-wordmark { font-size: 29px; font-weight: 850; letter-spacing: -.08em; line-height: 1; display: block; }
.brand-wordmark > span { color: var(--accent); }
.brand-wordmark b { color: var(--brand); }
.brand small { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .075em; margin-top: 8px; }
.header-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.header-nav a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 700; }
.header-nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; }
h1, h2, h3, p { margin: 0; }
.hero { padding: 34px 0 70px; background: radial-gradient(ellipse at 90% 0%, #204a34 0%, #0d201b 65%); color: #ffffff; }
.eyebrow { display: flex; align-items: center; gap: 10px; text-transform: uppercase; font-weight: 750; font-size: 11px; letter-spacing: .12em; color: #9dd4af; margin-bottom: 14px; }
.eyebrow > span { width: 24px; height: 2px; flex: 0 0 auto; background: var(--brand); }
h1 { font-size: clamp(34px, 5vw, 46px); line-height: 1.13; letter-spacing: -.045em; font-weight: 800; }
h1 > span { color: #83d99e; }
.hero-description { color: #c2d7cb; max-width: 590px; margin-top: 16px; font-size: 15px; }
.status-content { position: relative; margin-top: -33px; padding-bottom: 38px; }
.overview-banner { display: flex; gap: 16px; align-items: center; border-radius: 9px; border: 1px solid var(--border); border-top: 4px solid var(--state); padding: 22px 24px; margin: 0 0 30px; background: var(--surface); box-shadow: 0 8px 22px #0d201b08; }
.state-operational { --state: var(--good); --state-bg: var(--good-bg); }
.state-degraded { --state: var(--warn); --state-bg: var(--warn-bg); }
.state-outage { --state: var(--bad); --state-bg: var(--bad-bg); }
.state-maintenance { --state: var(--maintenance); --state-bg: var(--maintenance-bg); }
.state-unknown { --state: var(--unknown); --state-bg: var(--unknown-bg); }
.status-mark { flex: 0 0 30px; height: 30px; border: 1.5px solid var(--state); border-radius: 50%; color: var(--state); display: grid; place-items: center; font-size: 18px; font-weight: 600; }
.overview-copy h2 { font-size: 16px; line-height: 1.45; font-weight: 650; }
.overview-copy p { color: var(--muted); font-size: 13px; margin-top: 5px; }
.section-heading { display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 16px; scroll-margin-top: 24px; }
h2 { font-size: 18px; line-height: 1.4; letter-spacing: -.015em; font-weight: 650; }
.muted { color: var(--muted); font-size: 12px; margin-top: 5px; }
.refresh-button { background: var(--brand-strong); color: #ffffff; border: 1px solid var(--brand-strong); border-radius: 7px; min-height: 42px; padding: 8px 15px; display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 750; }
.refresh-button:hover { background: #166d35; border-color: #166d35; }
.service-list { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.service-list > * + *, .service-children > * + * { border-top: 1px solid var(--border); }
:is(.service-row, .service-group) > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 30px; gap: 18px; align-items: center; list-style: none; padding: 20px 24px; }
:is(.service-row, .service-group) > summary::-webkit-details-marker, .history > summary::-webkit-details-marker, .updates > summary::-webkit-details-marker { display: none; }
:is(.service-row, .service-group) > summary:hover { background: var(--subtle); }
.service-title h3, .service-title h4 { font-size: 15px; font-weight: 600; line-height: 1.4; }
.service-title > span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.status-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; white-space: nowrap; background: var(--state-bg); padding: 5px 11px; border-radius: 6px; width: fit-content; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--state); flex-shrink: 0; }
.state-degraded .status-dot { border-radius: 1px; transform: rotate(45deg); }
.state-unknown .status-dot { border-radius: 0; }
.state-outage .status-dot { border-radius: 1px; }
.chevron { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; color: var(--muted); background: var(--subtle); border-radius: 8px; }
.chevron-icon { display: block; width: 16px; height: 16px; transform: rotate(0deg); }
summary:is(:hover, :focus-visible) > .chevron { color: var(--accent); background: light-dark(#e3f1e6, #284b34); }
details[open] > summary > .chevron > .chevron-icon { transform: rotate(180deg); }
.service-details { padding: 0 22px 23px; font-size: 13px; }
.service-details > p + p { margin-top: 9px; }
.confirmation { color: var(--muted); }
.scope-note { color: var(--muted); border-top: 1px solid var(--border); margin-top: 16px !important; padding-top: 13px; font-size: 12px; }
.related-incidents { margin-top: 12px; display: grid; gap: 6px; }
.content-section { margin-top: 34px; }
.activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 28px; align-items: start; }
.activity-grid > .content-section { margin: 0; padding: 23px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; scroll-margin-top: 24px; min-width: 0; }
.activity-grid .empty-state { padding-bottom: 0; }
.activity-grid .incident { border-right: 0; border-top: 0; border-bottom: 0; border-radius: 0; padding: 0 0 0 16px; }
.activity-grid .incident + .incident { margin-top: 24px; }
.count { background: var(--subtle); border-radius: 6px; padding: 2px 8px; font-size: 12px; color: var(--muted); }
.empty-state { color: var(--muted); font-size: 13px; padding: 0 0 8px; }
.service-list > .empty-state { padding: 22px; }
.incident { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--state); border-radius: 10px; padding: 22px; scroll-margin-top: 20px; }
.incident + .incident { margin-top: 14px; }
.incident-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 9px; font-size: 12px; }
.phase { color: var(--state); font-weight: 650; }
.date { color: var(--muted); font-variant-numeric: tabular-nums; }
h3 { font-size: 16px; font-weight: 600; line-height: 1.5; }
.affected { font-size: 12px; color: var(--muted); margin-top: 4px; }
.body-copy { margin-top: 12px; font-size: 13px; overflow-wrap: anywhere; }
.next-update { font-size: 12px; color: var(--muted); margin-top: 12px; }
.updates { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 17px; font-size: 13px; }
.updates > summary { color: var(--accent); display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
.update-count { color: var(--muted); margin-left: 6px; font-size: 12px; }
.updates ol { list-style: none; padding: 0; margin: 14px 0 0; }
.updates li + li { margin-top: 16px; }
.updates time, .history-updates time { display: block; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.maintenance { padding: 18px 0; border-top: 1px solid var(--border); }
.maintenance-state { color: var(--maintenance); font-size: 12px; font-weight: 600; display: block; margin-bottom: 5px; }
.maintenance-time { font-size: 13px; margin-top: 5px; font-variant-numeric: tabular-nums; }
.history-section { border-top: 1px solid var(--border); padding-top: 22px; }
.history > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.history-item { padding: 20px 0; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.history-date { color: var(--muted); font-size: 12px; }
.history-item .body-copy { flex-basis: 100%; margin: 0; }
.history-updates { flex-basis: 100%; padding-left: 18px; font-size: 13px; }
.resolved-label { font-size: 12px; color: var(--good); }
.history-empty { margin-top: 20px; }
.scope-footer { margin-top: 28px; padding: 18px 22px; border-left: 3px solid #35a74f; background: var(--surface); }
.scope-footer h2 { font-size: 13px; }
.scope-footer p { color: var(--muted); font-size: 12px; margin-top: 7px; max-width: 720px; }
.site-footer { background: #0b1c16; color: #b9cebf; font-size: 12px; }
.footer-main { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 32px 0 27px; }
.footer-wordmark { font-size: 29px; font-weight: 850; line-height: 1; letter-spacing: -.08em; color: #ffffff; }
.footer-wordmark > span, .footer-wordmark > b { color: #83d99e; }
.footer-company { margin-top: 12px; }
.footer-contact { display: grid; gap: 8px; text-align: right; }
.footer-contact > span { color: #96b3a1; font-size: 11px; }
.footer-contact > a { font-size: 13px; font-weight: 700; }
.footer-bottom { border-top: 1px solid #294235; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; padding: 19px 0 24px; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer a { text-decoration: none; color: #d5e8dc; }
.site-footer a:hover { color: #83d99e; text-decoration: underline; }
.skip-link { position: absolute; left: 16px; top: -100px; padding: 8px 12px; background: var(--surface); z-index: 1; }
.skip-link:focus { top: 8px; }
@media(max-width: 540px) {
  .page { padding: 0 20px; }
  .company-strip { font-size: 10px; }
  .company-strip-inner { padding-block: 8px; }
  .company-strip-inner > a { display: none; }
  .strip-separator { margin: 0 4px; }
  .header-inner { padding-block: 18px 11px; flex-wrap: wrap; gap: 12px; }
  .brand img { width: 41px; height: 41px; }
  .brand-wordmark { font-size: 28px; }
  .header-nav { width: 100%; justify-content: space-between; gap: 8px 16px; }
  .header-nav a { min-height: 34px; font-size: 12px; }
  .hero { padding: 29px 0 63px; }
  .eyebrow { font-size: 10px; }
  .hero-description { font-size: 14px; }
  .status-content { padding-bottom: 28px; }
  .overview-banner { padding: 18px; align-items: start; gap: 13px; }
  .status-mark { margin-top: 3px; }
  :is(.service-row, .service-group) > summary { padding: 18px; grid-template-columns: 1fr 30px; gap: 8px; }
  .service-title { grid-column: 1; }
  :is(.service-row, .service-group) > summary > .status-label { grid-column: 1; grid-row: 2; margin-top: 3px; }
  .chevron { grid-column: 2; grid-row: 1 / 3; }
  .service-details { padding: 0 18px 18px; }
  .incident { padding: 18px; }
  .refresh-button { padding: 9px 12px; }
  .activity-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 22px; }
  .activity-grid > .content-section { padding: 20px 18px; }
  .activity-grid .incident { padding: 0 0 0 12px; }
  .scope-footer { padding: 16px; }
  .footer-main { padding-top: 28px; gap: 22px; }
  .footer-contact { text-align: left; }
  .footer-bottom { display: block; }
  .footer-bottom nav { margin-top: 14px; gap: 10px 22px; }
}
@media(min-width: 541px) and (max-width: 760px) {
  .header-inner { gap: 20px; }
  .header-nav { gap: 16px; }
  .header-nav a { font-size: 12px; }
  .activity-grid { gap: 16px; }
  .activity-grid > .content-section { padding: 20px 18px; }
}
@media(pointer: coarse) {
  summary, button, .site-footer a { min-height: 44px; }
  .site-footer { align-items: baseline; }
  .site-footer a { display: inline-flex; align-items: center; }
}
@media(prefers-reduced-motion: no-preference) {
  a, button { transition: background .15s, color .15s; }
  .chevron-icon { transition: transform .18s ease; }
}
@media print { .refresh-button, .site-footer, .company-strip, .header-nav { display: none; } .page { max-width: none; } .hero { background: none; color: #12211c; padding-bottom: 24px; } .hero h1 > span { color: #237637; } .hero-description { color: #53665b; } .status-content { margin-top: 0; } }

.service-title{min-width:0}.service-title h4{margin:0;font-size:14px;font-weight:600;line-height:1.4}
.service-group-body{padding:0 12px 14px;background:var(--subtle)}
.service-group[open]>summary{background:var(--subtle)}
.group-explanation{color:var(--muted);font-size:12px;padding:2px 12px 14px;margin:0}
.service-children{border:1px solid var(--border);border-radius:8px;background:var(--surface);overflow:hidden}
.group-incidents{padding:0 12px;font-size:12px}.group-scope{margin:12px 12px 0;padding-top:12px}
@media(max-width:540px){.service-group-body{padding:0 8px 10px}.group-explanation{padding-inline:10px}.service-child>summary{padding:16px}.service-child>.service-details{padding:0 16px 16px}}