/* Extracted page styles from features.html. */
/* ─── Page-specific: Hero ─────────────────────────────────────────────── */
    .features-hero {
      padding: 80px 0 64px;
      text-align: center;
    }
    .features-hero h1 {
      font-size: 36px;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.2;
      margin-bottom: 16px;
    }
    .features-hero .subtitle {
      font-size: 16px;
      color: var(--text-muted);
      max-width: 560px;
      margin: 0 auto;
      line-height: 1.6;
    }

    @media (max-width: 700px) {
      .features-hero { padding: 56px 0 40px; }
      .features-hero h1 { font-size: 28px; }
    }

    /* ─── Page-specific: Comparison table highlight row ────────────────────── */
    .data-table tr.highlight td {
      color: var(--text);
      font-weight: 500;
      background: var(--accent-glow);
    }
    .data-table tr.highlight td:first-child {
      color: var(--accent);
      font-weight: 700;
    }

    /* ─── Page-specific: API code blocks ──────────────────────────────────── */
    .code-block {
      background: var(--code-bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 20px 24px;
      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
      font-size: 13px;
      color: var(--green);
      overflow-x: auto;
      line-height: 1.7;
      white-space: pre;
      max-width: 600px;
      margin: 0 auto;
      text-align: left;
    }
    .code-block .comment { color: var(--text-muted); }
    .code-block .keyword { color: var(--accent); }
    .code-block .string { color: var(--orange); }

    /* ─── Page-specific: CTA section ──────────────────────────────────────── */
    .cta-section {
      padding: 64px 0;
      text-align: center;
    }
    .cta-section h2 {
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 24px;
    }