:root {
    --status-navy: #071a52;
    --status-ink: #13213a;
    --status-muted: #61708b;
    --status-blue: #1769e0;
    --status-line: #dbe4f0;
    --status-mist: #f3f7fc;
    --status-white: #ffffff;
    --status-green: #168761;
    --status-green-soft: #e8f7f0;
    --status-red: #b42318;
    --status-red-soft: #fff0ee;
    --status-gray: #aeb9ca;
    --status-gray-soft: #e6ebf2;
    --status-shell: min(1120px, calc(100% - 48px));
    color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--status-ink);
    background: var(--status-mist);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; }

.status-shell { width: var(--status-shell); max-width: 100%; margin-inline: auto; }

.status-skip-link {
    position: fixed;
    z-index: 20;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    color: white;
    background: var(--status-navy);
    transform: translateY(-160%);
}

.status-skip-link:focus { transform: translateY(0); }

.status-header {
    position: relative;
    z-index: 2;
    border-bottom: 1px solid rgba(219, 228, 240, .9);
    background: rgba(255, 255, 255, .94);
}

.status-header__inner {
    display: flex;
    min-height: 80px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.status-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--status-navy); font-size: 20px; font-weight: 850; letter-spacing: -.035em; text-decoration: none; }
.status-brand svg { width: 31px; height: 31px; fill: #eaf1ff; stroke: var(--status-blue); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.status-brand svg path:first-child { stroke-width: 1.8; }

.status-header__link {
    color: var(--status-blue);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.status-header__link:hover { text-decoration: underline; }

.status-hero {
    position: relative;
    overflow: hidden;
    padding: 76px 0 104px;
    color: white;
    background:
        radial-gradient(circle at 82% 10%, rgba(64, 190, 226, .27), transparent 28%),
        radial-gradient(circle at 68% 90%, rgba(87, 113, 255, .22), transparent 31%),
        linear-gradient(135deg, #061644, #0b286f 62%, #0d3b8f);
}

.status-hero::before,
.status-hero::after {
    position: absolute;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    content: "";
}

.status-hero::before { top: -220px; right: 2%; }
.status-hero::after { right: 17%; bottom: -285px; }

.status-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.status-eyebrow,
.status-kicker {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.status-eyebrow { display: flex; align-items: center; gap: 9px; color: #c6e8ff; }
.status-eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #61d69b; box-shadow: 0 0 0 5px rgba(97, 214, 155, .13); }
.status-kicker { color: var(--status-blue); }

.status-hero h1 {
    max-width: 720px;
    margin: 17px 0 14px;
    overflow-wrap: break-word;
    font-size: clamp(42px, 6vw, 68px);
    line-height: 1.02;
    letter-spacing: -.055em;
}

.status-hero p:last-child { max-width: 660px; margin: 0; color: #cbd9f3; font-size: 18px; line-height: 1.65; }

.status-hero__mark {
    display: grid;
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 32px;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 24px 60px rgba(0, 0, 0, .18);
    transform: rotate(8deg);
}

.status-hero__mark span { position: absolute; width: 18px; border-radius: 99px; background: white; }
.status-hero__mark span:nth-child(1) { height: 48px; transform: translate(-27px, 10px); }
.status-hero__mark span:nth-child(2) { height: 76px; transform: translate(0, -4px); }
.status-hero__mark span:nth-child(3) { height: 34px; transform: translate(27px, 17px); }

.status-content { position: relative; z-index: 3; margin-top: -44px; padding-bottom: 72px; }

.overall-status {
    display: flex;
    min-height: 112px;
    padding: 25px 30px;
    align-items: center;
    gap: 20px;
    border: 1px solid;
    border-radius: 18px;
    color: white;
    box-shadow: 0 20px 60px rgba(7, 26, 82, .18);
}

.overall-status--operational { border-color: #2ba777; background: linear-gradient(135deg, #168761, #20a874); }
.overall-status--outage { border-color: #d5493e; background: linear-gradient(135deg, #9f2018, #c63b30); }

.overall-status__icon {
    display: grid;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
}

.overall-status__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; }
.overall-status > div:last-child { min-width: 0; }
.overall-status h2 { margin: 0 0 5px; overflow-wrap: break-word; font-size: 23px; letter-spacing: -.02em; }
.overall-status p { margin: 0; color: rgba(255, 255, 255, .83); line-height: 1.5; }

.component-section { padding-top: 64px; }

.component-section__heading {
    display: flex;
    margin-bottom: 24px;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
}

.component-section__heading h2,
.status-note h2 { margin: 7px 0 0; color: var(--status-navy); font-size: 30px; letter-spacing: -.035em; }
.component-section__heading > p { max-width: 390px; margin: 0; overflow-wrap: break-word; color: var(--status-muted); line-height: 1.55; text-align: right; }

.component-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.status-component {
    min-width: 0;
    overflow: hidden;
    padding: 26px;
    border: 1px solid var(--status-line);
    border-radius: 18px;
    background: var(--status-white);
    box-shadow: 0 14px 38px rgba(9, 37, 87, .06);
}

.status-component__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.status-component__label { margin: 0 0 7px; color: var(--status-navy); font-size: 18px; font-weight: 800; }
.status-component__description { margin: 0; color: var(--status-muted); font-size: 14px; line-height: 1.5; }

.component-badge {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 31px;
    padding: 6px 10px;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.component-badge i { width: 7px; height: 7px; border-radius: 50%; }
.component-badge--operational { color: #116848; background: var(--status-green-soft); }
.component-badge--operational i { background: var(--status-green); box-shadow: 0 0 0 3px rgba(22, 135, 97, .12); }
.component-badge--down { color: #92251d; background: var(--status-red-soft); }
.component-badge--down i { background: var(--status-red); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }

.status-component__signal { display: grid; width: 100%; height: 30px; margin: 26px 0 17px; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 4px; }
.status-component__signal-hour { border-radius: 3px; }
.status-component__signal-hour--operational { background: #74cca7; }
.status-component__signal-hour--down { background: #d9574e; }
.status-component__signal-hour--unknown { background: var(--status-gray-soft); }
.status-component__signal-hour:focus-visible { outline: 3px solid rgba(23, 105, 224, .32); outline-offset: 2px; }

.status-history-legend { display: flex; flex-wrap: wrap; gap: 13px; margin: -7px 0 17px; color: var(--status-muted); font-size: 11px; }
.status-history-legend span { display: inline-flex; align-items: center; gap: 5px; }
.status-history-legend i { width: 8px; height: 8px; border-radius: 2px; }
.legend-operational { background: #74cca7; }
.legend-outage { background: #d9574e; }
.legend-unknown { background: var(--status-gray-soft); border: 1px solid var(--status-gray); }

.status-component__message { min-height: 24px; margin: 0 0 20px; font-size: 14px; font-weight: 650; }
.status-component--operational .status-component__message { color: #176747; }
.status-component--down .status-component__message { color: #92251d; }

.status-component__details { display: grid; margin: 0; padding-top: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; border-top: 1px solid #e8eef6; }
.status-component__details div { display: grid; gap: 4px; }
.status-component__details dt { color: var(--status-muted); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.status-component__details dd { margin: 0; color: var(--status-ink); font-size: 14px; font-weight: 750; }

.incident-section { padding-top: 58px; }
.incident-section__heading { display: flex; margin-bottom: 22px; align-items: end; justify-content: space-between; gap: 30px; }
.incident-section__heading h2 { margin: 7px 0 0; color: var(--status-navy); font-size: 30px; letter-spacing: -.035em; }
.incident-section__heading > p { margin: 0; color: var(--status-muted); font-size: 13px; }

.incident-card {
    display: flex;
    padding: 22px 24px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid var(--status-line);
    border-left-width: 5px;
    border-radius: 14px;
    background: white;
    box-shadow: 0 10px 28px rgba(9, 37, 87, .05);
}
.incident-card > div { min-width: 0; }
.incident-card + .incident-card { margin-top: 12px; }
.incident-card--resolved { border-left-color: var(--status-green); }
.incident-card--ongoing { border-left-color: var(--status-red); }
.incident-state { display: inline-block; margin-bottom: 6px; color: var(--status-green); font-size: 11px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.incident-card--ongoing .incident-state { color: var(--status-red); }
.incident-card h3 { margin: 0 0 6px; color: var(--status-navy); font-size: 18px; }
.incident-card p { margin: 0; color: var(--status-muted); font-size: 13px; line-height: 1.55; }
.incident-card > strong { flex: 0 0 auto; color: var(--status-ink); font-size: 14px; }
.incident-empty { padding: 25px; color: #52627e; border: 1px dashed #b9c7da; border-radius: 14px; background: rgba(255, 255, 255, .62); text-align: center; }
.incident-empty--warning { color: #8a4b12; border-color: #e4b378; background: #fff8eb; }

.status-note {
    display: grid;
    margin-top: 22px;
    padding: 28px;
    grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 34px;
    border: 1px solid #cddbee;
    border-radius: 18px;
    background: #eef4fc;
}

.status-note h2 { font-size: 23px; }
.status-note > p { margin: 0; color: #52627e; line-height: 1.7; }

.status-footer { border-top: 1px solid var(--status-line); background: white; }
.status-footer__inner { display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 24px; color: var(--status-muted); font-size: 13px; }
.status-footer__inner p { margin: 0; }
.status-footer__inner p:first-child { display: flex; align-items: center; gap: 9px; color: var(--status-ink); font-weight: 700; }
.status-footer__inner p:first-child span { width: 8px; height: 8px; border-radius: 50%; background: var(--status-green); box-shadow: 0 0 0 4px rgba(22, 135, 97, .12); }
.status-page--outage .status-footer__inner p:first-child span { background: var(--status-red); box-shadow: 0 0 0 4px rgba(180, 35, 24, .12); }

@media (max-width: 820px) {
    :root { --status-shell: min(100% - 34px, 680px); }
    .status-hero { padding-block: 60px 90px; }
    .status-hero__mark { display: none; }
    .component-grid { grid-template-columns: 1fr; }
    .component-section__heading { align-items: flex-start; flex-direction: column; gap: 12px; }
    .component-section__heading > p { text-align: left; }
    .incident-section__heading { align-items: flex-start; flex-direction: column; gap: 10px; }
    .status-note { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 540px) {
    :root { --status-shell: calc(100% - 28px); }
    .status-header__inner { min-height: 70px; }
    .status-brand { font-size: 18px; }
    .status-brand svg { width: 27px; height: 27px; }
    .status-header__link { font-size: 12px; }
    .status-header__link-prefix { display: none; }
    .status-hero { padding-top: 48px; }
    .status-hero h1 { font-size: clamp(34px, 10.5vw, 40px); }
    .status-hero p:last-child { font-size: 16px; }
    .status-content { margin-top: -35px; }
    .overall-status { min-height: 0; padding: 22px 19px; align-items: flex-start; }
    .overall-status__icon { width: 40px; height: 40px; }
    .overall-status h2 { font-size: 19px; }
    .overall-status p { font-size: 14px; }
    .component-section { padding-top: 48px; }
    .component-section__heading h2 { font-size: 26px; }
    .status-component { padding: 21px 18px; }
    .status-component__top { flex-direction: column; }
    .status-component__signal { gap: 3px; }
    .status-component__details { grid-template-columns: 1fr; }
    .incident-card { align-items: flex-start; flex-direction: column; gap: 13px; }
    .status-footer__inner { padding-block: 22px; align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}