/* RESET */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --navy: #020C45;
  /* Same value as styles.css:--ink. Duplicated because these pages do NOT load styles.css:
     a custom property is inherited through the DOM, not shared between stylesheets, so a
     var(--ink) here would be invalid-at-computed-value-time and silently fall back to
     `inherit`. Keep in step with styles.css. */
  --ink: #020C45;
  --navy-mid: #1e3a8a;
  --blue: #3b82f6;
  --blue-dark: #1d4ed8;
  --blue-light: #50A2FF;
  --blue-pale: #e8f1ff;
  --white: #ffffff;
  --gray-bg: #f8faff;
  --gray-light: #e8edf6;
  --gray-mid: #c4cfe3;
  --text: #0f1f4b;
  --text-muted: #64748b;
  --border: #e8edf6;
  --radius: 10px;
  --shadow: 0 4px 20px rgba(2,12,69,0.09);

  --font-head: 'Sora', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--gray-bg);
}

/* NAV */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  height: 64px;
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid var(--border);
}

.logo {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.logo .check {
  color: var(--blue-light);
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 32px;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--ink);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-login {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  transition: color 0.2s;
}

.btn-login:hover {
  color: var(--blue);
}

.btn-signup {
  background: var(--blue);
  color: #ffffff;
  border: none;
  padding: 9px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.2s, transform 0.15s;
}

.btn-signup:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
}

/* HERO */
.hero {
  background: var(--navy);
  padding: 80px 40px;
  position: relative;
  overflow: hidden;
}

/* soft blue orbs — same decoration as the login/sign-up navy panels */
.hero::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(80,162,255,0.12);
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(80,162,255,0.07);
}

.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  color: var(--blue-light);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  animation: fadeUp 0.6s ease both;
}

.hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.1rem, 4.5vw, 2.8rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  animation: fadeUp 0.6s 0.05s ease both;
}

.hero-title span {
  color: var(--blue-light);
}

.hero-sub {
  color: rgba(255,255,255,0.7);
  margin: 20px 0 28px;
  line-height: 1.7;
  animation: fadeUp 0.6s 0.1s ease both;
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #020C45;
  padding: 14px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(2,12,69,0.35);
  transition: color 0.2s, transform 0.15s, box-shadow 0.2s;
  animation: fadeUp 0.6s 0.15s ease both;
}

