/* ============================================================
   aweb design system — light + dark. The source of truth for every
   site page; home.css adds only the home page's own layout.
   Two voices: people read Schibsted Grotesk (headings and body);
   what people type, copy or read as an identifier, and what agents
   produce, is set in Berkeley Mono. Ink blue carries text and
   structure; clay marks actions only (primary buttons, focus, link
   underlines). Status colours mark real status only.
   ============================================================ */

@font-face {
  font-family: "Schibsted Grotesk";
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/SchibstedGrotesk-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Berkeley Mono";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/BerkeleyMono-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Berkeley Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/BerkeleyMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Berkeley Mono";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/BerkeleyMono-SemiBold.woff2") format("woff2");
}

:root {
  --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Berkeley Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* heading scale: one heading voice, sans, sentence case */
  --h1: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --h2: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  --h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);

  /* text sizes, for body copy and in-article headings */
  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --step-0:  1.0625rem;
  --step-1:  clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --step-2:  clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);

  /* spacing (8px system) */
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem;  --s6: 4rem;  --s7: 6rem;  --s8: 8rem;
  /* vertical rhythm of page sections, shared by every page */
  --section-y: clamp(3.5rem, 2rem + 5vw, 7rem);

  --radius: 12px;
  --radius-sm: 10px;
  --maxw: 1120px;

  /* ---- light theme (default) ---- */
  --bg: #f4f2ec;
  --bg-tint: #ebe8e0;        /* alternating section band */
  --ink: #15203a;
  --muted: #4f586b;
  --faint: #5f6677;
  --line: rgba(21,32,58,0.12);
  --line-strong: rgba(21,32,58,0.22);
  --surface: #fbfaf7;
  --surface-2: #e9e6dd;
  --accent: #c9461f;
  --accent-hover: #a93a19;
  --accent-ink: #ffffff;
  /* accent used as text (link hover, copied state) */
  --accent-text: #a93a19;
  --ink-strong: #0a1328;

  --ok: #166534;   --ok-soft: rgba(22,101,52,0.12);
  --wait: #92400e; --wait-soft: rgba(146,64,14,0.12);
  --run: #1d4ed8;  --run-soft: rgba(29,78,216,0.11);
  --stop: #b91c1c; --stop-soft: rgba(185,28,28,0.11);

  --shadow-sm: 0 1px 2px rgba(21,32,58,0.05);
  --shadow-lg: 0 1px 2px rgba(21,32,58,0.05), 0 14px 36px -20px rgba(21,32,58,0.30);
}

