/* HoursReady design tokens v1.0.0. GENERATED from brand/tokens/tokens.json by brand/tokens/build-tokens.mjs. Do not edit by hand. */
@font-face {
  font-family: "Inter";
  src: url("/status/inter-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light dark;
  --bg: #FFFFFF;
  --surface-1: #F6F7F9;
  --surface-2: #ECEEF2;
  --ink: #0F1419;
  --ink-2: #3E4651;
  --ink-3: #5B6470;
  --line: #E3E6EB;
  --field: #7A8390;
  --accent: #3833A6;
  --accent-hover: #2C2585;
  --accent-ink: #FFFFFF;
  --accent-tint: #EFEFFC;
  --ok: #0F7A43;
  --ok-tint: #E7F5EC;
  --warn: #8A5700;
  --warn-tint: #FCF3DE;
  --bad: #B42318;
  --bad-tint: #FCEBE9;
  --data-reg: #3833A6;
  --data-ot: #9C98E0;
  --data-dt: #1E1A5C;

  --font: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-features: "cv05", "cv08";
  --font-features-num: "tnum", "case", "cv05", "cv08";
  --t-display: clamp(2.5rem, 1.913rem + 2.6087vw, 4rem);
  --t-display-lh: clamp(2.75rem, 2.163rem + 2.6087vw, 4.25rem);
  --t-display-w: 650;
  --t-display-tr: -0.032em;
  --t-h1: clamp(2.125rem, 1.7826rem + 1.5217vw, 3rem);
  --t-h1-lh: clamp(2.5rem, 2.1576rem + 1.5217vw, 3.375rem);
  --t-h1-w: 650;
  --t-h1-tr: -0.028em;
  --t-h2: clamp(1.625rem, 1.4293rem + 0.8696vw, 2.125rem);
  --t-h2-lh: clamp(2rem, 1.8043rem + 0.8696vw, 2.5rem);
  --t-h2-w: 650;
  --t-h2-tr: -0.022em;
  --t-h3: clamp(1.25rem, 1.2011rem + 0.2174vw, 1.375rem);
  --t-h3-lh: clamp(1.625rem, 1.5761rem + 0.2174vw, 1.75rem);
  --t-h3-w: 600;
  --t-h3-tr: -0.012em;
  --t-h4: 1.0625rem;
  --t-h4-lh: 1.5rem;
  --t-h4-w: 600;
  --t-h4-tr: -0.006em;
  --t-lead: clamp(1.125rem, 1.0516rem + 0.3261vw, 1.3125rem);
  --t-lead-lh: clamp(1.75rem, 1.6522rem + 0.4348vw, 2rem);
  --t-lead-w: 400;
  --t-lead-tr: -0.005em;
  --t-body: clamp(1rem, 0.9755rem + 0.1087vw, 1.0625rem);
  --t-body-lh: clamp(1.625rem, 1.5761rem + 0.2174vw, 1.75rem);
  --t-body-w: 400;
  --t-body-tr: 0;
  --t-small: 0.875rem;
  --t-small-lh: 1.25rem;
  --t-small-w: 400;
  --t-small-tr: 0;
  --t-caption: 0.8125rem;
  --t-caption-lh: 1.125rem;
  --t-caption-w: 500;
  --t-caption-tr: 0.005em;
  --t-num-xl: clamp(3.25rem, 2.5652rem + 3.0435vw, 5rem);
  --t-num-xl-lh: clamp(3.5rem, 2.913rem + 2.6087vw, 5rem);
  --t-num-xl-w: 650;
  --t-num-xl-tr: -0.03em;
  --t-num-lg: clamp(1.75rem, 1.6033rem + 0.6522vw, 2.125rem);
  --t-num-lg-lh: clamp(2rem, 1.8043rem + 0.8696vw, 2.5rem);
  --t-num-lg-w: 650;
  --t-num-lg-tr: -0.02em;
  --t-num-md: 1.0625rem;
  --t-num-md-lh: 1.5rem;
  --t-num-md-w: 600;
  --t-num-md-tr: 0;

  --sp-0: 0rem;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section: clamp(4rem, 3.2174rem + 3.4783vw, 6rem);
  --wrap: 75rem;
  --wrap-text: 42.5rem;
  --measure: 40rem;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;
  --e-1: 0 1px 2px rgb(15 20 25 / .06), 0 4px 16px rgb(15 20 25 / .08);
  --focus: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
  --dur-fast: 120ms;
  --dur-menu: 160ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0C0F14;
    --surface-1: #151A21;
    --surface-2: #1D232C;
    --ink: #ECEFF3;
    --ink-2: #B7BFCA;
    --ink-3: #8F98A5;
    --line: #262D37;
    --field: #6E7785;
    --accent: #ADB0FF;
    --accent-hover: #C9CBFF;
    --accent-ink: #0C0F14;
    --accent-tint: #1C1E3F;
    --ok: #5CCB8E;
    --ok-tint: #11271B;
    --warn: #EDB64A;
    --warn-tint: #2B2110;
    --bad: #FF8F85;
    --bad-tint: #331719;
    --data-reg: #ADB0FF;
    --data-ot: #5A55B8;
    --data-dt: #E1E2FF;
    --e-1: 0 0 0 1px var(--line);
  }
}

