/* Shared styles for the developer pages (status, changelog, webhooks). Same tokens as the landing and /pricing/. */
@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage.woff2) format("woff2");font-weight:600 800;font-display:swap}
@font-face{font-family:"Bricolage Fallback";src:local("Arial");size-adjust:96%;ascent-override:94%;descent-override:26%;line-gap-override:0%}
:root{
  --bg:#EEF1F6;--surface:#FFFFFF;--sunk:#E4E9F1;--ink:#101B2D;--mute:#55627A;--line:#D3DBE7;
  --wire:#2447F5;--wire-soft:rgba(36,71,245,.14);--buy:#FFD43B;--buy-hover:#FFC700;--buy-ink:#1A1300;
  --ok:#0B7A4B;--ok-soft:rgba(11,122,75,.12);--warn:#9A6A00;--warn-soft:rgba(154,106,0,.14);--bad:#B42318;--bad-soft:rgba(180,35,24,.12);
  --none:#C9D2DF;
  --display:"Bricolage","Bricolage Fallback",system-ui,sans-serif;
  --text:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0C1422;--surface:#131E30;--sunk:#0F1929;--ink:#E8EEF7;--mute:#9AA8BF;--line:#243249;
  --wire:#8098FF;--wire-soft:rgba(128,152,255,.16);--ok:#4CC790;--ok-soft:rgba(76,199,144,.14);--warn:#F0B44C;--warn-soft:rgba(240,180,76,.14);
  --bad:#FF7B6E;--bad-soft:rgba(255,123,110,.14);--none:#2A3850;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0C1422;--surface:#131E30;--sunk:#0F1929;--ink:#E8EEF7;--mute:#9AA8BF;--line:#243249;
  --wire:#8098FF;--wire-soft:rgba(128,152,255,.16);--ok:#4CC790;--ok-soft:rgba(76,199,144,.14);--warn:#F0B44C;--warn-soft:rgba(240,180,76,.14);
  --bad:#FF7B6E;--bad-soft:rgba(255,123,110,.14);--none:#2A3850;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--text)}
a{color:var(--wire);text-underline-offset:2px}
:focus-visible{outline:3px solid var(--wire);outline-offset:2px;border-radius:6px}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 28px}}
h1,h2,h3{font-family:var(--display);font-weight:760;letter-spacing:-.022em;margin:0;text-wrap:balance}
h1{font-size:clamp(30px,4.4vw,46px);line-height:1.05}
h2{font-size:clamp(22px,2.6vw,28px);line-height:1.15;margin-top:44px}
h3{font-size:18px;line-height:1.25;font-weight:700}
p{margin:0}
.lead{color:var(--mute);font-size:18px;max-width:64ch;margin-top:12px}
.mute{color:var(--mute)}
code,pre{font-family:var(--mono);font-size:14px}
code{background:var(--sunk);padding:1px 6px;border-radius:6px}
pre{background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:14px 16px;overflow-x:auto;line-height:1.5;margin:12px 0 0}
pre code{background:none;padding:0}

.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:8px;height:60px}
.logo{display:flex;align-items:center;gap:9px;font:760 19px/1 var(--display);letter-spacing:-.02em;color:var(--ink);text-decoration:none;margin-right:auto;white-space:nowrap}
.logo img{width:28px;height:28px;border-radius:7px}
.top nav{display:flex;align-items:center;gap:2px}
.top nav a{color:var(--mute);text-decoration:none;font-size:15px;padding:10px 8px;border-radius:8px}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.top nav a.buy{display:inline-flex;align-items:center;white-space:nowrap;min-height:40px;padding:8px 14px;border-radius:10px;background:var(--buy);color:var(--buy-ink);font-weight:700;margin-left:6px}
.top nav a.buy:hover{background:var(--buy-hover)}
@media (max-width:520px){.top nav a.hide-s{display:none}.top nav a{padding:10px 6px;font-size:14px}.top nav a.buy{padding:8px 10px}}

main{padding:36px 0 64px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.stack>*+*{margin-top:12px}

.pill{display:inline-flex;align-items:center;gap:8px;font-weight:650;font-size:14px;border-radius:999px;padding:4px 12px}
.dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--none)}
.s-operational .dot,.dot.s-operational{background:var(--ok)}
.s-degraded .dot,.dot.s-degraded{background:var(--warn)}
.s-outage .dot,.dot.s-outage{background:var(--bad)}
.pill.s-operational{background:var(--ok-soft);color:var(--ok)}
.pill.s-degraded{background:var(--warn-soft);color:var(--warn)}
.pill.s-outage{background:var(--bad-soft);color:var(--bad)}

footer.site{border-top:1px solid var(--line);padding:28px 0 60px;color:var(--mute);font-size:14px}
footer.site .links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px}
footer.site a{color:var(--mute)}