:root {
  --ink: #10231b; --muted: #64746d; --line: #dce5e0; --paper: #f7faf7; --card: #fff;
  --green: #0b9b65; --green-dark: #08724c; --green-soft: #e3f7ed;
  --amber: #d68b18; --amber-soft: #fff3d7; --red: #d84f4f; --red-soft: #feeaea;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 8% 0%, rgba(34,197,126,.08), transparent 28rem), var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.site-shell { min-height: 100vh; }
.site-header, .section, footer { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.site-header { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 760; letter-spacing: -.025em; }
.brand-mark { width: 32px; height: 32px; display: grid; grid-template-columns: repeat(3,1fr); align-items: end; gap: 3px; padding: 7px; border-radius: 10px; background: var(--ink); }
.brand-mark span { border-radius: 999px; background: #7be4b2; }
.brand-mark span:nth-child(1) { height: 8px; }.brand-mark span:nth-child(2) { height: 15px; }.brand-mark span:nth-child(3) { height: 11px; }
.brand-mark.small { width: 27px; height: 27px; border-radius: 8px; padding: 6px; }
.brand-divider { height: 18px; width: 1px; background: #c9d5cf; margin-inline: 2px; }
.brand-status { color: var(--muted); font-weight: 560; }
nav { display: flex; align-items: center; gap: 25px; color: #52645c; font-size: 13px; font-weight: 600; }
nav > a:not(.product-link):hover { color: var(--ink); }
.product-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid #cdd9d3; border-radius: 11px; background: rgba(255,255,255,.7); }
.hero { position: relative; overflow: hidden; width: min(1080px, calc(100% - 40px)); margin: 24px auto 0; min-height: 250px; padding: 46px 48px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 28px; border: 1px solid #9fdaba; border-radius: 26px; background: linear-gradient(125deg,rgba(255,255,255,.96),rgba(227,247,237,.84)),var(--green-soft); box-shadow: 0 24px 70px rgba(15,71,48,.09); }
.hero::after { content: ""; position: absolute; width: 290px; height: 290px; right: -85px; top: -145px; border: 50px solid rgba(11,155,101,.08); border-radius: 50%; }
.hero.degraded { border-color: #edcf8d; background: linear-gradient(125deg,#fff,var(--amber-soft)); }.hero.outage { border-color: #e9aaaa; background: linear-gradient(125deg,#fff,var(--red-soft)); }
.hero-orb { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); box-shadow: 0 12px 30px rgba(11,155,101,.24); }
.hero.degraded .hero-orb { background: var(--amber); }.hero.outage .hero-orb { background: var(--red); }
.hero-orb svg { width: 29px; height: 29px; stroke-width: 2.5; }
.eyebrow { margin: 0 0 7px; color: var(--green-dark); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1,h2,h3,p { margin-top: 0; } h1 { margin-bottom: 11px; font-size: clamp(31px,4vw,48px); line-height: 1.04; letter-spacing: -.055em; }
.hero-copy { max-width: 590px; margin-bottom: 0; color: #587067; font-size: 14px; line-height: 1.6; }
.last-checked { position: relative; z-index: 1; align-self: end; display: flex; align-items: center; gap: 8px; color: #527065; font-size: 11px; white-space: nowrap; }
.last-checked button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #b7d3c4; border-radius: 9px; color: var(--green-dark); background: rgba(255,255,255,.8); cursor: pointer; font-size: 18px; }
.spin { animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.section { padding-top: 76px; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 23px; }
.section-heading h2 { margin-bottom: 0; font-size: clamp(25px,3vw,34px); letter-spacing: -.04em; }
.monitoring-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(11,155,101,.12); }
.service-list { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: 0 16px 50px rgba(23,54,41,.045); }
.service-row { display: grid; grid-template-columns: minmax(220px,1fr) auto; gap: 18px 28px; padding: 27px 30px 25px; border-bottom: 1px solid var(--line); }.service-row:last-child { border-bottom: 0; }
.service-main { display: flex; align-items: center; gap: 13px; }.service-icon { flex: 0 0 auto; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; color: var(--green-dark); background: var(--green-soft); }
.service-icon.degraded { color: #986310; background: var(--amber-soft); }.service-icon.outage { color: #ad3434; background: var(--red-soft); }.service-icon svg { width: 16px; height: 16px; stroke-width: 2.6; }
.service-main h3 { margin-bottom: 3px; font-size: 15px; letter-spacing: -.015em; }.service-main p { margin-bottom: 0; color: var(--muted); font-size: 12px; }
.service-result { display: flex; align-items: center; gap: 12px; font-size: 12px; }.service-result span { color: #89968f; font-variant-numeric: tabular-nums; }.service-result strong { color: var(--green-dark); font-weight: 700; }.service-result strong.degraded { color: #a66a0d; }.service-result strong.outage { color: #bd3c3c; }
.uptime-wrap { grid-column: 1/-1; }.uptime-strip { height: 24px; display: grid; grid-template-columns: repeat(90,1fr); gap: 2px; }.uptime-day { min-width: 1px; border-radius: 2px; background: var(--green); }.uptime-day.unknown { background: #e8eeeb; }.uptime-day.degraded { background: var(--amber); }.uptime-day.outage { background: var(--red); }
.uptime-meta { display: flex; justify-content: space-between; margin-top: 7px; color: #97a39d; font-size: 9px; }.history-note { color: #74837c; }
.incidents { padding-bottom: 88px; }.incident-empty { min-height: 134px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding: 25px 30px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.incident-list { display: grid; gap: 12px; }.incident-record { min-height: 118px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px; padding: 23px 30px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.incident-record h3 { margin-bottom: 0; font-size: 15px; }.incident-record p { margin: 7px 0; color: var(--muted); font-size: 12px; line-height: 1.55; }.incident-record time { color: #89968f; font-size: 10px; }.incident-title-line { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.incident-title-line span { padding: 5px 8px; border-radius: 999px; color: #9a6414; background: var(--amber-soft); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }.incident-title-line span.resolved { color: var(--green-dark); background: var(--green-soft); }
.incident-date { width: 58px; height: 67px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #cee0d7; border-radius: 13px; background: #f1faf5; }.incident-date span { color: var(--green-dark); font-size: 10px; font-weight: 800; text-transform: uppercase; }.incident-date strong { font-size: 23px; letter-spacing: -.04em; }
.incident-empty h3 { margin-bottom: 6px; font-size: 15px; }.incident-empty p { margin-bottom: 0; color: var(--muted); font-size: 12px; }.shield { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-weight: 800; }
footer { min-height: 112px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; } footer p { margin-bottom: 0; } footer > a { justify-self: end; color: var(--green-dark); font-weight: 700; }
@media (max-width:760px) { .site-header { min-height:72px; } nav>a:not(.product-link) { display:none; }.product-link { padding:8px 10px; }.hero { grid-template-columns:auto 1fr; padding:32px 28px; }.hero-orb { width:54px; height:54px; }.last-checked { grid-column:1/-1; justify-self:start; }.section { padding-top:55px; }.section-heading { align-items:flex-start; flex-direction:column; gap:12px; }.service-row { grid-template-columns:1fr; padding:22px 20px; }.service-result { grid-row:2; padding-left:48px; justify-content:space-between; }.uptime-wrap { grid-column:1; }.history-note { display:none; }footer { grid-template-columns:1fr auto; }footer p { display:none; } }
@media (max-width:480px) { .site-header,.section,footer,.hero { width:min(100% - 24px,1080px); }.brand-status,.brand-divider { display:none; }.product-link { font-size:0; }.product-link span { font-size:17px; }.hero { margin-top:12px; padding:27px 22px; gap:17px; border-radius:20px; }.hero-orb { width:45px; height:45px; }.hero-orb svg { width:21px; height:21px; }h1 { font-size:29px; }.service-result { padding-left:0; }.uptime-strip { gap:1px; }.incident-empty { grid-template-columns:auto 1fr; padding:20px; }.shield { display:none; }footer>a { display:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.spin { animation:none; } }