/* dark tokens, shared by manual toggle + OS preference */
:root[data-theme="dark"] {
  --bg: #0d1322;
  --bg-tint: #111a2d;
  --ink: #e9edf5;
  --muted: #b4bccc;
  --faint: #8c95a8;
  --line: rgba(233,237,245,0.12);
  --line-strong: rgba(233,237,245,0.24);
  --surface: #151d31;
  --surface-2: #1b2540;
  --accent: #ff6a2c;
  --accent-hover: #ff8250;
  --accent-ink: #1a120c;
  --accent-text: #ff9468;
  --ink-strong: #ffffff;

  --ok: #5fcf86;   --ok-soft: rgba(95,207,134,0.16);
  --wait: #e0a544; --wait-soft: rgba(224,165,68,0.16);
  --run: #7aa0ff;  --run-soft: rgba(122,160,255,0.16);
  --stop: #f06d6d; --stop-soft: rgba(240,109,109,0.16);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-lg: 0 1px 2px rgba(0,0,0,0.3), 0 18px 44px -22px rgba(0,0,0,0.65);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1322;
    --bg-tint: #111a2d;
    --ink: #e9edf5;
    --muted: #b4bccc;
    --faint: #8c95a8;
    --line: rgba(233,237,245,0.12);
    --line-strong: rgba(233,237,245,0.24);
    --surface: #151d31;
    --surface-2: #1b2540;
    --accent: #ff6a2c;
    --accent-hover: #ff8250;
    --accent-ink: #1a120c;
    --accent-text: #ff9468;
    --ink-strong: #ffffff;
    --ok: #5fcf86;   --ok-soft: rgba(95,207,134,0.16);
    --wait: #e0a544; --wait-soft: rgba(224,165,68,0.16);
    --run: #7aa0ff;  --run-soft: rgba(122,160,255,0.16);
    --stop: #f06d6d; --stop-soft: rgba(240,109,109,0.16);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-lg: 0 1px 2px rgba(0,0,0,0.3), 0 18px 44px -22px rgba(0,0,0,0.65);
  }
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* One heading voice: sans, sentence case, no eyebrows. */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-sans); color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--h1); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
h2 { font-size: var(--h2); font-weight: 600; line-height: 1.15; letter-spacing: -0.012em; }
h3 { font-size: var(--h3); font-weight: 680; line-height: 1.2; letter-spacing: -0.015em; }
h4 { font-size: var(--step-0); font-weight: 680; line-height: 1.3; }
p { margin: 0; }
a { color: inherit; }
/* links in page content: ink text, clay underline */
:where(main) a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
:where(main) a:hover { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; display: block; }
/* browsers set list numbers in tabular figures, which read as monospace in this face */
li::marker { font-variant-numeric: normal; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--s4); padding-right: var(--s4); }
.section { padding: var(--section-y) 0; border-top: 1px solid var(--line); }
.section--tint { background: var(--bg-tint); }
.section-head { max-width: 52ch; margin-bottom: var(--s5); }
.section-head p { color: var(--muted); font-size: var(--step-1); margin-top: var(--s2); }
.lede { color: var(--muted); }

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--s4); padding-top: 0.85rem; padding-bottom: 0.85rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 680; font-size: var(--step-1); letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
.brand .dot { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--accent); flex: none; }
.nav-links { display: flex; gap: var(--s3); margin-left: var(--s2); }
.nav-links a { color: var(--muted); text-decoration: none; font-size: var(--step--1); }
.nav-links a:hover { color: var(--ink); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

.theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; }
.theme-toggle:hover { color: var(--ink); background: var(--surface-2); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* ---- buttons: clay primary, quiet outline secondary ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font: 600 var(--step--1)/1 var(--font-sans); padding: 0.72rem 1.1rem; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn--lg { min-height: 3rem; padding: 0 1.4rem; font-size: var(--step-0); font-weight: 650; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

/* Split button: a primary action plus a caret that opens an opaque menu. Used for
   the standard llms.txt control in the header — present on every aweb naapp page. */
.split-btn { position: relative; display: inline-flex; align-items: stretch; }
.split-btn__main, .split-btn__caret {
  font: 600 var(--step--1)/1 var(--font-sans); background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong); cursor: pointer; display: inline-flex;
  align-items: center; transition: background .15s, color .15s;
}
.split-btn__main {
  gap: 0.45rem; padding: 0.72rem 0.85rem; min-width: 7.25rem; justify-content: flex-start;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right-width: 0;
}
.split-btn__caret {
  padding: 0 0.5rem; color: var(--muted); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.split-btn__main:hover, .split-btn__caret:hover { background: var(--surface-2); }
.split-btn__main svg, .split-btn__caret svg { width: 15px; height: 15px; flex: none; }
.split-btn__caret svg { transition: transform .15s; }
.split-btn[data-open="true"] .split-btn__caret { background: var(--surface-2); color: var(--ink); }
.split-btn[data-open="true"] .split-btn__caret svg { transform: rotate(180deg); }
.split-btn__main .icon-check { display: none; }
.split-btn__label { display: inline; }
.split-btn__main.copied { color: var(--accent-text); }
.split-btn__main.copied .icon-clip { display: none; }
.split-btn__main.copied .icon-check { display: inline-flex; }
.split-btn__menu {
  position: absolute; top: calc(100% + 5px); right: 0; z-index: 50; min-width: 15rem;
  padding: 0.3rem; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); display: none;
}
.split-btn[data-open="true"] .split-btn__menu { display: block; }
.split-btn__item {
  display: block; width: 100%; text-align: left; text-decoration: none; background: transparent;
  border: 0; cursor: pointer; padding: 0.55rem 0.7rem; border-radius: 7px;
  font: var(--step--1)/1.35 var(--font-sans); color: var(--ink);
}
.split-btn__item:hover { background: var(--surface-2); }
.split-btn__item + .split-btn__item { margin-top: 2px; }
.split-btn__item .lead { display: block; font-weight: 600; }
.split-btn__item .sub { display: block; color: var(--muted); }

/* ---- page hero (product pages): copy left, commands right ---- */
.hero { padding: var(--section-y) 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s6); align-items: center; }
/* the heading shares its row with a command panel, so it stops below the full h1 size */
.hero h1 { max-width: 15ch; font-size: min(var(--h1), 4rem); }
.hero .pill { margin-top: var(--s3); }
.hero .pill + .hero-foot { margin-top: var(--s2); }
.hero .lede { font-size: var(--step-1); max-width: 46ch; margin: var(--s3) 0 var(--s4); }
.hero-foot { margin-top: var(--s4); font-size: var(--step--1); color: var(--muted); }