@media print {
  :root {
    --ink: #000000;
    --ink-2: #222222;
    --ink-3: #444444;
    --bg: #FFFFFF;
    --surface-1: #FFFFFF;
    --surface-2: #FFFFFF;
    --line: #999999;
    --accent: #000000;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-menu: 0ms; }
}

/* Status page: DESIGN-SYSTEM §7.6, same tokens as the site (brand/tokens). No inline styles anywhere (CSP style-src 'self'). */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--t-body); line-height: var(--t-body-lh); font-feature-settings: var(--font-features); font-optical-sizing: auto; }
.num, .bars-legend, .lastcheck, .incidents { font-variant-numeric: tabular-nums; font-feature-settings: var(--font-features-num); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent-hover); }
a:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
::selection { background: var(--accent-tint); color: var(--ink); }
.wrap { max-width: var(--wrap-text); margin: 0 auto; padding: 0 var(--sp-4); }
@media (min-width: 768px) { .wrap { padding: 0 var(--sp-6); } }
.skip { position: absolute; left: var(--sp-4); top: -100px; background: var(--accent); color: var(--accent-ink); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); }
.skip:focus { top: var(--sp-2); }
.site-head .head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: 56px; }
@media (min-width: 768px) { .site-head .head-row { height: 64px; } }
.wordmark { font-weight: 650; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; line-height: 1; margin: 0; }
.wordmark-sm { font-size: 1.125rem; }
.nav { display: none; gap: var(--sp-6); }
.nav a { color: var(--ink-2); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.nav a:hover { color: var(--ink); }
@media (min-width: 768px) { .nav { display: flex; } }
h1 { font-size: var(--t-h1); line-height: var(--t-h1-lh); font-weight: var(--t-h1-w); letter-spacing: var(--t-h1-tr); margin: var(--sp-7) 0 var(--sp-5); }
h2 { font-size: var(--t-h3); line-height: var(--t-h3-lh); font-weight: var(--t-h3-w); letter-spacing: var(--t-h3-tr); margin: 0; }
h3 { font-size: var(--t-h4); line-height: var(--t-h4-lh); font-weight: var(--t-h4-w); margin: var(--sp-5) 0 var(--sp-2); }
p { margin: var(--sp-2) 0; }
.detail, .meta, .bars-legend, .legend, .incidents, .lastcheck { font-size: var(--t-small); line-height: var(--t-small-lh); }
.detail { color: var(--ink-3); margin: var(--sp-1) 0 0; }
.meta { color: var(--ink-2); }

/* Status chips: icon + word, always (DS §6.7). The glyph span stays in the markup for no-CSS readers; the icon is drawn by mask. */
.state, .overall { display: inline-flex; align-items: center; gap: var(--sp-2); border-radius: var(--r-full); font-weight: 600; margin: 0; }
.state { min-height: 28px; padding: 0 10px 0 8px; font-size: var(--t-small); white-space: nowrap; }
.overall { min-height: 44px; padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-4); font-size: var(--t-lead); line-height: var(--t-lead-lh); border-radius: var(--r-lg); }
.state > span[aria-hidden], .overall > span[aria-hidden] { display: none; }
.state::before, .overall::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; }
.overall::before { width: 22px; height: 22px; }
.state-up { color: var(--ok); background: var(--ok-tint); }
.state-down { color: var(--bad); background: var(--bad-tint); }
.state-unknown { color: var(--warn); background: var(--warn-tint); }
.state-not-launched { color: var(--ink-2); background: var(--surface-2); }
.state-up::before { -webkit-mask: url("/status/icon-circle-check.svg") center / contain no-repeat; mask: url("/status/icon-circle-check.svg") center / contain no-repeat; }
.state-down::before { -webkit-mask: url("/status/icon-octagon-x.svg") center / contain no-repeat; mask: url("/status/icon-octagon-x.svg") center / contain no-repeat; }
.state-unknown::before { -webkit-mask: url("/status/icon-circle-alert.svg") center / contain no-repeat; mask: url("/status/icon-circle-alert.svg") center / contain no-repeat; }
.state-not-launched::before { -webkit-mask: url("/status/icon-circle-dashed.svg") center / contain no-repeat; mask: url("/status/icon-circle-dashed.svg") center / contain no-repeat; }
.lastcheck { color: var(--ink-2); margin: var(--sp-4) 0 var(--sp-7); max-width: var(--measure); }
.lastcheck strong { color: var(--ink); font-weight: 600; }

