/* ── Social Accountability page (extracted from inline <style>; consolidate shared rules into main.css) ── */
    /* ── Intro ── */
    .intro-section {
      background: var(--surface);
    }
    .intro-content {
      max-width: 800px;
    }
    .intro-content h2 {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2.25rem);
      line-height: 1.2;
      color: var(--text);
      margin-bottom: 1.25rem;
    }
    .intro-content p {
      color: var(--text-muted);
      font-size: 1rem;
      line-height: 1.8;
      margin-bottom: 1.25rem;
    }

    /* ── Accordion ── */
    .accordion-section {
      background: var(--surface);
      padding-top: 0;
    }
    .accordion {
      max-width: 800px;
    }
    .accordion details {
      border-bottom: 1px solid var(--border);
    }
    .accordion details:first-child {
      border-top: 1px solid var(--border);
    }
    .accordion summary {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text);
      padding: 1.25rem 0;
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .accordion summary::-webkit-details-marker { display: none; }
    .accordion summary::after {
      content: '+';
      font-size: 1.25rem;
      font-weight: 400;
      color: var(--text-muted);
      flex-shrink: 0;
      transition: transform 0.2s;
    }
    .accordion details[open] summary::after {
      content: '\2212';
    }
    .accordion details .accordion-body {
      padding-bottom: 1.25rem;
      color: var(--text-muted);
      line-height: 1.75;
      font-size: 0.9375rem;
    }