/* status pill: real status only */
.pill { display: inline-block; font: 600 var(--step--1)/1 var(--font-sans); padding: 0.4rem 0.65rem; border-radius: 999px; white-space: nowrap; }
.pill.ok   { color: var(--ok);   background: var(--ok-soft); }
.pill.wait { color: var(--wait); background: var(--wait-soft); }
.pill.run  { color: var(--run);  background: var(--run-soft); }
.pill.stop { color: var(--stop); background: var(--stop-soft); }

/* ---- split helper (text + asset) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; }
.split > * { min-width: 0; }
.split h2 { margin-bottom: var(--s3); }

/* ---- closing call to action ---- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 22ch; margin: 0 auto var(--s4); }
.cta-band .lede { max-width: 48ch; margin: 0 auto var(--s4); }
.cta-band .cta-row { justify-content: center; }
.cta-band .hero-foot { text-align: center; }

/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--line); padding: var(--s6) 0 var(--s5); background: var(--bg-tint); }
.footer-cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--s4); }
.footer-brand p { color: var(--muted); font-size: var(--step--1); margin-top: var(--s2); max-width: 28ch; }
.footer-col h2 { font: 650 0.95rem/1.3 var(--font-sans); letter-spacing: 0; color: var(--ink); margin-bottom: var(--s2); }
.footer-col a { display: block; color: var(--muted); text-decoration: none; font-size: var(--step--1); padding: 0.28rem 0; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); color: var(--faint); font-size: var(--step--1); }

/* ---- responsive ---- */
@media (max-width: 880px) {
  .hero-grid, .split { grid-template-columns: 1fr; gap: var(--s4); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 560px) {
  .wrap { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 540px) {
  .footer-cols { grid-template-columns: 1fr; }
  /* avoid header overflow: tighten spacing; the llms.txt control folds away */
  .header-right .split-btn { display: none; }
  .header-right { min-width: 0; gap: var(--s1); }
  .header-right .btn.secondary { min-width: 0; padding-left: 0.75rem; padding-right: 0.75rem; }
  /* drop the caret on small screens; the main copy action keeps working */
  .split-btn__caret { display: none; }
  .split-btn__main { border-right-width: 1px; border-radius: var(--radius-sm); min-width: 0; }
  .site-header .wrap { gap: var(--s2); }
}

/* ============================================================
   Content pages — prose, docs, blog, simple headers
   ============================================================ */

/* generic page header (list pages, 404, legal, pricing) */
.page { padding: var(--section-y) 0; }
.page-header { max-width: 60ch; margin-bottom: var(--s5); }
.page-header p { color: var(--muted); font-size: var(--step-1); margin-top: var(--s3); }
.page-title { margin-bottom: var(--s5); }

/* prose — rendered markdown */
.prose { max-width: 72ch; color: var(--ink); }
.prose > * + * { margin-top: var(--s3); }
.prose h2 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); font-weight: 600; letter-spacing: -0.012em; line-height: 1.15; margin-top: var(--s5); }
.prose h3 { font-size: var(--step-1); line-height: 1.25; margin-top: var(--s4); }
.prose h4 { font-size: var(--step-0); margin-top: var(--s3); }
.prose p, .prose li { color: var(--ink); line-height: 1.65; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: 0.4rem; }
.prose strong { font-weight: 650; }
/* long ids and paths in running text wrap anywhere rather than widening the page */
.prose :not(pre) > code { overflow-wrap: anywhere; }
.prose code { font: 500 0.88em/1.5 var(--font-mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 0.1em 0.35em; }
.prose pre { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; overflow-x: auto; color: var(--ink); }
.prose pre code { background: none; border: 0; padding: 0; font-size: var(--step--1); line-height: 1.65; }
.prose blockquote { margin-left: 0; margin-right: 0; border-left: 3px solid var(--line-strong); padding-left: var(--s3); color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }
.prose img { border-radius: var(--radius-sm); border: 1px solid var(--line); }
.prose table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--step--1); }
.prose th, .prose td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 650; color: var(--muted); }
.prose sup { line-height: 0; }
.prose .footnotes { font-size: var(--step--1); }
.prose .footnotes p, .prose .footnotes li { color: var(--muted); }