/* Components: grouped by soft background, no border, no shadow (DS §1.3, §4.5). */
.comp { background: var(--surface-1); border-radius: var(--r-lg); padding: var(--sp-5); margin: var(--sp-4) 0; }
@media (min-width: 768px) { .comp { padding: var(--sp-5) var(--sp-6); } }
.comp-head { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: flex-start; flex-wrap: wrap; }

/* 90-segment uptime bar (DS §7.6): up = ok at 60 % height, partial = warn, down = bad full height, no data = dashed outline. */
.bars { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; height: 32px; margin-top: var(--sp-4); align-items: end; }
.d { height: 100%; border-radius: 1px; }
.d-ok { background: var(--ok); height: 60%; }
.d-minor { background: var(--warn); height: 80%; }
.d-major { background: var(--bad); }
.d-none { height: 60%; border: 1px dashed var(--field); background: var(--surface-2); }
@media (max-width: 480px) { .bars { gap: 1px; } .d-none { border-width: 0; background: var(--surface-2); } }
.bars-legend { display: flex; justify-content: space-between; gap: var(--sp-2); color: var(--ink-3); margin: var(--sp-2) 0 0; }
.bars-legend .uptime { color: var(--ink); font-weight: 500; text-align: center; }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); color: var(--ink-2); margin: var(--sp-3) 0 0; }
.key { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 10px; height: 14px; border-radius: 1px; }
.sw-ok { background: var(--ok); }
.sw-minor { background: var(--warn); }
.sw-major { background: var(--bad); }
.sw-none { background: var(--surface-2); border: 1px dashed var(--field); }
.incidents { margin: 0; padding-left: var(--sp-5); color: var(--ink-2); }
.notes h2, .about h2 { margin: var(--sp-8) 0 var(--sp-3); font-size: var(--t-h2); line-height: var(--t-h2-lh); font-weight: var(--t-h2-w); letter-spacing: var(--t-h2-tr); }
.note { background: var(--surface-1); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0; }
.note h3 { margin-top: 0; }
.about p { color: var(--ink-2); max-width: var(--measure); }

.site-foot { background: var(--surface-1); margin-top: var(--section); padding: var(--sp-8) 0 var(--sp-7); }
.site-foot .promise { color: var(--ink-2); margin-top: var(--sp-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: var(--sp-5) 0; }
.foot-links a { color: var(--ink-2); text-decoration: none; font-size: var(--t-small); }
.foot-links a:hover { color: var(--accent); text-decoration: underline; }
.foot-line { font-size: var(--t-small); line-height: var(--t-small-lh); color: var(--ink-2); border-top: 1px solid var(--line); padding-top: var(--sp-4); margin: 0; }
@media (forced-colors: active) { .state::before, .overall::before, .d, .sw { forced-color-adjust: none; background: CanvasText; } }
@media print { .site-head .nav, .skip { display: none; } .comp, .note, .site-foot { background: none; } }