/* ============================================================
   Duck Stats — shared design system
   Fonts: Space Grotesk (display) · IBM Plex Sans (text) · IBM Plex Mono (data)
   ============================================================ */
:root{
  --bg:#F5F5F0; --surface:#FFFFFF; --surface-2:#F1F1EB; --surface-3:#E7E7DF;
  --border:#E5E5DC; --border-strong:#D6D6CB;
  --fg:#1B1C18; --fg-muted:#63655C; --fg-faint:#9A9C92;
  --accent:#FFC23A; --accent-ink:#3D2D00; --accent-soft:#FFF1CF;
  --up:#2E9E5B; --warn:#C9890F; --down:#D8453F;
  --up-bg:#E6F4EB; --warn-bg:#F9EFD6; --down-bg:#FAE4E2;
  --shadow:0 1px 2px rgba(20,20,12,.05), 0 10px 26px rgba(20,20,12,.05);
  --shadow-lg:0 2px 6px rgba(20,20,12,.06), 0 24px 54px rgba(20,20,12,.09);
  --maxw:1080px;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Space Grotesk',system-ui,sans-serif;
  --text:'IBM Plex Sans',system-ui,sans-serif;
}
html[data-theme="dark"]{
  --bg:#121310; --surface:#1B1D17; --surface-2:#23251D; --surface-3:#2C2E22;
  --border:#31342A; --border-strong:#3F4233;
  --fg:#F1F2EA; --fg-muted:#A3A698; --fg-faint:#737667;
  --accent:#FFCB47; --accent-ink:#2A2000; --accent-soft:#2E2710;
  --up:#46C07C; --warn:#E4AE4F; --down:#F0726E;
  --up-bg:#15271D; --warn-bg:#2A2410; --down-bg:#2C1716;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 32px rgba(0,0,0,.38);
  --shadow-lg:0 2px 8px rgba(0,0,0,.4), 0 30px 60px rgba(0,0,0,.5);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;}
