/* --------------------------------------------------------------
   FAQ – CSS‑only accordion (details/summary)
   -------------------------------------------------------------- */
   .faq-accordion {
    max-width: 800px;               /* optional – limits width */
    margin: 0 auto;                 /* centre on the page */
  }
  
  /* Hide the default disclosure triangle (optional) */
  .faq-accordion summary::-webkit-details-marker {
    display: none;
  }
  
  /* --------------------------------------------------------------
     Summary (question) – the clickable header
     -------------------------------------------------------------- */
  .faq-question {
    cursor: pointer;
    padding: 1rem 1.5rem;
    background: #f5f5f5;            /* light grey – change as you like */
    border: 1px solid #ddd;
    border-radius: 4px;
    font-weight: 600;
    position: relative;
    list-style: none;               /* remove default list styling */
  }
  
  /* Arrow indicator (pure CSS) */
  .faq-question::after {
    content: "▸";                   /* right‑pointing triangle */
    font-size: 1.2rem;
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.2s ease;
  }
  
  /* Rotate arrow when open */
  .faq-item[open] .faq-question::after {
    transform: translateY(-50%) rotate(90deg);
  }
  
  /* Hover/focus state */
  .faq-question:hover,
  .faq-question:focus {
    background: #eaeaea;
  }
  
  /* --------------------------------------------------------------
     Answer (content) – hidden by default, shown when <details> open
     -------------------------------------------------------------- */
  .faq-answer {
    padding: 1rem 1.5rem;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #fff;
    line-height: 1.6;
  }
  
  /* Optional: smooth transition for the opening/closing */
  .faq-item {
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  /* --------------------------------------------------------------
     Tables inside the FAQ (keep original styling)
     -------------------------------------------------------------- */
  .faq-answer table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
  }
  .faq-answer th,
  .faq-answer td {
    border: 1px solid #ccc;
    padding: 0.5rem;
    text-align: left;
  }
  
  /* Colour‑coded cells (kept from your original markup) */
  .faq-answer .color-cell.red    { background:#ffdddd; }
  .faq-answer .color-cell.yellow { background:#ffffdd; }
  .faq-answer .color-cell.violet { background:#eeddfd; }
  .faq-answer .color-cell.green  { background:#ddffdd; }
  .faq-answer .color-cell.cyan   { background:#ddffff; }
  .faq-answer .color-cell.blue   { background:#ddeeff; }
  .faq-answer .gradient-red-green {
    background: linear-gradient(to right, #ff0000, #00ff00);
  }
  
  /* --------------------------------------------------------------
     Responsive tweaks (optional)
     -------------------------------------------------------------- */
  @media (max-width: 600px) {
    .faq-question,
    .faq-answer {
      padding: 0.8rem 1rem;
    }
  }