/* ============================================================
 * Specnaut landing — vanilla CSS implementing DESIGN.md tokens.
 * ============================================================ */

:root {
  /* Brand */
  --color-brand-primary: #5b6af0;
  --color-brand-accent: #f59e6c;

  /* Primary button — teal pair that meets WCAG 1.4.11 (≥3:1 boundary vs page bg)
     and 1.4.3 (≥4.5:1 label vs button bg). Light: #246A73/white = 5.30:1 vs page,
     5.67:1 vs label. The previous #f59e6c boundary on #f7f8fc was ~2.09:1. */
  --color-btn-primary-bg: #246a73;
  --color-btn-primary-fg: #ffffff;
  --color-btn-primary-border: #246a73;

  /* Code blocks — pinned to fixed dark values so they stay dark regardless
     of the OS color scheme. Not overridden in the dark-mode media query. */
  --codeblock-bg: #16182e;
  --codeblock-fg: #ffffff;

  /* Neutrals */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f7f8fc;
  --color-neutral-100: #eceef6;
  --color-neutral-300: #c8ccdf;
  --color-neutral-700: #4a4e6a;
  --color-neutral-900: #16182e;
  --footer-bg: #eceef6;

  /* Semantic */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #3b82f6;

  /* Spacing — 4-point scale */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Radii */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 8px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 10px 24px rgb(0 0 0 / 0.12);

  /* Motion */
  --motion-micro: 150ms;
  --motion-panel: 250ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Responsive — DESIGN.md non-negotiable mobile-first contract */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --container-max: 1200px;

  /* Type */
  --font-sans:
    "DM Sans",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --font-pixel: "Press Start 2P", "JetBrains Mono", ui-monospace, monospace;
}

/* Dark theme token values. Defined once here and reused by two selectors:
   the OS-preference media query (unless the user forced light via the footer
   toggle) and the explicit [data-theme="dark"] override. Keep the two blocks
   below in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-brand-primary: #818cf8;
    --color-brand-accent: #fdba74;
    --color-neutral-0: #0c0c10;
    --color-neutral-50: #13131a;
    --color-neutral-100: #1c1c27;
    --color-neutral-300: #3a3a52;
    --color-neutral-700: #9b9fc0;
    --color-neutral-900: #f0f1fa;
    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-danger: #f87171;
    --color-info: #60a5fa;
    --color-btn-primary-bg: #368f8b;
    --color-btn-primary-fg: #0c0c10;
    --color-btn-primary-border: #368f8b;
    /* Footer is the darkest band of all in dark mode (below neutral-0). */
    --footer-bg: #08080b;
  }
}

:root[data-theme="dark"] {
  --color-brand-primary: #818cf8;
  --color-brand-accent: #fdba74;
  --color-neutral-0: #0c0c10;
  --color-neutral-50: #13131a;
  --color-neutral-100: #1c1c27;
  --color-neutral-300: #3a3a52;
  --color-neutral-700: #9b9fc0;
  --color-neutral-900: #f0f1fa;
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  --color-info: #60a5fa;
  --color-btn-primary-bg: #368f8b;
  --color-btn-primary-fg: #0c0c10;
  --color-btn-primary-border: #368f8b;
  --footer-bg: #08080b;
}

/* ---------------------------------------------------------------
 * Reset (lightweight — only what the landing actually needs)
 * --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--color-neutral-50);
  color: var(--color-neutral-900);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
}

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

a {
  color: var(--color-brand-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-neutral-100);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

/* ---------------------------------------------------------------
 * Layout primitives
 * --------------------------------------------------------------- */

/* Full-bleed band + centered inner wrapper.
   Each <section> is a `.band` (100% wide, its own background colour, vertical
   padding) wrapping one `.wrap` (max-width container, horizontal padding).
   This lets section colours run edge-to-edge while content stays centred. */
