/* Agent as a Service — design system */

:root {
  --bg: #0a0c10;
  --bg-raised: #11141b;
  --bg-sunken: #070910;
  --border: #1e2430;
  --border-strong: #2b3342;
  --text: #e8ecf3;
  --text-muted: #98a3b6;
  --text-dim: #6b7688;
  --accent: #5eead4;
  --accent-strong: #2dd4bf;
  --accent-dim: rgba(94, 234, 212, 0.12);
  --danger: #f87171;
  --warn: #fbbf24;
  --ok: #4ade80;
  --radius: 12px;
  --radius-lg: 18px;
  --maxw: 1120px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; letter-spacing: -0.02em; font-weight: 650; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.12em 0.4em;
}

pre {
  font-family: var(--mono);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0 0 1rem;
}
pre code { background: none; border: none; padding: 0; font-size: inherit; }

/* ---------- layout ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.9rem 1.25rem;
  background: rgba(10, 12, 16, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
}
@supports not (backdrop-filter: blur(12px)) {
  .site-header { background: var(--bg); }
}
.site-header::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--border);
  max-width: 100vw;
}

.brand { display: flex; align-items: center; gap: 0.55rem; color: var(--text); font-weight: 650; }
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--accent); flex-shrink: 0; }
.brand-name { font-size: 1.02rem; letter-spacing: -0.02em; white-space: nowrap; }
.brand-dim { color: var(--text-muted); font-weight: 500; }

.site-nav { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; }
.site-nav a { color: var(--text-muted); font-size: 0.94rem; font-weight: 500; }
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav .nav-signin { color: var(--text); }
/* .site-nav a (0,1,1) outranks .btn-primary (0,1,0), which left the header CTA
   rendering muted-on-accent. Restate it at equal specificity. */
.site-nav a.btn-primary { color: #06231f; }
.site-nav a.btn-primary:hover { color: #06231f; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; }

main { display: block; }

.section { max-width: var(--maxw); margin: 0 auto; padding: 4.5rem 1.25rem; }
.section-tight { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.narrow { max-width: 760px; margin-left: 0; margin-right: 0; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 9px;
  font-weight: 600;
  font-size: 0.94rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  font-family: inherit;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color: #06231f; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--text-dim); background: var(--bg-raised); }
.btn-danger { background: transparent; color: var(--danger); border-color: rgba(248, 113, 113, 0.35); }
.btn-danger:hover { background: rgba(248, 113, 113, 0.1); }
.btn-lg { padding: 0.8rem 1.5rem; font-size: 1rem; }
.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.85rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 5rem 1.25rem 3.5rem;
}
.hero::before {
  content: '';
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  /* Never wider than the screen. At 900px flat this glow reached from -262px to
     638px on a 375px phone, which made the document 638px wide. The page could
     not show that, so the width was masked with overflow-x on the document —
     and a masked overflow is still an overflow: zoom out and the canvas is the
     full 638px while the header only fills 375, which is exactly what it looked
     like. Desktop is unaffected: min() picks 900px as soon as there is room. */
  width: min(900px, 100%);
  height: 520px;
  background: radial-gradient(ellipse at center, rgba(45, 212, 191, 0.13), transparent 65%);
  pointer-events: none;
  z-index: -1;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 1.4rem;
  background: var(--bg-raised);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero h1 { max-width: 20ch; margin-bottom: 1.1rem; }
.hero .lede { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--text-muted); max-width: 62ch; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1rem; }
.hero-note { color: var(--text-dim); font-size: 0.88rem; }

.hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }

/* ---------- cards & grids ---------- */

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.card h3 { margin-bottom: 0.4rem; }
.card p { color: var(--text-muted); margin-bottom: 0; font-size: 0.95rem; }
.card-icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--accent-dim);
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2.5rem 0; }
.stat { border-left: 2px solid var(--border-strong); padding-left: 1rem; }
.stat .value { font-size: 1.7rem; font-weight: 650; letter-spacing: -0.03em; display: block; }
.stat .label { color: var(--text-muted); font-size: 0.9rem; }