/* syntax highlighting (Hugo/Chroma classes): one ink, quiet comments */
.chroma .c, .chroma .c1, .chroma .cm, .chroma .cs, .chroma .ch, .chroma .cp, .chroma .cpf { color: var(--faint); font-style: italic; }
.chroma .k, .chroma .kd, .chroma .kn, .chroma .kc, .chroma .kr, .chroma .kt, .chroma .nt { font-weight: 600; }
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sd, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx, .chroma .dl { color: var(--muted); }
.chroma .gp { color: var(--faint); user-select: none; }
.chroma .err { color: inherit; background: none; }

/* docs shell: quiet navigation, readable article, optional local TOC */
.docs-main { min-height: 70vh; background: linear-gradient(90deg, color-mix(in srgb, var(--bg-tint) 62%, var(--bg)) 0, var(--bg) 28rem); }
.docs-layout { display: grid; align-items: start; gap: var(--s5); padding-top: var(--s5); padding-bottom: var(--s8); }
.docs-layout--article { grid-template-columns: 210px minmax(0, 1fr) 170px; }
.docs-layout--hub { grid-template-columns: 210px minmax(0, 1fr); }
.docs-sidebar { position: sticky; top: 78px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 0 var(--s3) var(--s3) 0; border-right: 1px solid var(--line); scrollbar-width: thin; }
.docs-nav { display: grid; gap: var(--s3); }
.docs-nav-overview { display: grid; gap: 0.15rem; padding: 0.6rem 0.65rem; border-radius: var(--radius-sm); background: transparent; color: var(--muted); text-decoration: none; }
.docs-nav-overview span { font-weight: 650; }
.docs-nav-overview small { color: var(--faint); font-size: 0.78rem; }
.docs-nav-group { display: grid; gap: 0.12rem; }
.docs-nav-group h2 { margin: 0 0 0.35rem; padding: 0 0.65rem; color: var(--ink); font: 650 0.875rem/1.3 var(--font-sans); letter-spacing: 0; }
.docs-nav-group a { display: grid; gap: 0.1rem; padding: 0.43rem 0.65rem; border-radius: 7px; color: var(--muted); text-decoration: none; font-size: 0.875rem; line-height: 1.3; }
.docs-nav-group a small { color: var(--faint); font-size: 0.75rem; }
.docs-nav a:hover { color: var(--ink); background: var(--surface-2); }
.docs-nav a.active { color: var(--ink); background: var(--surface-2); font-weight: 650; }
.docs-sidebar-foot { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); padding: var(--s3) 0.65rem 0; border-top: 1px solid var(--line); }
.docs-sidebar-foot a { color: var(--muted); text-decoration: none; font-size: 0.8rem; }
.docs-sidebar-foot a:hover { color: var(--accent-text); }
.docs-mobile-nav { display: none; }

.docs-content { min-width: 0; }
.docs-audience { display: inline-flex; width: fit-content; align-items: center; min-height: 1.6rem; padding: 0.2rem 0.6rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); background: var(--surface-2); font: 600 0.8rem/1 var(--font-sans); }
.docs-page-header { margin-bottom: var(--s5); padding-bottom: var(--s4); border-bottom: 1px solid var(--line-strong); }
.docs-page-title { max-width: 22ch; font-size: var(--h2); }
.docs-description { max-width: 58ch; margin-top: var(--s3); color: var(--muted); font-size: var(--step-1); line-height: 1.5; }
.docs-page-header .docs-audience { margin-top: var(--s3); }