.band {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.wrap {
  width: 100%;
  max-width: var(--container-max);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  box-sizing: border-box;
}

@media (min-width: 480px) {
  .wrap {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 768px) {
  .wrap {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }
}

/* Per-section colours (all on-palette) + vertical rhythm. Adjacent bands
   always differ so the eye registers each section as a distinct topic; the
   two indigo washes mark the "what it does" and "Cloud" beats. */
.band-header {
  background: var(--color-neutral-0);
}

.band-hero {
  position: relative;
  background: var(--color-neutral-0);
  padding-top: var(--space-8);
  padding-bottom: var(--space-24);
}

.band-harness {
  background: var(--color-neutral-50);
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

.band-steps {
  background: var(--color-neutral-0);
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.band-features {
  background: color-mix(in oklab, var(--color-brand-primary) 7%, var(--color-neutral-50));
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.band-roster {
  background: var(--color-neutral-100);
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.band-cloud {
  background: color-mix(in oklab, var(--color-brand-primary) 13%, var(--color-neutral-50));
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.band-trust {
  background: var(--color-neutral-0);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.band-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--color-neutral-300);
}

/* Docs page (/docs/) content band — rendered by build-docs.ts. */
.band-docs {
  background: var(--color-neutral-50);
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
}

.doc-col {
  width: 100%;
  max-width: 72ch;
  margin: 0 auto;
}

/* ---------------------------------------------------------------
 * Site header
 * --------------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-neutral-900);
  font-weight: 700;
  font-size: 18px;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-primary);
  position: relative;
  box-shadow: inset 4px 0 0 var(--color-brand-accent);
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 6px 6px auto auto;
  width: 6px;
  height: 6px;
  background: var(--color-neutral-0);
  border-radius: var(--radius-sm);
}

.site-nav {
  display: flex;
  gap: var(--space-4);
  font-weight: 600;
  font-size: 14px;
}

@media (min-width: 480px) {
  .site-nav {
    gap: var(--space-6);
    font-size: 15px;
  }
}

.site-nav a {
  color: var(--color-neutral-700);
}

.site-nav a:hover {
  color: var(--color-neutral-900);
  text-decoration: none;
}

/* ---------------------------------------------------------------
 * Hero
 * --------------------------------------------------------------- */

.hero {
  display: grid;
  /* minmax(0, 1fr) lets the column shrink below its min-content size. Without
     it, the unbreakable curl URL inside the codeblock forces the column wider
     than the mobile viewport and the whole hero overflows. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}

/* Grid items also need min-width: 0 so their own internal content
   (codeblock, long-line code, anything with overflow-x:auto) can be
   contained instead of pushing the column. */
.hero-copy,
.hero-cast {
  min-width: 0;
}

@media (min-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-16);
  }
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-4);
  text-transform: uppercase;
}

.hero-copy h1 {
  /* Mobile-first per DESIGN.md responsive rule: Display drops to 32px below --bp-md. */
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-6);
}

@media (min-width: 768px) {
  .hero-copy h1 {
    font-size: 48px;
  }
}

@media (min-width: 1024px) {
  .hero-copy h1 {
    font-size: 56px;
  }
}

.lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-neutral-700);
  margin: 0 0 var(--space-8);
  max-width: 56ch;
}

@media (min-width: 768px) {
  .lede {
    font-size: 18px;
  }
}

.lede strong {
  color: var(--color-neutral-900);
  font-weight: 600;
}

/* Rotating harness name in the lede. Width sized for the longest display
   name ("GitHub Copilot CLI", 18 chars) so the surrounding text never
   reflows on swap. Fade duration kept in lockstep with the JS swap timer. */
.harness-rotator {
  display: inline-block;
  min-width: 11ch;
  transition: opacity 350ms ease;
}

.harness-rotator.is-fading {
  opacity: 0;
}

/* Visually-hidden but available to screen readers. Used to expose the
   full static harness list while the visible slot rotates. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.cta-note {
  font-size: 13px;
  color: var(--color-neutral-700);
  margin: var(--space-3) 0 0;
}

.cta-note code {
  font-size: 12px;
}

/* ---------------------------------------------------------------
 * Buttons (DESIGN.md: primary / secondary / ghost)
 * --------------------------------------------------------------- */

.btn {
  /* DESIGN.md responsive: 44px touch target floor below --bp-md (WCAG 2.5.5),
     drops to 40px on tablet+ where pointer precision is higher. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition:
    box-shadow var(--motion-micro) var(--motion-ease),
    transform var(--motion-micro) var(--motion-ease),
    filter var(--motion-micro) var(--motion-ease);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .btn {
    min-height: 40px;
  }
}

.btn:hover {
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.btn:active {
  transform: scale(0.97);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.btn-primary {
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-fg);
  border-color: var(--color-btn-primary-border);
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-secondary {
  background: var(--color-neutral-100);
  color: var(--color-neutral-900);
  border-color: var(--color-neutral-300);
}

.btn-ghost {
  background: transparent;
  color: var(--color-brand-primary);
  border-color: transparent;
  box-shadow: none;
}

.btn-ghost:hover {
  text-decoration: underline;
  box-shadow: none;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Sized to match the 15px button label, with a touch of optical weight on
     top. The icon is an inline SVG using `currentColor`, so it inherits the
     button's foreground colour automatically (white on primary, brand on
     ghost). */
}

.btn-icon svg {
  width: 16px;
  height: 16px;
}

/* ---------------------------------------------------------------
 * Codeblock (install snippet)
 * --------------------------------------------------------------- */

.codeblock {
  background: var(--codeblock-bg);
  color: var(--codeblock-fg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  white-space: pre;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 480px) {
  .codeblock {
    font-size: 13.5px;
    padding: var(--space-4) var(--space-6);
  }
}

.codeblock code {
  background: transparent;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* ---------------------------------------------------------------
 * Hero cast (9 floating sprites)
 * --------------------------------------------------------------- */

/* Mobile-first: 2-col, height grows with content (9 figures = 5 rows of 2,
   last row half-empty). The square aspect-ratio used to force-collapse the
   3-col layout into a cramped grid below --bp-sm; lifting it lets each
   sprite + caption breathe. From --bp-sm up, restore the original 3×3
   square layout. */
.hero-cast {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: center;
  justify-items: center;
  padding: var(--space-2);
  max-width: 540px;
  margin: 0 auto;
}

@media (min-width: 480px) {
  .hero-cast {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    aspect-ratio: 1 / 1;
    gap: var(--space-4);
    padding: var(--space-4);
  }
}

/* Each sprite is wrapped in a <figure> so its role can be labeled via
   <figcaption> in pixel-art type. The figure becomes the grid item;
   the sprite + caption stack vertically inside it. */
.hero-cast figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.hero-cast figcaption {
  font-family: var(--font-pixel);
  font-size: 7px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-neutral-700);
  line-height: 1.3;
}

.sprite {
  /* DESIGN.md image rule: decorative sprites cap at 96px below --bp-sm. */
  width: 100%;
  max-width: 96px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  border-radius: var(--radius-none);
  background: transparent;
  /* steps() instead of ease-in-out so the bob lands on integer-pixel
     positions only. Pixelated rendering + sub-pixel transforms produced
     visible edge shimmer / white halos against the dark page background;
     discrete steps eliminate the sub-pixel positions entirely and the
     "hop" cadence matches the pixel-art aesthetic. */
  animation: sprite-bob 3s steps(4) infinite alternate;
  will-change: transform;
}

@media (min-width: 480px) {
  .sprite {
    max-width: 140px;
  }
}

/* Stagger the bob so the cast doesn't move in lockstep — each sprite
   starts at a different point in the same 3s cycle. */
.sprite-product-owner {
  animation-delay: 0s;
}
.sprite-developer {
  animation-delay: -0.4s;
}
.sprite-qa-tester {
  animation-delay: -0.8s;
}
.sprite-code-reviewer {
  animation-delay: -1.2s;
}
.sprite-security-auditor {
  animation-delay: -1.6s;
}
.sprite-devops-sre {
  animation-delay: -2.0s;
}
.sprite-specnaut-expert {
  animation-delay: -2.4s;
}
.sprite-architect {
  animation-delay: -2.8s;
}
.sprite-review-coordinator {
  animation-delay: -1.0s;
}

@keyframes sprite-bob {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sprite {
    animation: none;
  }

  .harness-rotator {
    transition: none;
  }
}

/* ---------------------------------------------------------------
 * Pillars section ("what lands in your repo")
 * --------------------------------------------------------------- */

.pillars {
  padding-top: var(--space-12);
  padding-bottom: var(--space-16);
}

.section-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-10);
  text-align: center;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 32px;
  }
}