/* ---------- code tabs ---------- */

.code-tabs { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-sunken); }
.tab-bar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.5rem;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.tab {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 550;
  padding: 0.4rem 0.75rem;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.tab.active { background: var(--bg-sunken); color: var(--text); }
.copy-btn {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  border-radius: 7px;
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
}
.copy-btn:hover { color: var(--text); border-color: var(--text-dim); }
.code-panel { display: none; margin: 0; border: none; border-radius: 0; background: var(--bg-sunken); }
.code-panel.active { display: block; }

/* ---------- steps ---------- */

.steps { counter-reset: step; display: grid; gap: 1.5rem; }
.step { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; align-items: start; }
.step::before {
  counter-increment: step;
  content: counter(step);
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 650;
  font-size: 0.88rem;
}
.step h3 { margin-bottom: 0.2rem; }
.step p { color: var(--text-muted); margin-bottom: 0.5rem; }

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
th, td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.pricing-table .unit { color: var(--text-dim); font-size: 0.85rem; }

/* ---------- faq ---------- */

.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  padding: 1.1rem 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--text-muted); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item > div { padding-bottom: 1.1rem; color: var(--text-muted); }
.faq-item > div p:last-child { margin-bottom: 0; }

/* ---------- cta band ---------- */

.cta-band {
  max-width: var(--maxw);
  margin: 0 auto 4rem;
  padding: 3.5rem 2rem;
  text-align: center;
  background: linear-gradient(180deg, var(--bg-raised), var(--bg-sunken));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.cta-band h2 { margin-bottom: 0.5rem; }
.cta-band p { color: var(--text-muted); max-width: 55ch; margin: 0 auto 1.6rem; }
.cta-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

/* ---------- related links ---------- */

.related { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem 3rem; }
.related h2 { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 0.8rem; }
.related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.related li a {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.related li a:hover { color: var(--text); border-color: var(--border-strong); text-decoration: none; }

/* ---------- prose (docs, legal) ---------- */

.prose { max-width: 760px; }
.prose { min-width: 0; }
.prose h2 { margin-top: 2.5rem; padding-top: 0.5rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { color: var(--text-muted); padding-left: 1.3rem; }
.prose li { margin-bottom: 0.4rem; }
.prose > p { color: var(--text-muted); }
.prose table { margin-bottom: 1.5rem; }
.prose blockquote {
  margin: 1.5rem 0;
  padding: 0.8rem 1.2rem;
  border-left: 3px solid var(--accent);
  background: var(--bg-raised);
  border-radius: 0 8px 8px 0;
  color: var(--text-muted);
}

.docs-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 3rem; max-width: var(--maxw); margin: 0 auto; padding: 3rem 1.25rem 4rem; }
/* A grid track is never allowed to be narrower than its content unless it is
   told it may be. Without these the docs column took its width from the
   widest thing inside it and the whole page became 780px on every phone. */
.docs-layout > * { min-width: 0; }
.docs-nav { position: sticky; top: 5rem; align-self: start; font-size: 0.92rem; }
.docs-nav h4 { color: var(--text-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 1.4rem 0 0.5rem; }
.docs-nav h4:first-child { margin-top: 0; }
.docs-nav a { display: block; color: var(--text-muted); padding: 0.25rem 0; }
.docs-nav a:hover, .docs-nav a[aria-current='page'] { color: var(--text); text-decoration: none; }
.docs-nav a[aria-current='page'] { color: var(--accent); }

/* ---------- dashboard ---------- */

.dash { max-width: var(--maxw); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.dash-tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; overflow-x: auto; }
.dash-tabs a {
  padding: 0.7rem 1rem;
  color: var(--text-muted);
  font-weight: 550;
  font-size: 0.94rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.dash-tabs a:hover { color: var(--text); text-decoration: none; }
.dash-tabs a[aria-current='page'] { color: var(--text); border-bottom-color: var(--accent); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-running { color: var(--ok); border-color: rgba(74, 222, 128, 0.3); }
.badge-provisioning { color: var(--warn); border-color: rgba(251, 191, 36, 0.3); }
.badge-failed, .badge-deleted { color: var(--text-dim); }

.empty-state { text-align: center; padding: 3rem 1.5rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-muted); }
.empty-state h3 { color: var(--text); }

.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.88rem; color: var(--text-muted); margin-bottom: 0.35rem; }
input[type='text'], select, textarea {
  width: 100%;
  background: var(--bg-sunken);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font-family: inherit;
  font-size: 0.94rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
textarea { font-family: var(--mono); resize: vertical; }

.alert { padding: 0.9rem 1.1rem; border-radius: 10px; margin-bottom: 1.5rem; font-size: 0.94rem; border: 1px solid; }
.alert-info { background: var(--accent-dim); border-color: rgba(94, 234, 212, 0.25); color: var(--text); }
.alert-error { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.3); color: var(--text); }
.alert-warn { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.3); color: var(--text); }

.key-reveal { font-family: var(--mono); font-size: 0.85rem; word-break: break-all; background: var(--bg-sunken); padding: 0.8rem; border-radius: 8px; border: 1px solid var(--border); }

.spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton { background: linear-gradient(90deg, var(--bg-raised), var(--border), var(--bg-raised)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; height: 1rem; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- login ---------- */

.auth-shell { min-height: 70vh; display: grid; place-items: center; padding: 3rem 1.25rem; }
.auth-card { width: 100%; max-width: 400px; text-align: center; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem 2rem; }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  width: 100%; padding: 0.8rem 1rem;
  background: #fff; color: #1f2328; border-radius: 9px; font-weight: 600; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.96rem;
}
.google-btn:hover { background: #f1f3f6; text-decoration: none; }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--border); margin-top: 2rem; }
.footer-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3rem 1.25rem 2rem;
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 2rem;
}
.footer-brand p { color: var(--text-dim); font-size: 0.9rem; max-width: 32ch; margin-top: 0.5rem; }
.site-footer h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 0.8rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer li a { color: var(--text-muted); font-size: 0.92rem; }
.site-footer li a:hover { color: var(--text); text-decoration: none; }
.footer-base {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.2rem 1.25rem 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-dim);
  font-size: 0.85rem;
  flex-wrap: wrap;
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero-split { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .docs-nav { position: static; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
  .docs-nav a { display: inline-block; margin-right: 1rem; }
}

@media (max-width: 680px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 1.25rem 1rem;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
  .site-nav .btn { margin-top: 0.7rem; border-bottom: none; justify-content: center; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; gap: 0.9rem; }
  .section { padding: 3rem 1.25rem; }
  .hero { padding-top: 3rem; }
  .cta-band { padding: 2.5rem 1.25rem; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Light-mode readers get a legible, deliberately-simple rendering. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --bg-raised: #f7f9fb;
    --bg-sunken: #f1f4f8;
    --border: #e2e7ee;
    --border-strong: #cbd3de;
    --text: #10151d;
    --text-muted: #4d5866;
    --text-dim: #6d7889;
    --accent: #0d9488;
    --accent-strong: #0f766e;
    --accent-dim: rgba(13, 148, 136, 0.1);
    --shadow: 0 1px 2px rgba(16, 21, 29, 0.06), 0 8px 24px rgba(16, 21, 29, 0.08);
  }
  .site-header { background: rgba(255, 255, 255, 0.88); }
  .btn-primary, .site-nav a.btn-primary, .site-nav a.btn-primary:hover { color: #ffffff; }
  .hero::before { background: radial-gradient(ellipse at center, rgba(13, 148, 136, 0.1), transparent 65%); }
}


/* Comparison table on the pricing page. Scrolls inside its own container on a
   phone rather than pushing the page sideways. */
.cmp { width: 100%; border-collapse: collapse; margin: 1rem 0 0.5rem; font-size: 0.95rem; }
.cmp th, .cmp td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); }
.cmp th { color: var(--text-muted); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cmp td strong { color: var(--accent); }


/* Hero stat strip. The three facts a buyer is shopping on — price, isolation
   model, time to ready — used to appear a hundred lines further down the page,
   or not at all. */
.hero-stats {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}
.hero-stats li { display: flex; flex-direction: column; gap: 0.1rem; }
.hero-stats strong { color: var(--text); font-size: 0.98rem; font-weight: 650; letter-spacing: -0.01em; }
.hero-stats span { color: var(--text-dim); font-size: 0.82rem; }
@media (max-width: 640px) {
  .hero-stats { gap: 0.6rem 1.25rem; }
  .hero-stats strong { font-size: 0.92rem; }
}


/* Two-column hero on wide screens. The right half used to be empty while the
   only proof the product works — the three API calls — sat below the fold on a
   laptop. Single column below 1000px, where stacking is the right answer. */
@media (min-width: 1000px) {
  .hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
  }
  .hero-split .hero-copy { max-width: 34rem; }
  .hero-split .hero-proof { min-width: 0; }
  .hero-split .hero-stats { gap: 0.6rem 1.5rem; }
}
@media (max-width: 999px) {
  .hero-proof { margin-top: 2.25rem; }
}
.hero-proof .code-tabs { margin: 0; }


/* ---------------------------------------------------------------- mobile fit

   The hero is a grid, and a grid child defaults to `min-width: auto` — meaning
   it refuses to shrink below the intrinsic width of its contents. The code
   block inside it is about 455px wide at its narrowest, so on a 390px phone the
   whole document stretched to 645px: the text ran off the side, and the header
   (sized to the viewport, not the document) stopped short of the right edge
   when zoomed out. Both symptoms, one cause.

   Letting the children shrink and making the wide things scroll inside their
   own box fixes it without a single fixed width. */
.hero-copy,
.hero-proof {
  min-width: 0;
}

/* Wide content scrolls inside itself rather than pushing the page sideways. */
.code-tabs,
.code-panel,
.code-block,
pre {
  max-width: 100%;
}
.code-panel,
pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Long identifiers — an API host, a sandbox id, a one-line shell command — must
   not widen the page. This was scoped to .prose and table cells, which missed
   inline code in the FAQ answers, so a 743px command sat off the side of a
   375px screen. Inline code wraps everywhere now; code inside a pre keeps its
   own line breaks and scrolls in its panel instead. */
code {
  overflow-wrap: anywhere;
}
pre code {
  overflow-wrap: normal;
}

@media (max-width: 640px) {
  /* The stat strip is a flex row of five items; below this width it needs to
     stack in two readable columns rather than overflow on the third. */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
  }
  .hero-stats li { min-width: 0; }
  .hero-stats strong,
  .hero-stats span { overflow-wrap: anywhere; }

  .hero { padding: 3rem 1.1rem 2.5rem; }
  /* 2.4rem was sized for a laptop; on a phone it forces awkward breaks. */
  .hero h1 { font-size: clamp(1.65rem, 7.2vw, 2.3rem); }
  .hero .lede { font-size: 1rem; }

  /* Full-width buttons beat two cramped ones side by side. */
  .hero-actions { display: flex; flex-direction: column; gap: 0.6rem; }
  .hero-actions .btn { width: 100%; text-align: center; }
}

/* Nothing may make the document wider than the screen — and nothing does, so
   this does not clip. `overflow-x: hidden` used to live here as a backstop, but
   it hid the one thing that was wrong (a 900px decorative glow in the hero)
   instead of showing it, and an ancestor with a non-visible overflow also stops
   `position: sticky` working in several browsers — which is what the site
   header uses. Anything that genuinely needs to be wider than the screen, like
   a wide table or a code block, scrolls inside its own container. */
html, body { max-width: 100%; }


/* Documentation and reference tables are written as content, so they cannot be
   wrapped in a scroll container by hand. On a phone the API reference table was
   wider than the screen and pushed the whole document sideways; letting the
   table itself scroll keeps every column reachable and the page the width of
   the screen. */
@media (max-width: 680px) {
  .prose table,
  .ref table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}