.btn-hero:hover {
  color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(2,12,69,0.45);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* CODE BLOCK */
.code-block {
  /* solid navy surface so the light-on-dark syntax hues stay legible on light
     pages (agent-docs/api-reference) as well as inside the navy hero */
  background: var(--navy);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 20px;
  font-family: monospace;
  animation: fadeUp 0.6s 0.2s ease both;
  max-width: 100%;
  overflow-x: auto;
}
/* inside the hero, keep the original translucent-panel look over the navy */
.hero .code-block { background: rgba(255,255,255,0.08); }

.code-block-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.code-dot:nth-child(1) { background: #ff5f57; }
.code-dot:nth-child(2) { background: #febc2e; }
.code-dot:nth-child(3) { background: #28c840; }

.code-line {
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.c-white { color: #fff; }
.c-blue { color: #79c0ff; }
.c-green { color: #a5f3a0; }
.c-orange { color: #ffa657; }
.c-pink { color: #f2a7be; }

/* TRUST STRIP */
.trust-strip {
  background: var(--blue-pale);
  padding: 18px 40px;
}

.trust-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
}

.trust-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
}

.trust-items {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
}

.trust-item svg {
  color: #00c27a; /* the check-green used across the public jobs modals */
  flex-shrink: 0;
}

/* FOOTER */
.footer {
  background: var(--navy);
  color: rgba(255,255,255,0.65);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 40px 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}

.footer-logo {
  font-family: var(--font-head);
  color: #ffffff;
  font-weight: 700;
}

.footer-check {
  color: var(--blue-light);
}

.footer-tagline {
  font-size: 0.85rem;
}

.footer-socials {
  display: flex;
  gap: 10px;
}

.footer-social-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.footer-social-btn:hover {
  border-color: var(--blue-light);
  color: var(--blue-light);
  background: rgba(80,162,255,0.1);
}

.footer-links-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
}

.footer-links-col a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}

.footer-links-col a:hover {
  color: #ffffff;
}

.footer-bottom {
  padding: 20px 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .nav-links {
    display: none;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   Docs pages (agent-docs.html, api-reference.html).
   Their layout lives in each page's inline <style>; the rules below
   (a) neutralise the shared `nav {}` skin (agent.css + nav.css) that
   leaks onto the in-page <nav class="docs-toc">, and (b) align links,
   CTAs and endpoint cards with the public-page language. Selectors are
   deliberately higher-specificity than the inline sheet where they must
   win, and property-disjoint where they must not.
   ===================================================================== */

.docs-grid nav.docs-toc {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  justify-content: flex-start;
  height: auto;
  padding: 0;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  z-index: auto;
}
@media (max-width: 860px) {
  .docs-grid nav.docs-toc { position: static; flex-direction: row; flex-wrap: wrap; }
  /* The single column is `1fr`, i.e. minmax(auto, 1fr), so it can never measure
     narrower than its content's min-content — and the monospace endpoint paths
     are single unbreakable tokens (up to ~430px at 375px wide). That dragged the
     column, both grid items and the whole page past the viewport, so every docs
     page scrolled sideways. Free the track, then let the paths wrap.
     (Selectors outrank the pages' inline <style>, which is loaded after this.) */
  .docs-wrap .docs-grid { grid-template-columns: minmax(0, 1fr); }
  .docs-grid .docs-path,
  .docs-grid .op-path { overflow-wrap: anywhere; }
}

.docs-head .docs-eyebrow { color: var(--blue); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; }
.docs-head .docs-title { font-weight: 700; letter-spacing: -0.02em; }

/* In-copy links (excludes .docs-cta buttons) */
.docs-section p a, .docs-sub a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}
.docs-section p a:hover, .docs-sub a:hover { text-decoration: underline; }

.docs-wrap .docs-cta { transition: background 0.2s, transform 0.15s, box-shadow 0.2s; }
.docs-cta:hover { background: #0a1a5c; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(2,12,69,0.2); }

/* Endpoint list / operation cards sit on the tinted page background */
.docs-endpoints { background: var(--white); }
.docs-endpoints .row { transition: background 0.12s; }
.docs-endpoints .row:hover { background: var(--gray-bg); }
.op { box-shadow: 0 2px 10px rgba(2,12,69,0.05); }
.op summary { transition: background 0.12s; }
.op summary:hover { background: var(--gray-bg); }

/* HTTP method hues → the converged semantic palette */
.op summary .m-post { color: #00915c; }
.op summary .m-put { color: #b45309; }
.op summary .m-delete { color: #ef4444; }
/* ---------- Dark mode — toggled by JS/theme.js (agent/docs pages are self-contained) ---------- */
body.dark {
  --bg: #0b1226;
  --white: #111a38;           /* surface flips; always-white text is literal #ffffff */
  --gray-bg: #0e1832;
  --gray-light: #26325c;
  --gray-mid: #34426e;
  --border: #26325c;
  --text: #dbe4f8;
  --ink: #e8eefc;
  --text-muted: #93a3c8;
  --blue-pale: rgba(59,130,246,0.16);
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  /* --navy is NOT flipped: it is the bg of heroes/footers/panels (already dark) */
  background: #0b1226;
  color: #dbe4f8;
}
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5 { color: #e8eefc; }
/* ── QA dark-mode accessibility fixes (agent + docs pages are self-contained → repaint nav + navy text) ── */
body.dark { color-scheme: dark; }
body.dark nav { background: #111a38; border-bottom-color: #26325c; }
body.dark nav .logo { color: #ffffff; }
body.dark .nav-links a { color: var(--text, #dbe4f8); }
body.dark .nav-links a:hover, body.dark .nav-links a.active { color: #50A2FF; }
body.dark .btn-login { color: var(--text, #dbe4f8); }
body.dark .trust-item { color: #e8eefc; }
body.dark .docs-section code.inline, body.dark code.inline { color: #e8eefc; }
body.dark .op-path, body.dark .docs-path, body.dark .op-body th { color: #e8eefc; }
body.dark .docs-cta { color: #ffffff; }
body.dark .op summary .m-post { color: #4ade80; }
body.dark .op summary .m-put { color: #fbbf24; }
body.dark .op summary .m-delete { color: #f87171; }