.docs-hub-title { margin: 0 0 var(--s4); font-size: var(--h2); }
.docs-hub-intro { max-width: 66ch; margin: 0 0 var(--s5); color: var(--muted); font-size: var(--step-1); line-height: 1.55; }
.docs-audience-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
:where(main) a.docs-audience-door { display: grid; align-content: start; gap: var(--s2); padding: var(--s4); border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); background: var(--surface); text-decoration: none; }
:where(main) a.docs-audience-door:hover { border-color: var(--ink); color: var(--ink); }
.docs-audience-door strong { max-width: 20ch; font-size: var(--h3); font-weight: 680; letter-spacing: -0.015em; line-height: 1.2; }
.docs-audience-door p { max-width: 42ch; color: var(--muted); font-size: var(--step--1); line-height: 1.55; }
.docs-hub-sections { margin-top: var(--s6); }
.docs-hub-section + .docs-hub-section { margin-top: var(--s5); }
.docs-hub-section > h2 { margin-bottom: var(--s3); font-size: var(--h3); font-weight: 680; letter-spacing: -0.015em; line-height: 1.2; }
.docs-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
:where(main) a.docs-hub-card { display: grid; align-content: start; gap: 0.55rem; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); text-decoration: none; }
:where(main) a.docs-hub-card:hover { border-color: var(--ink); color: var(--ink); }
.docs-hub-card strong { line-height: 1.3; font-weight: 650; }
.docs-hub-card p { color: var(--muted); font-size: var(--step--1); line-height: 1.5; }

.docs-prose { max-width: 70ch; }
.docs-prose > h1:first-child { display: none; }
.docs-prose > * + * { margin-top: 1.15rem; }
.docs-prose > h2 { scroll-margin-top: 88px; margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line); }
.docs-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.docs-prose h3 { scroll-margin-top: 88px; margin-top: var(--s5); }
.docs-prose h4 { scroll-margin-top: 88px; }
.docs-prose p, .docs-prose li { line-height: 1.7; }
.docs-prose pre { margin: var(--s3) 0; padding: var(--s3); }
.docs-prose pre code { color: inherit; font-size: 0.875rem; line-height: 1.65; }
.docs-prose :not(pre) > code { white-space: break-spaces; }
.docs-prose blockquote { margin: var(--s4) 0; padding: var(--s3); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface); color: var(--ink); }
.docs-prose blockquote > :first-child { margin-top: 0; }
.docs-prose blockquote > :last-child { margin-bottom: 0; }
.docs-prose table { display: block; width: max-content; max-width: 100%; margin: var(--s4) 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); border-collapse: separate; border-spacing: 0; background: var(--surface); }
.docs-prose th { background: var(--surface-2); color: var(--ink); font: 650 0.875rem/1.35 var(--font-sans); }
.docs-prose th, .docs-prose td { min-width: 8rem; padding: 0.7rem 0.8rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: top; }
.docs-prose th:last-child, .docs-prose td:last-child { border-right: 0; }
.docs-prose tr:last-child td { border-bottom: 0; }
.docs-prose img { margin: var(--s4) 0; box-shadow: var(--shadow-sm); }
.docs-article-footer { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s7); padding-top: var(--s3); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--step--1); }
.docs-article-footer a { font-weight: 600; }

.docs-toc { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; padding-left: var(--s3); border-left: 1px solid var(--line); }
.docs-toc > p { margin: 0 0 var(--s2); color: var(--ink); font: 650 0.875rem/1.3 var(--font-sans); }
.docs-toc nav ul { margin: 0; padding: 0; list-style: none; }
.docs-toc nav ul ul { margin: 0.25rem 0 0.4rem 0.7rem; }
.docs-toc nav li + li { margin-top: 0.15rem; }
/* each entry is at least 24px tall (WCAG 2.5.8 target size) */
.docs-toc nav a { display: block; padding: 0.2rem 0; min-height: 24px; color: var(--muted); text-decoration: none; font-size: 0.8rem; line-height: 1.35; }
.docs-toc nav a:hover { color: var(--accent-text); }

/* blog */
.blog-list-header, .blog-post-header { max-width: 64ch; }
.blog-list-sub { color: var(--muted); font-size: var(--step-1); margin-top: var(--s3); }
.blog-list-posts { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: var(--s2); }
:where(main) a.blog-list-post-link { display: block; text-decoration: none; color: inherit; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
:where(main) a.blog-list-post-link:hover { border-color: var(--ink); color: inherit; }
.blog-list-post-meta, .blog-post-meta { font-size: var(--step--1); color: var(--muted); }
.blog-list-post-title { font-size: var(--h3); }
.blog-list-post-summary, .blog-list-post-meta { margin-top: 0.5rem; }
.blog-list-post-summary { color: var(--muted); font-size: var(--step--1); }
.blog-post-meta { display: grid; gap: 0.2rem; margin-top: var(--s4); }
.blog-post-title { max-width: 18ch; }
.blog-post-lede { color: var(--muted); font-size: var(--step-1); margin-top: var(--s3); max-width: 52ch; }
.blog-post-body { margin-top: var(--s5); }
.blog-post-footer { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--step--1); }