.pillar-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .pillar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }
}

.card {
  min-width: 0;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--motion-panel) var(--motion-ease),
    border-color var(--motion-panel) var(--motion-ease);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in oklab, var(--color-brand-primary) 60%, transparent);
}

.card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  color: var(--color-neutral-0);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  margin-bottom: var(--space-4);
}

.card h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--space-3);
}

.card p {
  margin: 0;
  color: var(--color-neutral-700);
  font-size: 15px;
  line-height: 1.6;
}

.card code {
  font-size: 12.5px;
}

/* ---------------------------------------------------------------
 * Footer
 * --------------------------------------------------------------- */

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  font-size: 14px;
  color: var(--color-neutral-700);
}

@media (min-width: 768px) {
  .site-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.site-footer p {
  margin: 0;
  text-align: center;
}

/* Footer theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-neutral-700);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    color var(--motion-micro) var(--motion-ease),
    border-color var(--motion-micro) var(--motion-ease);
}

.theme-toggle:hover {
  color: var(--color-neutral-900);
  border-color: var(--color-brand-primary);
}

.theme-toggle-icon {
  display: inline-flex;
}

.theme-toggle-icon svg {
  width: 16px;
  height: 16px;
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
}

.site-footer a:hover {
  color: var(--color-neutral-900);
}

/* ---------------------------------------------------------------
 * Markdown body — applied to /docs/ rendered output.
 *
 * Replaces @deno/gfm's stock CSS so the docs page consumes the same
 * design tokens as the landing. Mobile-first per DESIGN.md.
 * --------------------------------------------------------------- */

.markdown-body {
  max-width: 72ch;
  margin: 0 auto;
  padding: var(--space-8) 0 var(--space-12);
  color: var(--color-neutral-900);
  font-size: 16px;
  line-height: 1.7;
  word-wrap: break-word;
}

.markdown-body > :first-child {
  margin-top: 0;
}

.markdown-body > :last-child {
  margin-bottom: 0;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  color: var(--color-neutral-900);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: var(--space-10) 0 var(--space-4);
  line-height: 1.25;
  scroll-margin-top: var(--space-12);
}

.markdown-body h1 {
  /* Display-then-H1 mobile scaling per DESIGN.md responsive rule. */
  font-size: 26px;
  margin-top: 0;
}
@media (min-width: 768px) {
  .markdown-body h1 {
    font-size: 32px;
  }
}

.markdown-body h2 {
  font-size: 22px;
  font-weight: 600;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-neutral-300);
}
@media (min-width: 768px) {
  .markdown-body h2 {
    font-size: 24px;
  }
}