img{max-width:100%;}
::selection{background:var(--accent);color:var(--accent-ink);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.mono{font-family:var(--mono);}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--border);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 24px;max-width:var(--maxw);margin:0 auto;}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none;}
.brand img{display:block;width:30px;height:30px;}
.brand span{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em;}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-links a{font-size:13.5px;font-weight:500;color:var(--fg-muted);text-decoration:none;padding:8px 11px;border-radius:9px;transition:.15s;}
.nav-links a:hover{color:var(--fg);background:var(--surface-2);}
.nav-links a.active{color:var(--fg);}
.nav-right{display:flex;align-items:center;gap:10px;flex:none;}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border);background:var(--surface);border-radius:9px;cursor:pointer;color:var(--fg-muted);transition:.15s;padding:0;}
.theme-toggle:hover{color:var(--fg);border-color:var(--border-strong);}
.theme-toggle svg{width:17px;height:17px;}
.theme-toggle .icon-dark{display:none;}
html[data-theme="dark"] .theme-toggle .icon-light{display:none;}
html[data-theme="dark"] .theme-toggle .icon-dark{display:block;}
.nav-cta{font-size:13.5px;font-weight:600;padding:9px 15px;}
.menu-btn{display:none;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--text);font-weight:600;font-size:14px;border-radius:11px;border:1px solid transparent;cursor:pointer;text-decoration:none;padding:12px 20px;transition:.15s;white-space:nowrap;}
.btn-primary{background:var(--accent);color:var(--accent-ink);}
.btn-primary:hover{filter:brightness(.96);transform:translateY(-1px);}
.btn-ghost{background:var(--surface);color:var(--fg);border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-sm{padding:9px 15px;font-size:13px;border-radius:9px;}
.btn-lg{padding:14px 24px;font-size:15px;border-radius:12px;}

/* ---------- typography ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-muted);}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--up);}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.08;margin:0;}
.h1{font-size:clamp(34px,5.2vw,52px);font-weight:700;text-wrap:balance;}
.h2{font-size:clamp(26px,3.4vw,34px);font-weight:700;}
.h3{font-size:18px;font-weight:600;letter-spacing:-.01em;}
.lead{font-size:clamp(15px,1.7vw,17.5px);color:var(--fg-muted);max-width:34em;}
.section{padding:72px 0;}
.section-head{max-width:40em;margin:0 auto 44px;text-align:center;}
.section-head .lead{margin:12px auto 0;}

/* ---------- pill / chip / badge ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;}
.pill.up{background:var(--up-bg);color:var(--up);}
.pill.warn{background:var(--warn-bg);color:var(--warn);}
.pill.down{background:var(--down-bg);color:var(--down);}
.dot{width:8px;height:8px;border-radius:50%;flex:none;}
.dot.up{background:var(--up);} .dot.warn{background:var(--warn);} .dot.down{background:var(--down);}
.chip{font-family:var(--mono);font-size:11.5px;font-weight:500;padding:2px 7px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border);color:var(--fg-muted);}
.chip.code-2xx{color:var(--up);background:var(--up-bg);border-color:transparent;}
.chip.code-5xx{color:var(--down);background:var(--down-bg);border-color:transparent;}

/* ---------- card ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);}
.card-pad{padding:22px;}
.grid{display:grid;gap:18px;}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}

/* ---------- terminal / code block ---------- */
.terminal{background:#14150F;border:1px solid #2A2C22;border-radius:12px;overflow:hidden;font-family:var(--mono);font-size:12.5px;line-height:1.7;}
html[data-theme="dark"] .terminal{background:#0D0E0A;}
.terminal-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid #2A2C22;background:#1B1C14;}
.terminal-bar .tdot{width:10px;height:10px;border-radius:50%;}
.terminal-bar .label{margin-left:8px;font-size:11px;color:#7C7E6E;}
.terminal-body{padding:14px 16px;color:#D7D9C8;overflow-x:auto;}
.terminal-body .c-mut{color:#7C7E6E;}
.terminal-body .c-grn{color:#7BCB92;}
.terminal-body .c-yel{color:#F0C457;}
.terminal-body .c-red{color:#F08C88;}
.terminal-body .c-key{color:#9FC6E8;}

/* ---------- mini latency sparkline (CSS bars) ---------- */
.spark{display:flex;align-items:flex-end;gap:2px;height:36px;}
.spark i{flex:1;background:var(--accent);border-radius:2px;opacity:.55;display:block;}
.uptime-bars{display:flex;gap:2px;height:30px;}
.uptime-bars i{flex:1;border-radius:2px;background:var(--up);display:block;}
.uptime-bars i.w{background:var(--warn);} .uptime-bars i.d{background:var(--down);}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--border);margin-top:24px;}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px;padding:48px 0 30px;}
.footer-grid h4{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-faint);margin:0 0 14px;font-weight:600;}
.footer-grid a{display:block;font-size:13.5px;color:var(--fg-muted);text-decoration:none;padding:4px 0;}
.footer-grid a:hover{color:var(--fg);}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:18px 0 36px;border-top:1px solid var(--border);font-size:12.5px;color:var(--fg-faint);}

/* ---------- misc ---------- */
.divider{height:1px;background:var(--border);border:0;margin:0;}
.kbd{font-family:var(--mono);font-size:11px;padding:1px 5px;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:5px;background:var(--surface-2);}
.fade-up{opacity:0;transform:translateY(14px);animation:fadeUp .6s ease forwards;}
@keyframes fadeUp{to{opacity:1;transform:none;}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-7px) rotate(2deg);}}
.bob{transform-origin:bottom center;animation:bob 3.6s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.bob,.fade-up{animation:none;opacity:1;transform:none;}}

/* ---------- page intro (sub-pages) ---------- */
.page-intro{padding:54px 0 8px;}
.page-intro .h1{font-size:clamp(30px,4.4vw,44px);}
.page-intro .lead{margin-top:14px;}

/* ---------- metric cards (dashboard / status) ---------- */
.metric{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:17px 18px 15px;box-shadow:var(--shadow);}
.metric .top{display:flex;align-items:center;justify-content:space-between;}
.metric .label{font-size:12.5px;color:var(--fg-muted);font-weight:500;}
.metric .val{font-family:var(--display);font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1;margin-top:14px;}
.metric .val small{font-size:14px;color:var(--fg-muted);font-weight:500;}
.metric .sub{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--fg-faint);}
.metric .sub .delta{font-weight:600;}
.delta.pos{color:var(--up);} .delta.neg{color:var(--down);}

/* ---------- service rows / table ---------- */
.svc-head,.svc-row{display:grid;grid-template-columns:1.7fr .9fr 1fr .9fr .7fr;gap:16px;align-items:center;}
.svc-head{padding:8px 20px;font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-faint);border-bottom:1px solid var(--border);}
.svc-head .r,.svc-row .r{text-align:right;}
.svc-row{padding:13px 20px;border-bottom:1px solid var(--border);}
.svc-row:last-child{border-bottom:0;}
.svc-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.svc-meta{font-size:11.5px;color:var(--fg-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar-track{position:relative;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden;}
.bar-fill{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--up);}
.bar-fill.warn{background:var(--warn);} .bar-fill.down{background:var(--down);}
.mini-spark{display:flex;align-items:flex-end;gap:2px;height:30px;}
.mini-spark i{flex:1;border-radius:2px;display:block;min-height:3px;}
.tnum{font-family:var(--mono);font-size:13px;font-weight:500;}

/* uptime bars 60/90d */
.uptime-bars.tall{height:34px;}
.uptime-bars i{transition:opacity .15s;}
.uptime-bars i:hover{opacity:.6;}

/* incident rows */
.incident{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--border);}
.incident:first-child{border-top:0;}
.incident .date{font-family:var(--mono);font-size:12px;color:var(--fg-muted);width:56px;flex:none;}
.incident .title{flex:1;font-size:13.5px;font-weight:500;}
.incident .state{font-size:12px;font-weight:600;white-space:nowrap;}
.state.investigating{color:var(--down);} .state.resolved{color:var(--fg-faint);} .state.monitoring{color:var(--warn);}
.incident .dur{font-family:var(--mono);font-size:12px;color:var(--fg-faint);width:74px;text-align:right;flex:none;}

/* alert cards */
.alert{display:flex;gap:12px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);}
.alert .sev-bar{width:4px;border-radius:4px;align-self:stretch;flex:none;}
.alert .sev-bar.crit{background:var(--down);} .alert .sev-bar.warn{background:var(--warn);}
.sev-pill{font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:6px;}
.sev-pill.crit{background:var(--down-bg);color:var(--down);} .sev-pill.warn{background:var(--warn-bg);color:var(--warn);}

