@layer reset, tokens, base, layout, components, utilities;

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  img { max-width: 100%; display: block; }
  input, button { font: inherit; }
}

@layer tokens {
  :root {
    --color-bg: #0A0A0A;
    --color-bg-secondary: #0E0E0E;
    --color-bg-tertiary: #141414;
    --color-bg-inverse: #FFFFFF;
    --color-text: #FFFFFF;
    --color-text-secondary: #848484;
    --color-text-tertiary: #737373;
    --color-text-inverse: #0A0A0A;
    --color-accent: #C9A962;
    --color-accent-hover: #D4B36A;
    --color-accent-dark: #B8923E;
    --color-border: #2A2A2A;
    --color-border-strong: #3A3A3A;
    --color-focus: #C9A962;
    --cat-review: #5B8DEF;
    --cat-infra: #45B7A0;
    --cat-research: #50C878;
    --cat-workflow: #C77DBA;
    --cat-marketing: #E67E22;
    --cat-tools: #7FB069;
    --cat-content: #D4A937;
    --cat-legal: #6C8EBF;
    --cat-sales: #E06666;
    --cat-finance: #26A69A;
    --cat-support: #9B59B6;
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.875rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;
    --text-5xl: 4.5rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 5rem;
    --space-12: 8rem;
    --header-h: 3.5rem;
  }
}

@layer base {
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; }
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-lg); }
  a { color: var(--color-accent); text-decoration: none; }
  a:hover { color: var(--color-accent-hover); text-decoration: underline; }
  code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-bg-tertiary);
    padding: 0.15em 0.4em;
    border-radius: 4px;
  }
  pre { overflow-x: auto; }
  pre code { background: none; padding: 0; }
  :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  ::selection { background: rgba(201, 169, 98, 0.25); }
}

@layer layout {
  .container { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-5); }
  @media (min-width: 768px) { .container { padding-inline: var(--space-8); } }

  /* Page hero for docs pages */
  .page-hero {
    background: var(--color-bg);
    color: var(--color-text);
    padding: var(--space-10) 0 var(--space-8);
    margin-top: var(--header-h);
    position: relative;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
  }
  .page-hero .container { position: relative; z-index: 1; }
  .page-hero h1 { font-size: var(--text-4xl); margin-bottom: var(--space-4); letter-spacing: -0.02em; }
  .page-hero p { font-size: var(--text-lg); color: var(--color-text-secondary); max-width: 600px; margin-inline: auto; }

  .page-section { padding: var(--space-8) 0; }
  .page-section + .page-section { border-top: 1px solid var(--color-border); }

  .catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-5);
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
    margin: var(--space-6) 0;
  }
}

