/* ================================================================
       Text pages: roadmap, changelog, comparison page, blog index, 404
       ================================================================ */

    /* These pages link docs.css first: it owns the docs layout (sidebar, content, typography).
       This sheet holds only what the text pages add to it. */

    /* A nested list stays with its item and keeps a gap before the next group. */
    .docs-section li ul {
      margin-top: var(--space-1);
      margin-bottom: var(--space-3);
    }

    /* Comparison tables: scroll inside the column on a phone. */
    .table-scroll .cmp-table { margin: var(--space-5) 0; }
    .cmp-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
    .cmp-table th, .cmp-table td {
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--hairline);
      text-align: left;
      vertical-align: top;
      line-height: 1.55;
    }
    .cmp-table thead th {
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      border-bottom: 2px solid var(--hairline);
      white-space: nowrap;
    }
    .cmp-table tbody th { color: var(--ink); font-weight: 600; min-width: 9rem; }
    /* The row label stays in view while the columns scroll on a phone. */
    .cmp-table tbody th, .cmp-table thead th:first-child { position: sticky; left: 0; background: var(--canvas); }
    .cmp-table tbody td { color: var(--body); min-width: 10rem; }
    .cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: none; }
    .cmp-table a, .sources a { color: var(--accent); }
    .sources { padding-left: var(--space-6); list-style: decimal; }
    .sources li { margin-bottom: var(--space-3); color: var(--body); }

    /* ── Page header ─────────────────────────────────────────────── */
    .page-header {
      padding: var(--space-24) var(--space-8) var(--space-16);
      background: var(--surface);
      border-bottom: 1px solid var(--hairline);
      text-align: center;
    }
    .page-header-eyebrow {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: var(--space-4);
    }
    .page-header h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--ink);
      margin-bottom: var(--space-4);
    }
    .page-header p {
      font-size: 1.05rem;
      font-weight: 300;
      color: var(--body);
      max-width: 50ch;
      margin: 0 auto;
    }

    /* ── Blog grid ───────────────────────────────────────────────── */
    .blog-section { padding: var(--space-16) var(--space-8); }
    .blog-inner { max-width: var(--max-width); margin: 0 auto; }
    .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

    .article-card {
      background: var(--canvas);
      box-shadow: 0 0 0 1px var(--hairline);
      border-top: 4px solid var(--accent-dim);
      border-radius: 0 0 var(--radius-md) var(--radius-md);
      padding: var(--space-6);
      display: flex;
      flex-direction: column;
      transition: border-top-color var(--duration-mid) ease, transform var(--duration-mid) ease, box-shadow var(--duration-mid) ease;
    }
    .article-card:hover {
      border-top-color: var(--accent);
      transform: translateY(-3px);
      box-shadow: 0 0 0 1px var(--hairline), 0 8px 32px color-mix(in srgb, var(--inverse) 8%, transparent);
    }
    [data-theme="dark"] .article-card { background: var(--surface); }
    [data-theme="dark"] .article-card:hover { box-shadow: 0 0 0 1px var(--hairline), 0 8px 32px color-mix(in srgb, var(--inverse) 40%, transparent); }
    .article-tag {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: var(--space-3);
    }
    .article-title {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin-bottom: var(--space-3);
      flex-grow: 1;
    }
    .article-excerpt {
      font-size: 0.88rem;
      color: var(--body);
      line-height: 1.65;
      margin-bottom: var(--space-5);
    }
    .article-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.75rem;
      color: var(--muted);
      margin-bottom: var(--space-5);
    }
    .article-read-more {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--accent);
      letter-spacing: 0.02em;
      transition: gap var(--duration-fast) ease;
    }
    .article-read-more:hover { gap: var(--space-3); }

    /* ── Responsive ─────────────────────────────────────────────── */

    @media (max-width: 768px) {
      .blog-grid { grid-template-columns: 1fr 1fr; }
      .page-header { padding: var(--space-16) var(--space-5); }
    }

    @media (max-width: 540px) {
      .blog-grid { grid-template-columns: 1fr; }
    }

/* Formerly inline style= attributes: the P4 CSP (style-src without 'unsafe-inline') allows none. */
.docs-layout-single { grid-template-columns: 1fr; }