/* ---------- auth ---------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;background:radial-gradient(1100px 460px at 50% -8%,var(--accent-soft),transparent 62%),var(--bg);}
.auth-card{width:100%;max-width:392px;}
.auth-top{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:24px;}
.auth-box{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px;box-shadow:var(--shadow);}
.field-label{display:block;font-size:12.5px;font-weight:600;color:var(--fg-muted);margin-bottom:7px;}
.input{width:100%;padding:11px 13px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface-2);color:var(--fg);font-size:14px;font-family:var(--text);outline:none;transition:.15s;}
.input:focus{border-color:var(--accent);background:var(--surface);}
.input::placeholder{color:var(--fg-faint);}

/* ---------- dashboard shell ---------- */
.app{min-height:100vh;display:flex;}
.side{width:240px;flex:none;position:sticky;top:0;align-self:flex-start;height:100vh;display:flex;flex-direction:column;padding:20px 16px;border-right:1px solid var(--border);background:var(--surface);}
.side .brand{padding:4px 6px 20px;}
.side nav{display:flex;flex-direction:column;gap:3px;}
.side nav a{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border-radius:9px;text-decoration:none;font-size:13.5px;font-weight:500;color:var(--fg-muted);transition:.15s;}
.side nav a:hover{background:var(--surface-2);color:var(--fg);}
.side nav a.active{font-weight:600;color:var(--fg);background:var(--accent-soft);}
.side .spacer{margin-top:auto;}
.count-pill{background:var(--down);color:#fff;font-family:var(--mono);font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;}
.appmain{flex:1;min-width:0;}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 30px;background:var(--bg);border-bottom:1px solid var(--border);}
.live{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--fg-muted);}
.live .ping{width:8px;height:8px;border-radius:50%;background:var(--up);animation:ping 2s infinite;}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(46,158,91,.5);}70%{box-shadow:0 0 0 6px rgba(46,158,91,0);}100%{box-shadow:0 0 0 0 rgba(46,158,91,0);}}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;align-items:start;}
.price{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:26px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;}
.price.featured{border-color:var(--accent);box-shadow:var(--shadow-lg);position:relative;}
.price.featured::after{content:"Most popular";position:absolute;top:-11px;left:24px;background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:6px;}
.price .tier{font-family:var(--display);font-size:17px;font-weight:600;}
.price .amt{font-family:var(--display);font-size:38px;font-weight:700;letter-spacing:-.02em;}
.price .amt small{font-size:14px;color:var(--fg-muted);font-weight:500;}
.price ul{list-style:none;margin:14px 0 20px;padding:0;display:flex;flex-direction:column;gap:10px;}
.price li{display:flex;gap:10px;font-size:13.5px;color:var(--fg-muted);line-height:1.45;}
.price li .ck{color:var(--up);flex:none;font-weight:700;}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto;}
.qa{border-bottom:1px solid var(--border);}
.qa summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--display);font-size:16px;font-weight:600;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary .pm{font-family:var(--mono);font-size:18px;color:var(--fg-faint);transition:.2s;flex:none;}
.qa[open] summary .pm{transform:rotate(45deg);color:var(--accent);}
.qa .a{padding:0 0 20px;font-size:14px;color:var(--fg-muted);line-height:1.65;max-width:62ch;}
.qa .a code{font-family:var(--mono);font-size:12.5px;background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 5px;}