/* Inline SVG keeps transparent diagrams in the page's light or dark ink. */
.article-diagram { margin: var(--s5) 0; }
.article-image { margin-left: 0; margin-right: 0; }
.article-diagram svg { display: block; width: 100%; height: auto; color: var(--ink); }
.article-image img { display: block; width: 100%; height: auto; }
.article-image figcaption,
.article-diagram figcaption { margin-top: var(--s2); text-align: center; color: var(--muted); font-size: var(--step--1); }

/* Source material introducing an essay, separated from its opening argument. */
.article-preface { padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.article-preface > * + * { margin-top: var(--s2); }
.article-preface .article-image { margin-bottom: var(--s3); }
.article-preface .article-image img { border: 0; border-radius: 0; }
.article-preface blockquote { margin-left: 0; margin-right: 0; border-left: 0; padding-left: 0; color: var(--ink); }
.article-preface > p:last-child { color: var(--muted); font-size: var(--step--1); }

/* newsletter — the author's Substack, which carries the blog's posts */
.newsletter-box { max-width: 72ch; margin-top: var(--s6); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); scroll-margin-top: 88px; }
.newsletter-box h2 { font-size: var(--h3); }
.newsletter-box p { margin-top: var(--s1); color: var(--muted); font-size: var(--step--1); }
.newsletter-form { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); }
.newsletter-form input[type="email"] { flex: 1 1 15rem; min-width: 0; font: inherit; font-size: var(--step--1); padding: 0.66rem 0.8rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.newsletter-form input[type="email"]::placeholder { color: var(--faint); }
.newsletter-box .newsletter-note { margin-top: var(--s2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.docs-video { margin: var(--s3) 0 var(--s4); }
.docs-video video { display: block; width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #000; }
.docs-video figcaption { margin-top: var(--s2); color: var(--muted); font-size: var(--step--1); line-height: 1.7; }

@media (max-width: 1120px) {
  .docs-layout--article { grid-template-columns: 210px minmax(0, 1fr); }
  .docs-toc { display: none; }
}

@media (max-width: 880px) {
  .docs-main { background: var(--bg); }
  .docs-layout,
  .docs-layout--article,
  .docs-layout--hub { grid-template-columns: 1fr; gap: var(--s4); padding-top: var(--s3); }
  .docs-sidebar { display: none; }
  .docs-mobile-nav { display: block; position: relative; z-index: 6; }
  .docs-mobile-nav summary { display: grid; grid-template-columns: 1fr auto; gap: 0.65rem; align-items: center; padding: 0.75rem 0.85rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; list-style: none; }
  .docs-mobile-nav summary::-webkit-details-marker { display: none; }
  .docs-mobile-nav summary > span { color: var(--ink); font-size: 0.875rem; font-weight: 600; }
  .docs-mobile-nav summary svg { width: 18px; height: 18px; transition: transform 0.18s ease; }
  .docs-mobile-nav[open] summary svg { transform: rotate(180deg); }
  .docs-mobile-nav-panel { margin-top: 0.45rem; padding: var(--s3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-lg); }
  .docs-mobile-nav-panel .docs-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .docs-mobile-nav-panel .docs-nav-overview { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .docs-layout { padding-bottom: var(--s6); }
  .docs-mobile-nav-panel .docs-nav { grid-template-columns: 1fr; }
  .docs-audience-doors,
  .docs-hub-grid { grid-template-columns: 1fr; }
  .docs-prose { max-width: 100%; }
  .docs-prose pre { margin-left: -1rem; margin-right: -1rem; border-left: 0; border-right: 0; border-radius: 0; }
  .docs-article-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .docs-mobile-nav summary svg { transition: none; }
}

/* ============================================================
   Reusable components (shared across product pages)
   ============================================================ */

/* generic card + grids */
.card { min-width: 0; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.card h3 { margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.card p { color: var(--muted); font-size: var(--step--1); }
.card p + p { margin-top: 0.5rem; }
.card p + .cmd, .card p + .cmd-list { margin-top: var(--s2); }
.card .num { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 0.3rem; border-radius: 999px; background: var(--surface-2); color: var(--ink); font: 650 0.875rem/1 var(--font-sans); flex: none; }
.card .card-lead { color: var(--ink); font-size: var(--step-1); font-weight: 650; }
.card code, .lede code, .prose-outro code, .section-head code, .cmd-label code, .hero-foot code { font: 500 0.88em/1.4 var(--font-mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 0.08em 0.34em; }
.card-grid { display: grid; gap: var(--s4); margin-top: var(--s2); }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.prose-outro { color: var(--muted); max-width: 64ch; margin-top: var(--s4); }

/* command block with copy button */
.cmd-list { display: grid; gap: 0.5rem; }
.cmd { display: flex; align-items: center; gap: 0.5rem; min-width: 0; max-width: 100%; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.5rem 0.5rem 0.5rem 0.85rem; }
.cmd--block { align-items: flex-start; }
.cmd pre { min-width: 0; margin: 0; font: 500 0.875rem/1.6 var(--font-mono); color: var(--ink); overflow-x: auto; flex: 1; white-space: pre; }
/* prose prompts (not commands) wrap instead of scrolling */
.cmd pre.cmd-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd-label { font: 500 var(--step--1)/1.5 var(--font-sans); color: var(--muted); margin: var(--s2) 0 0.4rem; }
.cmd-label:first-child { margin-top: 0; }
.copy-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.copy-btn:hover { color: var(--ink); background: var(--surface-2); }
.copy-btn.copied { color: var(--ok); }
.copy-btn svg { width: 15px; height: 15px; }

/* command panel (surface holding labelled command steps, e.g. hero right column) */
.cmd-panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); }
.cmd-panel .cmd { min-width: 0; background: var(--bg); }

@media (max-width: 880px) {
  .card-grid--3 { grid-template-columns: 1fr; }
}

/* ============================================================
   /a2a page
   ============================================================ */
.a2a-flow { display: grid; gap: 0; }
.a2a-flow-node { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); padding: var(--s3); text-align: center; display: grid; gap: 0.25rem; }
.a2a-flow-node--gateway { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.a2a-flow-name { font-weight: 680; font-size: var(--step-1); }
.a2a-flow-role { color: var(--muted); font-size: var(--step--1); font-weight: 600; }
.a2a-flow-note { color: var(--muted); font-size: var(--step--1); }
.a2a-flow-boundary { justify-self: center; margin-top: 0.4rem; }
.a2a-flow-rail { display: flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s2) 0; flex-wrap: wrap; }
.a2a-flow-step { font-size: var(--step--1); color: var(--ink); display: inline-flex; align-items: center; gap: 0.4rem; }
.a2a-flow-step b { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 0.78rem; }
.a2a-flow-step--back { color: var(--muted); }
.a2a-secure { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: var(--step--1); }
.a2a-secure svg { width: 16px; height: 16px; flex: none; }
.hero .a2a-secure + .cta-row { margin-top: var(--s4); }

/* ============================================================
   /pricing page
   ============================================================ */
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.price-card { display: flex; flex-direction: column; min-width: 0; padding: var(--s4); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.price-card--featured { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.price-tier { font-size: var(--h3); font-weight: 680; letter-spacing: -0.015em; line-height: 1.2; }
.price-for { margin-top: 0.3rem; color: var(--muted); font-size: var(--step--1); }
.price-fig { font: 720 var(--h2)/1.1 var(--font-sans); letter-spacing: -0.028em; margin-top: var(--s2); }
.price-per { font: 500 var(--step--1)/1 var(--font-sans); color: var(--muted); margin-left: 0.3rem; letter-spacing: 0; }
.price-rows { list-style: none; margin: var(--s3) 0 var(--s4); padding: var(--s3) 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.55rem; }
.price-rows li { color: var(--muted); font-size: var(--step--1); }
.price-rows b { color: var(--ink); font-weight: 650; }
.price-cta { margin-top: auto; }
.price-under { margin-top: var(--s4); max-width: 70ch; color: var(--muted); font-size: var(--step--1); line-height: 1.7; }
.price-prose { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
@media (max-width: 880px) {
  .price-grid { grid-template-columns: 1fr; }
}