:root {
    --bg: #F5F5F4;
    --bg-2: #EAEAE8;
    --bg-card: #FFFFFF;
    --fg: #0A0A0A;
    --fg-2: #44443F;
    --fg-3: #7A7A75;
    --line: rgba(10,10,10,0.09);
    --line-strong: rgba(10,10,10,0.20);
    --brand: #1B2BCC;
    --brand-ink: #FFFFFF;
    --agent: #F2EA38;
    --agent-ink: #0E0E0C;
    --danger: #C92E2E;
    --pending: #C97A1F;
    --ok: #2D6A4F;
    --radius: 14px;
    --radius-lg: 22px;
    --maxw: 1280px;
    --pad-x: clamp(20px, 4vw, 56px);
    --density: 1;
  }
  [data-theme="dark"] {
    --bg: #0B0C10;
    --bg-2: #14161B;
    --bg-card: #14161B;
    --fg: #EDECE6;
    --fg-2: #B6B4AB;
    --fg-3: #76746E;
    --line: rgba(237,236,230,0.10);
    --line-strong: rgba(237,236,230,0.22);
    --brand: #8FA0FF;
    --brand-ink: #0B0C10;
    --agent: #F2EA38;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .serif { font-family: 'Space Grotesk', sans-serif; font-weight: 500; letter-spacing: -0.03em; }
  .serif-i { font-family: 'Space Grotesk', sans-serif; font-weight: 500; letter-spacing: -0.03em; color: var(--brand); }
  .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: "zero", "ss02"; }
  ::selection { background: var(--agent); color: var(--agent-ink); }
  a { color: inherit; }
  button { font-family: inherit; }

  .container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

  /* generic */
  .row { display: flex; align-items: center; gap: 10px; }
  .pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background: transparent;
  }
  .pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--brand); }
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--fg);
    background: var(--fg);
    color: var(--bg);
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease;
    text-decoration: none;
  }
  .btn:hover { opacity: 0.88; transform: translateY(-1px); }
  .btn.ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
  .btn.ghost:hover { background: rgba(20,19,15,0.04); }
  .btn.agent { background: var(--agent); color: var(--agent-ink); border-color: var(--agent); }

  /* nav */
  .nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  .brandmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; color: inherit; }
  .brandmark .glyph { display:inline-flex; align-items:center; justify-content:center; width: 26px; height: 26px; border-radius: 7px; background: var(--fg); color: var(--bg); font-size: 13px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
  .nav-links { display: flex; gap: 28px; font-size: 14px; color: var(--fg-2); }
  .nav-links a { text-decoration: none; }
  .nav-links a:hover { color: var(--fg); }
  @media (max-width: 880px) { .nav-links { display: none; } }

  /* hero scaffolding */
  section { padding: calc(120px * var(--density)) 0; border-bottom: 1px solid var(--line); }
  section.tight { padding: calc(88px * var(--density)) 0; }
  .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
    color: var(--fg-3);
    font-weight: 500;
  }
  h1.display {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(46px, 7vw, 92px);
    line-height: 0.96;
    letter-spacing: -0.04em;
    margin: 0;
    text-wrap: balance;
  }
  h2.display {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0;
    text-wrap: balance;
  }
  .lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--fg-2); max-width: 56ch; line-height: 1.45; }

  /* layout helpers */
  .grid { display: grid; gap: 24px; }

  /* terminal / code window */
  .window {
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(20,19,15,0.04), 0 22px 60px -28px rgba(20,19,15,0.18);
  }
  .window .title-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-card) 70%, var(--bg-2));
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--fg-3);
  }
  .window .dots { display: inline-flex; gap: 6px; margin-right: 6px; }
  .window .dots span { width: 10px; height: 10px; border-radius: 999px; background: rgba(20,19,15,0.14); }
  .window .body { padding: 18px 20px; }

  /* terminal */
  .term { font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.6; color: var(--fg); }
  .term .prompt { color: var(--fg-3); }
  .term .ok { color: var(--ok); }
  .term .agent-tok { color: var(--brand); font-weight: 600; }
  .term .muted { color: var(--fg-3); }
  .term .warn { color: var(--pending); }
  [data-theme="dark"] .term .ok { color: #7BD3A0; }
  [data-theme="dark"] .term .agent-tok { color: #C5E8C7; }

  /* code */
  pre.code { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.65; color: var(--fg); white-space: pre; overflow-x: auto; }
  .tok-k { color: #7A5BBE; }
  .tok-s { color: #1C4F3C; }
  .tok-c { color: var(--fg-3); font-style: italic; }
  .tok-n { color: #B5341B; }
  .tok-p { color: var(--fg-2); }
  [data-theme="dark"] .tok-k { color: #C8A6FF; }
  [data-theme="dark"] .tok-s { color: #C5E8C7; }
  [data-theme="dark"] .tok-n { color: #F2A78F; }

  /* card */
  .card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
  }

  /* divider with caption */
  .section-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 64px; flex-wrap: wrap; }
  .section-head .meta { color: var(--fg-3); font-size: 13px; font-family: 'JetBrains Mono', monospace; }

  /* utility */
  .agent-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; background: var(--agent); color: var(--agent-ink); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
  .agent-chip::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--agent-ink); }

  .kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--fg-2);
    background: var(--bg-card);
  }

  /* subtle hero accent — a single offset rule, no grid */
  .hero-accent-rule {
    position: absolute; left: var(--pad-x); right: var(--pad-x); top: 64px;
    height: 1px; background: var(--line);
    pointer-events: none;
  }
  .hero-accent-stamp {
    position: absolute; right: var(--pad-x); top: 32px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--fg-3); letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
  }

  /* simple animation */
  @keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.6); opacity: 0.4; }
  }
  .live-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ok); display: inline-block; animation: pulseDot 1.8s ease-in-out infinite; }

  @keyframes caret { 0%,49%{opacity:1} 50%,100%{opacity:0} }
  .caret { display: inline-block; width: 8px; height: 1em; background: currentColor; vertical-align: -2px; margin-left: 2px; animation: caret 1s steps(1) infinite; }

  /* tables */
  table.plain { width: 100%; border-collapse: collapse; font-size: 14px; }
  table.plain th, table.plain td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  table.plain th { font-weight: 500; color: var(--fg-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }

  /* footer */
  footer { padding: 56px 0; }

  /* misc focus */
  :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

  /* media */
  @media (max-width: 900px) {
    .hide-md { display: none; }
  }

/* subpage extras */
.subpage-nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.subpage-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); text-decoration: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); }
.subpage-back:hover { color: var(--fg); }
.subpage-hero { padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 8vw, 120px); border-bottom: 1px solid var(--line); }
.subpage-grid { display: grid; gap: 80px; padding: 100px 0; }