/* ---------- prose (legal) ---------- */
.prose{max-width:720px;margin:0 auto;}
.prose h2{font-size:20px;margin:30px 0 10px;}
.prose p,.prose li{font-size:14.5px;color:var(--fg-muted);line-height:1.7;}
.prose ul{padding-left:20px;}
.prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;}
html[data-theme="dark"] .prose a{color:var(--accent);}

@media (max-width:760px){
  .nav-links{display:none;}
  .menu-btn{display:inline-flex;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px;}
  .section{padding:52px 0;}
  .side{display:none;}
  .topbar{padding:14px 18px;}
  .svc-head{display:none;}
  .svc-row{grid-template-columns:1fr auto;gap:8px 12px;}
  .svc-row .col-uptime,.svc-row .col-trend{display:none;}
}

/* ---------- mobile responsive pass (2026-06-22) ---------- */
@media (max-width: 640px) {
  .h1 { font-size: clamp(26px, 7vw, 36px); }
  .h2 { font-size: clamp(22px, 5vw, 28px); }
  .lead { font-size: 14.5px; }
  .section { padding: 48px 0; }
  .nav { flex-wrap: wrap; gap: 8px; }
  .nav-links { display: none; }
  .nav-cta { font-size: 13px; padding: 8px 14px; }
  /* hero card stack */
  .wrap[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 24px !important; }
  /* pricing toggle */
  #periodToggle { flex-wrap: wrap; }
  .ptog { padding: 7px 12px; font-size: 12px; }
  /* tables horizontal scroll */
  table { display: block; overflow-x: auto; white-space: nowrap; }
  /* footer columns stack */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* CTA block padding */
  section[style*="background:var(--fg)"] { padding: 32px 20px !important; }
  section[style*="background:var(--fg)"] .h2 { font-size: 22px; }
}
@media (max-width: 380px) {
  .footer-grid { grid-template-columns: 1fr; }
}