.markdown-body h3 {
  font-size: 18px;
  font-weight: 600;
}

.markdown-body h4 {
  font-size: 16px;
  font-weight: 600;
}

.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body blockquote,
.markdown-body table,
.markdown-body pre {
  margin: 0 0 var(--space-4);
}

.markdown-body ul,
.markdown-body ol {
  padding-left: var(--space-6);
}

.markdown-body li + li {
  margin-top: var(--space-1);
}

.markdown-body li > p {
  margin-bottom: var(--space-2);
}

.markdown-body a {
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.markdown-body a:hover {
  text-decoration-thickness: 2px;
}

.markdown-body strong {
  font-weight: 700;
  color: var(--color-neutral-900);
}

.markdown-body code {
  /* Override the global inline code so it inherits markdown-body sizing. */
  background: var(--color-neutral-100);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--color-neutral-900);
}

.markdown-body pre {
  background: var(--codeblock-bg);
  color: var(--codeblock-fg);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 13px;
  line-height: 1.6;
  box-shadow: var(--shadow-sm);
}

.markdown-body pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
  color: inherit;
  border-radius: 0;
}

.markdown-body blockquote {
  border-left: 3px solid var(--color-brand-primary);
  background: var(--color-neutral-100);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-3) var(--space-5);
  color: var(--color-neutral-700);
}

.markdown-body blockquote > :last-child {
  margin-bottom: 0;
}

.markdown-body hr {
  border: 0;
  height: 1px;
  background: var(--color-neutral-300);
  margin: var(--space-10) 0;
}

.markdown-body table {
  width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  font-size: 14px;
}

.markdown-body table th,
.markdown-body table td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-neutral-300);
  text-align: left;
}

.markdown-body table th {
  background: var(--color-neutral-100);
  font-weight: 600;
}

.markdown-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.markdown-body kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-300);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  color: var(--color-neutral-900);
}

/* Anchor links inside headings — emitted by the GFM renderer. */
.markdown-body .anchor {
  color: inherit;
}

/* ---------------------------------------------------------------
 * Doc page chrome (breadcrumb + footer card on /docs/)
 * --------------------------------------------------------------- */

.doc-header {
  padding: var(--space-4) 0 var(--space-6);
  font-size: 14px;
  color: var(--color-neutral-700);
}

.doc-header a {
  color: inherit;
  text-decoration: underline;
}

.doc-header a:hover {
  color: var(--color-neutral-900);
}

/* -- Specnaut Cloud funnel band (growth CTA) ----------------------------- */
.nav-cloud {
  font-weight: 600;
  color: var(--color-btn-primary-bg);
}

.cloud-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-neutral-700);
  margin: 0 auto var(--space-8);
  max-width: 64ch;
}

.cloud-points {
  list-style: none;
  margin: 0 auto var(--space-8);
  padding: 0;
  display: grid;
  gap: var(--space-3);
  text-align: left;
  max-width: 60ch;
}

.cloud-points li {
  position: relative;
  padding-left: var(--space-6);
  line-height: 1.5;
}

.cloud-points li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--color-brand-primary);
}

.cloud-cta {
  justify-content: center;
}

/* ===============================================================
 * BOLD REBRAND (#11) — new composition sections.
 * Tokens only; no new colours; min-width queries only.
 * =============================================================== */

