/* ─── Veridor design system ─────────────────────────────────────────────
   Type: Geist + Geist Mono (single voice).
   Palette: warm parchment ground, deep ink, single verdant teal accent.
   Vibe: technical reference manual. Dense, hairline rules, no chrome.
   ───────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* Surfaces */
  --vd-bg: #faf9f5;
  --vd-surface: #ffffff;
  --vd-surface-alt: #f4f2ea;
  --vd-surface-sunk: #efece2;

  /* Lines */
  --vd-line: #e6e3d8;
  --vd-line-strong: #d2cebf;
  --vd-line-faint: #efece2;

  /* Ink */
  --vd-ink: #15170f;
  --vd-ink-2: #2c2e25;
  --vd-muted: #74756a;
  --vd-subtle: #9a9a8d;

  /* Accent — deep verdant teal */
  --vd-accent: oklch(48% 0.085 175);
  --vd-accent-2: oklch(40% 0.075 178);
  --vd-accent-soft: oklch(95% 0.025 170);
  --vd-accent-line: oklch(82% 0.04 172);
  --vd-accent-ink: #faf9f5;

  /* Status */
  --vd-ok: oklch(46% 0.12 145);
  --vd-warn: oklch(58% 0.13 75);
  --vd-danger: oklch(50% 0.16 28);

  /* Type */
  --vd-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --vd-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radius */
  --vd-r-sm: 4px;
  --vd-r: 6px;
  --vd-r-lg: 10px;
  --vd-r-xl: 14px;

  /* Shadow */
  --vd-shadow-sm: 0 1px 0 rgba(20, 23, 15, .04), 0 1px 2px rgba(20, 23, 15, .04);
  --vd-shadow: 0 1px 2px rgba(20, 23, 15, .06), 0 8px 24px -12px rgba(20, 23, 15, .12);
  --vd-shadow-lg: 0 1px 2px rgba(20, 23, 15, .06), 0 24px 60px -24px rgba(20, 23, 15, .25);
}

/* `overflow-x: clip` (not `hidden`) — `hidden` creates a scroll container
   that breaks `position: sticky` for descendants like the topbar. */
html, body { overflow-x: clip; }

