:root {
  --bg:           #f5f2ed;
  --surface:      #ffffff;
  --border:       #e0dbd3;
  --text-head:    #1a1410;
  --text-body:    #4a4540;
  --text-meta:    #9a9390;
  --radius:       14px;
  --gap:          20px;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', sans-serif;
}

    /* =============================================
       RESET & BASE
       ============================================= */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      color: var(--text-body);
      line-height: 1.6;
    }

    /* =============================================
       CATEGORY SECTION
       — Add a new  for
         each topic group
       ============================================= */
    .qa-wrapper {
      width: 720px;
      max-width: 80vw;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 48px;
    }

    .qa-category {}

    .category-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-meta);
      margin-bottom: 4px;
      padding-left: 4px;
    }

    /* =============================================
       Q&A LIST
       — Add a new  for
         each question/answer pair
       ============================================= */
    .qa-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Individual item */
    .qa-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .qa-item:hover {
      border-color: #ccc7be;
      box-shadow: 0 4px 18px rgba(0,0,0,0.055);
    }

    .qa-item[open] {
      border-color: var(--accent);
      box-shadow: 0 6px 24px rgba(200, 98, 42, 0.10);
    }

    /* Question (summary) */
    .qa-item summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 24px;
      font-size: 1rem;
      font-weight: 500;
      color: var(--text-head);
      user-select: none;
      -webkit-user-select: none;
    }

    .qa-item summary::-webkit-details-marker { display: none; }

    .qa-item summary .q-text {
      flex: 1;
    }

    /* Chevron icon */
    .qa-item summary .icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--accent-light);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, transform 0.3s;
    }

    .qa-item summary .icon svg {
      width: 14px;
      height: 14px;
      stroke: var(--accent);
      transition: transform 0.3s;
    }

    .qa-item[open] summary .icon {
      background: var(--accent);
    }

    .qa-item[open] summary .icon svg {
      stroke: #fff;
      transform: rotate(180deg);
    }

    /* Answer body */
    .qa-answer {
      padding: 0 24px 22px;
      font-size: 0.96rem;
      color: var(--text-body);
      line-height: 1.75;
      border-top: 1px solid var(--border);
      padding-top: 18px;

      /* Smooth reveal */
      animation: fadeSlide 0.25s ease forwards;
    }
    
    .qa-answer p {
        margin-bottom: 12px;
    }

    @keyframes fadeSlide {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Inline links inside answers */
    .qa-answer a {
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    /* Optional tag / badge on a question */
    .qa-item summary .badge {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: var(--accent-light);
      color: var(--accent);
      padding: 2px 8px;
      border-radius: 99px;
      white-space: nowrap;
    }
    
.qa-link { text-align: center; margin-top: 20px; font-size: 18px; color: #aaa; }
.qa-link a { color: #FF7400; text-decoration: none; }