/* -- Hero: branded wash + floating diorama ------------------------------ */
.hero {
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--space-12)) auto auto 50%;
  transform: translateX(-50%);
  width: min(130%, 920px);
  height: 90%;
  background: radial-gradient(
    55% 60% at 68% 32%,
    color-mix(in oklab, var(--color-brand-primary) 16%, transparent),
    transparent 72%
  );
  pointer-events: none;
  filter: blur(6px);
}

.hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-art-img {
  width: 100%;
  max-width: 520px;
  height: auto;
  filter: drop-shadow(var(--shadow-md));
  animation: hero-float 6s var(--motion-ease) infinite alternate;
  will-change: transform;
}

@media (min-width: 1024px) {
  .hero-art-img {
    max-width: 100%;
  }
}

@keyframes hero-float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art-img {
    animation: none;
  }
}

/* -- Harness band ------------------------------------------------------- */
.harness-band {
  text-align: center;
}

.band-kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  margin: 0 0 var(--space-5);
}

.harness-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
}

.harness-chips li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-full);
  background: var(--color-neutral-100);
  color: var(--color-neutral-900);
  font-size: 14px;
  font-weight: 600;
}

/* -- How it works (step timeline) -------------------------------------- */
.steps {
  width: 100%;
}

.step-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .step-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-brand-primary) 14%, transparent);
  color: var(--color-brand-primary);
  font-family: var(--font-mono);
  font-size: 16px;
  margin-bottom: var(--space-4);
}

.step h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--space-2);
}

.step p {
  margin: 0;
  color: var(--color-neutral-700);
  font-size: 15px;
  line-height: 1.6;
}

/* -- Feature splits ----------------------------------------------------- */
.features {
  width: 100%;
  display: grid;
  gap: var(--space-16);
}

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 768px) {
  .feature-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-16);
  }

  .feature-row.reverse .feature-media {
    order: 2;
  }
}

.feature-media {
  display: flex;
  align-items: center;
  justify-content: center;
  /* No tile/wrapper — the trimmed transparent robots float directly on the
     section band. */
}

.feature-media img {
  width: 100%;
  max-width: 420px;
  height: auto;
}

.feature-copy .eyebrow {
  margin-bottom: var(--space-3);
}

.feature-copy h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--space-4);
}

@media (min-width: 768px) {
  .feature-copy h3 {
    font-size: 28px;
  }
}

.feature-copy p {
  margin: 0 0 var(--space-5);
  color: var(--color-neutral-700);
  font-size: 16px;
  line-height: 1.6;
}

.feature-link {
  padding-left: 0;
  padding-right: 0;
}

/* -- Agent roster ------------------------------------------------------- */
.roster {
  width: 100%;
}

.roster .section-title {
  margin-bottom: var(--space-4);
}

.section-lede {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto var(--space-10);
  color: var(--color-neutral-700);
  font-size: 18px;
  line-height: 1.6;
}

.roster-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (min-width: 480px) {
  .roster-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

.roster-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
}

.roster-card .sprite {
  max-width: 112px;
}

.roster-card figcaption {
  font-family: var(--font-pixel);
  font-size: 7px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-neutral-700);
  line-height: 1.4;
}

/* Stagger the roster bob so the cast doesn't move in lockstep. */
.roster-card:nth-child(3n+2) .sprite {
  animation-delay: -1s;
}
.roster-card:nth-child(3n) .sprite {
  animation-delay: -2s;
}

/* -- Cloud section (two-column with art) -------------------------------- */
.cloud-inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
  text-align: left;
}

@media (min-width: 768px) {
  .cloud-inner {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-16);
  }
}

.cloud-art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cloud-art img {
  width: 100%;
  max-width: 380px;
  height: auto;
  filter: drop-shadow(var(--shadow-md));
}

.cloud-title {
  text-align: left;
  margin-bottom: var(--space-5);
}

.cloud-lede {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.cloud-points {
  margin-left: 0;
  margin-right: 0;
}

/* -- Trust band --------------------------------------------------------- */
.trust {
  width: 100%;
  text-align: center;
}

.trust-grid {
  list-style: none;
  margin: 0 0 var(--space-10);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  text-align: left;
}

@media (min-width: 480px) {
  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.trust-grid li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.trust-grid strong {
  display: block;
  font-size: 16px;
  color: var(--color-neutral-900);
  margin-bottom: var(--space-1);
}

.trust-grid span {
  color: var(--color-neutral-700);
  font-size: 14px;
  line-height: 1.5;
}

.trust-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.trust-snippet {
  max-width: 640px;
  margin: 0 auto;
}