.vd {
  font-family: var(--vd-sans);
  font-feature-settings: "ss01", "ss02", "cv11";
  font-size: 15px;
  line-height: 1.55;
  color: var(--vd-ink);
  background: var(--vd-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  max-width: 100vw;
  overflow-x: clip;
}

.vd *,
.vd *::before,
.vd *::after { box-sizing: border-box; }

.vd a:not(.vd-btn) { color: inherit; text-decoration: none; }
.vd a.link { color: var(--vd-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklch, var(--vd-accent) 35%, transparent); }
.vd a.link:hover { text-decoration-color: var(--vd-accent); }

.vd p { margin: 0; }
.vd h1, .vd h2, .vd h3, .vd h4 { margin: 0; font-weight: 500; letter-spacing: -0.015em; }
.vd code, .vd pre, .vd kbd { font-family: var(--vd-mono); font-feature-settings: "ss01", "zero"; }

/* ─── Wordmark ─────────────────────────────── */
.vd-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vd-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--vd-ink);
}
.vd-mark {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─── Buttons ──────────────────────────────── */
.vd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  font: 500 14px/1 var(--vd-sans);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: var(--vd-r);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
  white-space: nowrap;
  text-decoration: none;
}
.vd-btn-primary {
  background: var(--vd-ink);
  color: var(--vd-bg);
  border-color: var(--vd-ink);
}
.vd-btn-primary:hover { background: #000; }
.vd-btn-accent {
  background: var(--vd-accent);
  color: var(--vd-accent-ink);
  border-color: var(--vd-accent);
}
.vd-btn-accent:hover { background: var(--vd-accent-2); border-color: var(--vd-accent-2); }
.vd-btn-secondary {
  background: var(--vd-surface);
  color: var(--vd-ink);
  border-color: var(--vd-line-strong);
}
.vd-btn-secondary:hover { background: var(--vd-surface-alt); }
.vd-btn-ghost {
  background: transparent;
  color: var(--vd-ink-2);
  border-color: transparent;
}
.vd-btn-ghost:hover { background: var(--vd-surface-alt); color: var(--vd-ink); }
.vd-btn-danger {
  background: var(--vd-surface);
  color: var(--vd-danger);
  border-color: color-mix(in oklch, var(--vd-danger) 40%, var(--vd-line));
}
.vd-btn-danger:hover { background: color-mix(in oklch, var(--vd-danger) 8%, var(--vd-surface)); }
.vd-btn-sm { padding: 5px 10px; font-size: 13px; }
.vd-btn-lg { padding: 11px 18px; font-size: 15px; }

/* ─── Inputs ──────────────────────────────── */
.vd-input {
  font: 400 14px/1.4 var(--vd-sans);
  color: var(--vd-ink);
  background: var(--vd-surface);
  border: 1px solid var(--vd-line-strong);
  border-radius: var(--vd-r);
  padding: 9px 12px;
  width: 100%;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.vd-input::placeholder { color: var(--vd-subtle); }
.vd-input:focus {
  outline: none;
  border-color: var(--vd-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--vd-accent) 18%, transparent);
}
.vd-input-mono { font-family: var(--vd-mono); font-size: 13px; }

/* ─── Tags / pills ─────────────────────────── */
.vd-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 11px/1 var(--vd-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: var(--vd-r-sm);
  background: var(--vd-accent-soft);
  color: var(--vd-accent-2);
  border: 1px solid var(--vd-accent-line);
}
.vd-tag-neutral { background: var(--vd-surface-alt); color: var(--vd-muted); border-color: var(--vd-line); }
.vd-tag-ok { background: color-mix(in oklch, var(--vd-ok) 8%, var(--vd-surface)); color: var(--vd-ok); border-color: color-mix(in oklch, var(--vd-ok) 30%, var(--vd-line)); }
.vd-tag-danger { background: color-mix(in oklch, var(--vd-danger) 6%, var(--vd-surface)); color: var(--vd-danger); border-color: color-mix(in oklch, var(--vd-danger) 30%, var(--vd-line)); }

/* ─── Code surfaces ─────────────────────────── */
.vd-pre {
  font: 400 13px/1.6 var(--vd-mono);
  background: var(--vd-ink);
  color: #e7e6dd;
  border-radius: var(--vd-r-lg);
  padding: 16px 18px;
  overflow-x: auto;
  white-space: pre;
  border: 1px solid var(--vd-ink);
  position: relative;
}
.vd-pre.vd-pre-light {
  background: var(--vd-surface);
  color: var(--vd-ink);
  border: 1px solid var(--vd-line);
}
/* The Copy button is positioned relative to a `.vd-pre-host` wrapper
   (not the <pre> itself), so it stays put while the code scrolls
   horizontally inside the pre. */
.vd-pre-host { position: relative; }
.vd-pre-host .vd-pre-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(20, 23, 15, .8);
  color: #c9c8be;
  font: 500 11px/1 var(--vd-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: var(--vd-r-sm);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.vd-pre-host .vd-pre-copy:hover { background: rgba(20, 23, 15, .95); color: #fff; }
.vd-pre-host:has(.vd-pre.vd-pre-light) .vd-pre-copy { border-color: var(--vd-line); background: var(--vd-surface); color: var(--vd-muted); }
.vd-pre-host:has(.vd-pre.vd-pre-light) .vd-pre-copy:hover { color: var(--vd-ink); }

/* Token coloring inside .vd-pre */
.vd-pre .tok-cmd { color: #e7e6dd; }
.vd-pre .tok-flag { color: #b8d6c2; }
.vd-pre .tok-arg { color: #f3eccb; }
.vd-pre .tok-str { color: #d6c89e; }
.vd-pre .tok-comment { color: #7e8073; font-style: italic; }
.vd-pre .tok-key { color: #b8d6c2; }
.vd-pre .tok-num { color: #f0c989; }

/* ─── Card ──────────────────────────────────── */
.vd-card {
  background: var(--vd-surface);
  border: 1px solid var(--vd-line);
  border-radius: var(--vd-r-lg);
}
.vd-card-flush {
  background: var(--vd-surface);
  border-top: 1px solid var(--vd-line);
  border-bottom: 1px solid var(--vd-line);
}

/* ─── Hairline rule ─────────────────────────── */
.vd-rule { height: 1px; background: var(--vd-line); border: 0; }

/* ─── Eyebrow / micro caps ──────────────────── */
.vd-eyebrow {
  font: 500 11px/1 var(--vd-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vd-muted);
}

/* ─── Section / header layout ───────────────── */
.vd-shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--vd-bg);
}
.vd-topbar {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--vd-line);
  /* Solid parchment so the primary CTA stays readable even when scrolled
     over the dark sign-up section. */
  background: var(--vd-bg);
  position: sticky;
  top: 0;
  z-index: 5;
}
.vd-topnav {
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 14px;
}
.vd-topnav a {
  color: var(--vd-muted);
  transition: color .12s;
}
.vd-topnav a:hover, .vd-topnav a.active { color: var(--vd-ink); }

/* ─── Tables ─────────────────────────────────── */
.vd-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}
.vd-table th, .vd-table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--vd-line);
}
.vd-table thead th {
  font: 500 11px/1 var(--vd-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vd-muted);
  background: var(--vd-surface-alt);
  border-bottom: 1px solid var(--vd-line-strong);
  padding-top: 9px;
  padding-bottom: 9px;
}
.vd-table tbody tr:hover td { background: color-mix(in oklch, var(--vd-accent-soft) 60%, var(--vd-surface)); }
.vd-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--vd-mono); }

/* ─── Misc utilities ─────────────────────────── */
.vd-muted { color: var(--vd-muted); }
.vd-subtle { color: var(--vd-subtle); }
.vd-mono { font-family: var(--vd-mono); }
.vd-tabular { font-variant-numeric: tabular-nums; }
.vd-stack { display: flex; flex-direction: column; }
.vd-row { display: flex; align-items: center; }
.vd-grow { flex: 1 1 auto; }

/* ─── Animated dot ───────────────────────────── */
@keyframes vd-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.85); }
}
.vd-pulse {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--vd-ok);
  animation: vd-pulse 1.8s ease-in-out infinite;
  display: inline-block;
}
.vd-pulse-accent { background: var(--vd-accent); }