/* ─────────────────────────────────────────────────────────────────────────
   Mobile / responsive
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  :root { --maxw: 100%; }
}

@media (max-width: 880px) {
  :root { --pad-x: 20px; }

  /* Nav: hide center links, keep CTA */
  .nav-links { display: none; }
  .nav-inner { gap: 8px; height: 56px; }

  /* Section paddings: smaller */
  section { padding: 72px 0 !important; }
  section.tight { padding: 56px 0 !important; }

  /* Headings */
  h1.display { font-size: clamp(40px, 11vw, 68px); }
  h2.display { font-size: clamp(28px, 8vw, 48px); }
  .section-head { margin-bottom: 40px; gap: 20px; }

  /* Force fixed-column grids to single column.
     Auto-fit grids (which contain 'repeat') stay responsive. */
  [style*="grid-template-columns"]:not([style*="repeat"]) {
    grid-template-columns: 1fr !important;
  }

  /* Hero corrections */
  .hero-accent-stamp { display: none; }

  /* Buttons in nav: compact */
  .nav .btn { padding: 8px 12px !important; font-size: 12px !important; }

  /* Cards: tighter padding */
  .card { padding: 22px; }

  /* Windows: shrink internals */
  .window .body { padding: 14px 16px; }
  .term { font-size: 12px; line-height: 1.55; }
  pre.code { font-size: 12px; }

  /* Tables: condense */
  table.plain { font-size: 13px; }
  table.plain th, table.plain td { padding: 10px 10px; }

  /* Control panel header: tab buttons row may overflow — let it wrap */
  .card [role], .card > div { min-width: 0; }

  /* FAQ items: smaller serif */
  #faq .serif { font-size: 20px !important; }

  /* Pricing cards full width */
  /* (already handled by auto-fit minmax) */

  /* Subpages */
  .subpage-hero { padding: 72px 0 56px; }
  .subpage-back { padding: 6px 10px; font-size: 12px; }
}

@media (max-width: 560px) {
  :root { --pad-x: 16px; }

  /* Big hero tighter */
  h1.display { font-size: 44px; line-height: 0.98; }
  h2.display { font-size: 30px; }

  /* Hide secondary nav CTA, keep primary */
  .nav-inner .btn.ghost { display: none; }

  /* Section paddings smaller still */
  section { padding: 56px 0 !important; }
  section.tight { padding: 44px 0 !important; }

  /* CTA form: column */
  section.tight form { flex-direction: column; }
  section.tight form input { width: 100%; }
  section.tight form button { width: 100%; justify-content: center; }

  /* Footer bottom row stacks gracefully */
  footer .container[style*="justify-content: space-between"] { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Pricing comparison table: shrink */
  table.plain { font-size: 12px; }
  table.plain th, table.plain td { padding: 8px 6px; }

  /* Hero pills wrapping */
  .pill { font-size: 11px; padding: 5px 10px; }

  /* Cards: tighter */
  .card { padding: 18px; border-radius: 16px; }

  /* Section heads more compact */
  .section-head { margin-bottom: 32px; }

  /* HowStep: stack number above text */
  /* already handled by [grid-template-columns]:not([repeat]) override */

  /* Buttons: full-width if alone in a row */
  .row > .btn { flex: 1; justify-content: center; }
}

@media (max-width: 380px) {
  h1.display { font-size: 38px; }
}