@layer components {
  /* Header */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--space-6);
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
  }
  .site-header .logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .site-header .logo:hover { text-decoration: none; }
  .header-mark {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--color-accent);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    color: var(--color-accent);
  }
  .header-name {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 3px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
  }
  .nav-links { display: flex; align-items: center; gap: var(--space-4); list-style: none; }
  .nav-links a {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: var(--space-1) 0;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
  }
  .nav-links a:hover, .nav-links a[aria-current="page"] {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
    text-decoration: none;
  }

  .nav-toggle { display: none; }
  .nav-toggle-label {
    display: none;
    cursor: pointer;
    padding: var(--space-2);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
  }

  @media (max-width: 768px) {
    .nav-toggle-label { display: block; }
    .nav-links {
      position: fixed;
      top: var(--header-h);
      right: 0;
      width: 260px;
      height: calc(100vh - var(--header-h));
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: var(--color-bg);
      border-left: 1px solid var(--color-border);
      padding: var(--space-4);
      transform: translateX(100%);
      transition: transform 0.2s ease;
      z-index: 2;
    }
    .nav-links a { padding: var(--space-3) var(--space-4); border-bottom: none; }
    .nav-toggle:checked ~ .nav-links { transform: translateX(0); }
    /* Backdrop overlay -- uses viewport units because backdrop-filter on header
       creates a containing block that breaks bottom:0 on fixed children */
    .nav-toggle:checked ~ .nav-toggle-label::before {
      content: '';
      position: fixed;
      top: var(--header-h);
      left: 0;
      width: 100vw;
      height: calc(100vh - var(--header-h));
      background: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }
  }

  /* Stat cards (docs pages) */
  .stat-card {
    text-align: center;
    padding: var(--space-5) var(--space-4);
    background: var(--color-bg-secondary);
    border-radius: 8px;
  }
  .stat-number {
    display: block;
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
  }
  .stat-label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    margin-top: var(--space-2);
  }

  /* Component cards */
  .component-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .component-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.03);
  }
  .card-header { display: flex; align-items: center; gap: var(--space-2); }
  .card-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .card-category {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .card-title {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.02em;
  }
  .card-description {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    flex: 1;
  }
  .card-footer {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
  }
  .card-usage {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    background: var(--color-bg-tertiary);
    padding: var(--space-1) var(--space-2);
    border-radius: 4px;
    display: inline-block;
    word-break: break-all;
  }
  /* Community page */
  .community-card-link { text-decoration: none; color: inherit; }
  .community-text {
    color: var(--color-text-secondary);
    line-height: 1.6;
  }
  .community-text + .community-text {
    margin-top: var(--space-4);
  }
  .community-text a { color: var(--color-accent); }

  /* Footer social links */
  .footer-social {
    display: flex;
    gap: var(--space-4);
  }
  .footer-social a {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-decoration: none;
  }
  .footer-social a:hover { color: var(--color-text); }

  /* Command cards (wider) */
  .command-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    transition: border-color 0.15s;
  }
  .command-card:hover { border-color: var(--color-border-strong); }
  @media (min-width: 640px) {
    .command-card { grid-template-columns: auto 1fr; }
  }
  .command-name {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-accent);
  }
  .command-description { color: var(--color-text-secondary); font-size: var(--text-sm); }

  /* Category sections */
  .category-section { margin-top: var(--space-8); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
  .category-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border);
  }
  .category-title { font-size: var(--text-2xl); }
  .category-count {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  /* Category pills */
  .category-nav {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
  }
  .category-nav::-webkit-scrollbar { display: none; }
  .category-pill {
    flex-shrink: 0;
    padding: var(--space-1) var(--space-4);
    border-radius: 9999px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all 0.15s;
  }
  .category-pill:hover {
    background: rgba(201, 169, 98, 0.1);
    border-color: var(--color-accent);
    color: var(--color-text);
    text-decoration: none;
  }

  /* Landing page: Hero */
  .landing-hero {
    margin-top: var(--header-h);
    padding: var(--space-10) var(--space-5) var(--space-10);
    text-align: center;
  }
  .landing-hero h1 {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.05;
    max-width: 900px;
    margin-inline: auto;
    margin-bottom: var(--space-6);
  }
  .landing-hero .hero-tagline {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
  }
  .landing-hero .hero-sub {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    max-width: 700px;
    margin-inline: auto;
    margin-bottom: var(--space-8);
  }
  .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
  }
  .cta-helper {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-3);
  }
  .hero-meta {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-3);
  }
  .hero-meta a { color: var(--color-text); }
  .hero-meta-fallback { color: var(--color-text-secondary); margin-left: var(--space-2); }

  /* Landing page: Stats strip */
  .landing-stats {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: var(--space-10) var(--space-5);
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
  .landing-stat {
    text-align: center;
  }
  .landing-stat-value {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--color-accent);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .landing-stat-label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
  }

  /* Landing page: Problem section */
  .landing-section {
    padding: var(--space-10) var(--space-5);
  }
  .landing-section-inner {
    max-width: 1200px;
    margin-inline: auto;
  }
  .section-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--color-accent);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: var(--space-4);
  }
  .section-title {
    font-family: var(--font-display);
    font-size: 2.625rem;
    font-weight: 500;
    text-align: center;
    max-width: 800px;
    margin-inline: auto;
    margin-bottom: var(--space-4);
    line-height: 1.15;
  }
  .section-desc {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    line-height: 1.7;
    margin-bottom: var(--space-8);
  }

  /* Landing page: Problem cards */
  .problem-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    max-width: 1200px;
    margin-inline: auto;
  }
  .problem-card {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: 8px;
  }
  .problem-card-icon {
    color: var(--color-accent);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-5);
  }
  .problem-card h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 500;
    margin-bottom: var(--space-4);
  }
  .problem-card p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
  }

  /* Landing page: Quote */
  .landing-quote {
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-10) var(--space-5);
    text-align: center;
  }
  .landing-quote blockquote {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-style: italic;
    line-height: 1.5;
    max-width: 800px;
    margin-inline: auto;
    margin-bottom: var(--space-5);
  }
  .landing-quote cite {
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--text-sm);
    color: var(--color-accent);
  }

  /* Landing page: Mid-page CTA */
  .landing-cta-mid {
    text-align: center;
    padding: var(--space-6) var(--space-5);
  }

  /* Landing page: "As seen in" press strip */
  .landing-press-strip {
    padding: var(--space-8) var(--space-5);
    text-align: center;
  }
  .press-outlet-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-4) var(--space-6);
  }
  .press-outlet a {
    color: var(--color-text-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-sm);
  }
  .press-outlet a:hover,
  .press-outlet a:focus-visible {
    text-decoration: underline;
  }
  .press-outlet-name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .press-outlet-context {
    color: var(--color-text-secondary);
  }

  /* Community page: Stats strip */
  .community-stats {
    padding: var(--space-8) var(--space-5);
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
  .community-stats .container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-6);
  }
  .community-stat {
    text-align: center;
  }
  .community-stat-value {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--color-accent);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .community-stat-label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
  }

  /* Community page: Summary paragraph */
  .community-summary {
    padding: var(--space-8) 0 var(--space-4);
    max-width: 75ch;
    margin-inline: auto;
  }
  .community-summary p {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
  }

  /* Landing page: Feature grids (departments + workflow) */
  .feature-grid-departments {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    max-width: 1200px;
    margin-inline: auto;
  }
  .feature-grid-workflow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    max-width: 1200px;
    margin-inline: auto;
  }
  .feature-grid-sublabel {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--color-accent);
    text-transform: uppercase;
    text-align: center;
    margin-top: var(--space-10);
    margin-bottom: var(--space-5);
    max-width: 1200px;
    margin-inline: auto;
  }
  .feature-card {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: 8px;
  }
  .feature-card-icon {
    color: var(--color-accent);
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
  }
  .feature-card h3 {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-3);
  }
  .feature-card p {
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
    line-height: 1.5;
  }

  /* Landing page: Final CTA */
  .landing-cta {
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-tertiary) 100%);
    padding: var(--space-12) var(--space-5);
    text-align: center;
  }
  .landing-cta h2 {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 500;
    margin-bottom: var(--space-4);
  }
  .landing-cta p {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
  }

  /* Buttons */
  .btn {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
  }
  .btn:hover { text-decoration: none; }
  .btn-primary {
    background: linear-gradient(180deg, #D4B36A 0%, #B8923E 100%);
    color: var(--color-text-inverse);
    padding: var(--space-4) var(--space-6);
  }
  .btn-primary:hover { opacity: 0.9; color: var(--color-text-inverse); }
  .btn-secondary {
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: var(--space-4) var(--space-6);
  }
  .btn-secondary:hover { border-color: var(--color-accent); color: var(--color-text); }
  /* Compact size modifier -- scope to .btn so it only applies within the button system. */
  .btn.btn--sm { padding: var(--space-2) var(--space-4); font-size: 0.875rem; }

  /* Nav CTA slot: right-align and separate from nav links on desktop. */
  .nav-links .nav-cta-slot { margin-left: auto; }
  .nav-links .nav-cta-slot .nav-cta { color: var(--color-text-inverse); }
  .nav-links .nav-cta-slot .nav-cta:hover { color: var(--color-text-inverse); border-bottom-color: transparent; }
  /* Light outline for focus-visible contrast: accent outline on accent-filled button would be invisible. */
  .nav-links .nav-cta-slot .nav-cta:focus-visible { outline: 2px solid var(--color-text-inverse); outline-offset: 3px; }
  @media (max-width: 768px) {
    .nav-links .nav-cta-slot { margin-left: 0; margin-top: var(--space-2); }
    .nav-links .nav-cta-slot .nav-cta { display: inline-block; text-align: center; }
  }

  /* Badge */
  .badge {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: 0.1em 0.5em;
    border-radius: 4px;
    background: rgba(201, 169, 98, 0.1);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Generic card (mcp-servers) */
  .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
  }
  .card h2 { font-size: var(--text-xl); }
  .card-meta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
  }
  .card-tools {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
  }
  .card-tools h3 { font-size: var(--text-sm); margin-bottom: var(--space-2); }
  .card-tools ul { padding-left: var(--space-5); color: var(--color-text-secondary); font-size: var(--text-sm); }
  .card-tools li { margin-bottom: var(--space-1); font-family: var(--font-mono); }

  /* Pipeline (docs pages) */
  .pipeline {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    padding: var(--space-6) 0;
  }
  .pipeline-node {
    position: relative;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 8px 8px 0;
    background: var(--color-bg-secondary);
    flex-shrink: 0;
    min-width: 130px;
  }
  .pipeline-node-name {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
  }
  .pipeline-node-desc {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-1);
  }
  .pipeline-connector {
    width: 32px;
    height: 2px;
    background: var(--color-border-strong);
    flex-shrink: 0;
  }
  @media (max-width: 768px) {
    .pipeline { flex-direction: column; align-items: stretch; }
    .pipeline-connector { width: 2px; height: 20px; align-self: center; }
    .pipeline-node { min-width: auto; }
  }

  /* Footer */
  .site-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-8) var(--space-5) var(--space-6);
  }
  .footer-inner {
    max-width: 1200px;
    margin-inline: auto;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
  }
  .footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .footer-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .footer-mark {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--color-accent);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    color: var(--color-accent);
  }
  .footer-name {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 3px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
  }
  .footer-tagline {
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-text-tertiary);
    line-height: 1.5;
    max-width: 280px;
  }
  .footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .footer-heading {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
  }
  .footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
  }
  .footer-links a {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    transition: color 0.15s;
  }
  .footer-links a:hover { color: var(--color-text); }
  .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-5);
  }
  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    list-style: none;
  }
  .footer-legal a {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    transition: color 0.15s;
  }
  .footer-legal a:hover { color: var(--color-text-secondary); }
  .footer-copyright {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
  }

  /* Prose reading width and vertical rhythm */
  .prose {
    max-width: 85ch;
    margin: 0 auto;
  }
  .prose h2,
  .prose h3 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
  }
  .prose p {
    margin-bottom: var(--space-4);
  }
  .prose ul,
  .prose ol {
    margin-bottom: var(--space-4);
    padding-left: var(--space-5);
  }
  .prose li {
    margin-bottom: var(--space-2);
  }
  .prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
  }
  .prose th,
  .prose td {
    border: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    text-align: left;
  }
  .prose th {
    background: var(--color-bg-secondary);
    font-weight: 600;
  }

  /* Changelog overrides -- applied alongside .prose on #changelog-content */
  #changelog-content h2 {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-2);
    margin-top: var(--space-8);
  }
  #changelog-content h2:first-child {
    margin-top: 0;
  }
  #changelog-content h3 {
    font-size: var(--text-base);
    margin-top: var(--space-5);
  }

  /* Changelog (legacy class -- kept for backward compatibility) */
  .changelog-entry { margin-bottom: var(--space-8); }
  .changelog-entry h2 {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4);
  }
  .changelog-entry h3 { font-size: var(--text-base); color: var(--color-text-secondary); margin: var(--space-4) 0 var(--space-2); }
  .changelog-entry ul { padding-left: var(--space-5); color: var(--color-text-secondary); }
  .changelog-entry li { margin-bottom: var(--space-2); font-size: var(--text-sm); }

  /* Quick start code block */
  .quickstart-code {
    background: var(--color-bg-secondary);
    color: var(--color-text);
    padding: var(--space-4) var(--space-5);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    overflow-x: auto;
    display: block;
    margin: var(--space-4) 0;
  }

  /* Hero alias for inner pages */
  .hero {
    background: var(--color-bg);
    color: var(--color-text);
    padding: var(--space-10) 0 var(--space-8);
    margin-top: var(--header-h);
    position: relative;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
  }
  .hero h1 { font-size: var(--text-4xl); margin-bottom: var(--space-4); letter-spacing: -0.02em; }
  .hero p, .hero .hero-subtitle, .hero .subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin-inline: auto;
  }

  /* Content section (inner pages) */
  .content { padding: var(--space-8) 0; }

  /* Getting started extras */
  .commands-list {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0;
  }
  .command-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border-radius: 8px;
  }
  .command-item code { font-weight: 600; white-space: nowrap; color: var(--color-accent); }
  .learn-more-links {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-5);
  }
  .learn-more-links a {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: border-color 0.15s;
  }
  .learn-more-links a:hover { border-color: var(--color-accent); text-decoration: none; }
  .learn-more-desc {
    display: block;
    font-weight: 400;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
  }

  /* Changelog note */
  .changelog-note {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
  }

  /* 404 */
  .error-page { text-align: center; padding: var(--space-12) 0; margin-top: var(--header-h); }
  .error-code { font-size: 6rem; font-weight: 700; color: var(--color-border-strong); line-height: 1; }

  /* Responsive: Landing page sections */
  @media (max-width: 768px) {
    .landing-hero h1 { font-size: var(--text-3xl); }
    .landing-stats { flex-direction: column; gap: var(--space-6); }
    .community-stats .container { flex-direction: column; gap: var(--space-5); }
    .press-outlet-list { flex-direction: column; gap: var(--space-3); }
    .problem-cards { grid-template-columns: 1fr; }
    .feature-grid-departments,
    .feature-grid-workflow { grid-template-columns: repeat(2, 1fr); }
    .feature-grid-sublabel { font-size: var(--text-xs); margin-bottom: var(--space-3); }
    .landing-quote blockquote { font-size: var(--text-xl); }
    .section-title { font-size: var(--text-2xl); }
    .footer-top { grid-template-columns: 1fr; gap: var(--space-6); text-align: center; }
    .footer-brand { align-items: center; }
    .footer-tagline { max-width: none; }
    .footer-col { align-items: center; }
    .footer-links { align-items: center; }
    .footer-social { justify-content: center; }
    .footer-bottom { flex-direction: column; gap: var(--space-3); text-align: center; }
    .footer-legal { justify-content: center; }
  }

  @media (min-width: 769px) and (max-width: 1024px) {
    .feature-grid-departments,
    .feature-grid-workflow { grid-template-columns: repeat(2, 1fr); }
  }

  /* FAQ */
  .faq-list { max-width: 75ch; margin: 0 auto; }
  .faq-item { border-bottom: 1px solid var(--color-border); }
  .faq-question {
    padding: var(--space-4) 0;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    cursor: pointer;
    list-style: none;
    color: var(--color-text-primary);
  }
  .faq-question::-webkit-details-marker { display: none; }
  .faq-question::before { content: "+ "; color: var(--color-accent); font-weight: 700; }
  details[open] > .faq-question::before { content: "- "; }
  .faq-answer {
    padding: 0 0 var(--space-4) 0;
    color: var(--color-text-secondary);
    line-height: 1.7;
  }

  /* Callout box for important guidance */
  .callout {
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-secondary);
    border-radius: 8px;
    border-left: 3px solid var(--color-accent);
    margin: var(--space-4) 0;
  }
  .callout code { font-weight: 600; color: var(--color-accent); }
  .callout strong { color: var(--color-text); }

  /* Blog tag chips */
  .blog-tag-chip {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-transform: lowercase;
    padding: 4px 12px;
    border-radius: 4px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
  }

  .blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  .blog-post-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  /* Newsletter signup form */
  .newsletter-section {
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-8) 0;
    text-align: center;
  }
  .newsletter-section h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-text);
    margin-bottom: var(--space-2);
  }
  .newsletter-section p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
  }
  .newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    align-items: flex-start;
    max-width: 480px;
    margin: 0 auto;
  }
  .newsletter-form input[type="email"] {
    flex: 1 1 220px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
    font-size: var(--text-base);
  }
  .newsletter-form input[type="email"]:focus {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-color: var(--color-accent);
  }
  .newsletter-form input[type="email"]::placeholder {
    color: var(--color-text-tertiary);
  }
  .newsletter-form button[type="submit"] {
    cursor: pointer;
    border: none;
  }
  .newsletter-form button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  .newsletter-privacy {
    flex-basis: 100%;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-1);
  }
  .newsletter-privacy a {
    color: var(--color-accent);
    text-decoration: underline;
  }
  .newsletter-status {
    flex-basis: 100%;
    font-size: var(--text-sm);
    min-height: 1.5em;
  }
  .newsletter-success { color: #4ade80; }
  .newsletter-error { color: #f87171; }

  /* Waitlist signup form -- reuses .newsletter-section/.newsletter-form classes */
  .newsletter-section--waitlist {
    border-top: 2px solid var(--color-accent);
  }

  /* Pricing page: Hero stat line */
  .hero-stat {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-accent);
    margin-top: var(--space-4);
    letter-spacing: 0.02em;
  }

  /* Pricing page: Section subtitle */
  .section-subtitle {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    max-width: 60ch;
    margin: var(--space-2) auto var(--space-8);
    text-align: center;
  }

  /* Pricing page: Hiring comparison table */
  .hiring-scenario-col {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
  }
  .hiring-total-row td {
    border-top: 2px solid var(--color-accent);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .hiring-footnote {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-4);
    text-align: center;
  }

  /* Pricing page: Department roster */
  .department-roster {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    max-width: 1200px;
    margin-inline: auto;
  }
  .department-card {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: 0;
  }
  .department-icon {
    font-size: var(--text-2xl);
    display: block;
    margin-bottom: var(--space-3);
  }
  .department-name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
    margin-bottom: var(--space-2);
  }
  .department-desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
  }

  /* Pricing page: Scenario callouts */
  .scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    max-width: 1200px;
    margin-inline: auto;
  }
  .scenario-card {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: 0;
  }
  .scenario-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
    margin-bottom: var(--space-3);
    color: var(--color-accent);
  }
  .scenario-desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
  }

  /* Pricing page: Claude note */
  .pricing-claude-note {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    text-align: center;
    margin-top: var(--space-6);
  }

  /* Pricing page: Proof tagline */
  .proof-tagline {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    letter-spacing: 0.02em;
  }

  /* Pricing page: Waitlist secondary CTA */
  .waitlist-secondary {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
  }
  .waitlist-secondary a {
    color: var(--color-text-secondary);
    text-decoration: underline;
  }
  .waitlist-secondary a:hover {
    color: var(--color-accent);
  }

  /* Pricing page: Tier cards */
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    max-width: 960px;
    margin-inline: auto;
  }
  .pricing-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
  }
  .pricing-card-featured {
    border-color: var(--color-accent);
    border-width: 2px;
  }
  .pricing-card-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-accent);
    text-align: center;
  }
  .pricing-card-price {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 500;
    line-height: 1.1;
    margin-top: var(--space-4);
    text-align: center;
  }
  .pricing-card-period {
    font-size: var(--text-xl);
    color: var(--color-text-secondary);
  }
  .pricing-card-sub {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
    text-align: center;
  }
  .pricing-card-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-5) 0;
  }
  .pricing-card-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    flex-grow: 1;
  }
  .pricing-card-features li {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    padding-left: var(--space-4);
    position: relative;
  }
  .pricing-card-features li::before {
    content: "\2013";
    color: var(--color-accent);
    position: absolute;
    left: 0;
  }
  .pricing-card-badge {
    display: inline-block;
    align-self: center;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-5);
  }
  .pricing-card-cta {
    width: 100%;
    text-align: center;
    margin-top: auto;
  }

  /* Pricing page: Comparison table */
  .pricing-table-wrap {
    max-width: 1200px;
    margin-inline: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }
  .pricing-table th,
  .pricing-table td {
    padding: var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
  }
  .pricing-table thead th {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    background: var(--color-bg-secondary);
  }
  .pricing-table tbody td {
    color: var(--color-text-secondary);
  }
  .pricing-table-highlight {
    background: rgba(201, 169, 98, 0.06);
    color: var(--color-text) !important;
  }
  .pricing-table thead .pricing-table-highlight {
    color: var(--color-accent) !important;
  }

  @media (max-width: 1024px) {
    .department-roster { grid-template-columns: repeat(2, 1fr); }
    .scenario-grid { grid-template-columns: repeat(2, 1fr); }
    .hiring-scenario-col { display: none; }
  }
  @media (max-width: 768px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-card { padding: var(--space-6); }
    .pricing-table { font-size: var(--text-xs); }
    .pricing-table th,
    .pricing-table td { padding: var(--space-3) var(--space-2); }
    .department-roster { grid-template-columns: 1fr; }
    .scenario-grid { grid-template-columns: 1fr; }
  }

  /* Hero waitlist form (inline email + button in landing hero) */
  .hero-waitlist-form {
    max-width: 560px;
    margin: var(--space-6) auto 0;
  }
  .hero-waitlist-form input[type="email"] {
    background: #111;
  }
  .hero-waitlist-form .btn-primary {
    flex-shrink: 0;
  }
  .hero-waitlist-form .newsletter-status {
    text-align: center;
  }
  @media (max-width: 768px) {
    .hero-waitlist-form {
      max-width: 100%;
    }
    .hero-waitlist-form input[type="email"],
    .hero-waitlist-form .btn-primary {
      flex: 1 1 100%;
    }
  }

}

@layer utilities {
  .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;
  }
  .skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    background: var(--color-accent);
    color: var(--color-text-inverse);
    padding: var(--space-2) var(--space-4);
    border-radius: 0 0 4px 4px;
    z-index: 200;
    font-weight: 600;
  }
  .skip-link:focus { top: 0; }
  .honeypot-trap {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header, .category-nav, .site-footer, .nav-toggle-label { display: none !important; }
  .page-hero, .landing-hero { margin-top: 0; }
}