/* ─── Caret blink for terminal ───────────────── */
@keyframes vd-caret {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.vd-caret {
  display: inline-block;
  width: 0.55ch;
  height: 1.1em;
  background: currentColor;
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: vd-caret 1s steps(1) infinite;
}

/* ─── Layout primitives ────────────────────────────────────────────────
   Grid scaffolds named so media queries can flex them at small widths.
   ──────────────────────────────────────────────────────────────────── */

/* Note: minmax(0, 1fr) instead of plain 1fr — without the explicit min: 0,
   grid items default to min-content, so a long <pre> or wide table forces
   the column wider than the viewport. */
.vd-grid-hero       { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);                 gap: 56px; align-items: center; }
.vd-grid-install    { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);               gap: 56px; align-items: start; }
.vd-grid-examples   { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);                 gap: 1px; background: var(--vd-line); border: 1px solid var(--vd-line); border-radius: var(--vd-r-lg); overflow: hidden; }
.vd-grid-pricing    { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));         gap: 16px; max-width: 820px; margin: 0 auto; }
.vd-grid-footer     { display: grid; grid-template-columns: 1.4fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.vd-grid-dashboard  { display: grid; grid-template-columns: 200px minmax(0, 1fr);                          gap: 48px; }
.vd-grid-stats      { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));                     gap: 12px; }
.vd-grid-usage-row  { display: grid; grid-template-columns: minmax(0, 1fr) 360px;                          gap: 16px; }
.vd-grid-billing    { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));                     gap: 24px; padding-top: 16px; }

.vd-section { padding: 72px 28px; }
.vd-section-tight { padding: 48px 28px; }
.vd-page { max-width: 1200px; margin: 0 auto; }

.vd-form-row { display: flex; gap: 8px; }

/* ─── Responsive: phone (≤740px) ──────────────────────────────────────
   Strategy: collapse multi-column grids to one column, shrink section
   padding, hide secondary topbar nav, scale down the hero typography.
   Tables get a horizontally scrollable wrapper (.vd-card with overflow
   on the table itself).
   ──────────────────────────────────────────────────────────────────── */

@media (max-width: 740px) {
  .vd-topbar { padding: 0 16px; height: 52px; }
  .vd-topnav { display: none; }
  .vd-topbar > .vd-row:first-child { gap: 0; }

  /* Allow flex rows to wrap on mobile rather than overflow */
  .vd-row { flex-wrap: wrap; }
  /* Topbar's outer flex shouldn't wrap (would push the CTA below brand) */
  .vd-topbar { flex-wrap: nowrap; }
  .vd-topbar > .vd-row { flex-wrap: nowrap; }

  .vd-section       { padding: 32px 20px; }
  .vd-section-tight { padding: 28px 20px; }

  /* minmax(0, 1fr) — without the explicit min: 0, a wide child (like a
     <pre> with white-space: pre) makes the column expand past the
     viewport. We hide the page-level scroll via overflow-x: clip, but
     that just hides the symptom; this fixes the actual sizing. */
  .vd-grid-hero,
  .vd-grid-install,
  .vd-grid-examples,
  .vd-grid-pricing,
  .vd-grid-footer,
  .vd-grid-dashboard,
  .vd-grid-usage-row,
  .vd-grid-billing {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .vd-grid-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .vd-grid-billing { padding-top: 14px; }

  /* Hero typography */
  .vd-hero-h1 { font-size: 32px !important; line-height: 1.05 !important; }
  .vd-hero-sub { font-size: 14.5px !important; }

  /* Section H2s */
  .vd-section h2 { font-size: 22px !important; }

  /* Form rows stack — sign-up form input + button */
  .vd-form-row { flex-direction: column; }

  /* Tables: parent card clips, table scrolls horizontally inside */
  .vd-card { max-width: 100%; overflow-x: auto; }
  .vd-table { min-width: max-content; }

  /* Code blocks: shrink to parent and scroll horizontally inside.
     `width: 100%` (not just max-width) forces the box to the parent's
     width even when content has `white-space: pre`. */
  .vd-pre { width: 100%; max-width: 100%; overflow-x: auto; font-size: 12px !important; padding: 12px 14px !important; }
  .vd-pre code { display: block; min-width: 0; }

  /* Pricing card: tighten internal padding */
  .vd-grid-pricing > .vd-card { padding: 18px !important; }

  /* Stat cards: shrink internals */
  .vd-grid-stats > .vd-card { padding: 14px !important; min-height: 0 !important; }
  .vd-grid-stats .vd-stat-value { font-size: 20px !important; }

  /* Dashboard sidebar — collapse to a horizontal tab strip */
  .vd-grid-dashboard > aside { position: static !important; }
  .vd-grid-dashboard > aside > ul { flex-direction: row !important; gap: 4px !important; overflow-x: auto; }
  /* Hide the secondary "Resources" links + their separator on mobile.
     `!important` because some elements set display:flex inline. */
  .vd-grid-dashboard > aside .vd-rule,
  .vd-grid-dashboard > aside .vd-resources { display: none !important; }

  /* Hide topbar email — gets cramped against the buttons on mobile.
     Account email already shows in the dashboard page header. */
  .vd-topbar-email { display: none; }

  /* Footer: brand block stays visible, link columns wrap into 2 columns */
  .vd-grid-footer { grid-template-columns: 1fr 1fr; }
  .vd-grid-footer > div:first-child { grid-column: 1 / -1; }

  /* Long-form prose: trim the side padding */
  .vd-prose { padding: 40px 20px 60px; }
  .vd-prose h1 { font-size: 26px; }

  /* Sign-up section: smaller hero h2 */
  .vd-signup-h2 { font-size: 26px !important; }

  /* ── Agent terminal demo: tighten chrome + body for narrow viewports ── */
  /* Hide the cosmetic path label — pure decoration; the connection
     indicator + replay button carry more value. */
  .vd-demo-path { display: none; }
  .vd-demo-status-text { font-size: 10px; }
  .vd-demo-chrome { padding: 0 12px !important; gap: 10px !important; }
  .vd-demo-body { padding: 16px 16px 20px !important; font-size: 12px !important; min-height: 0 !important; }
  .vd-demo-toolcall { font-size: 11px; }
  .vd-demo-args { font-size: 10.5px !important; }
}