/* ===== MOBILE OPTIMIZATION ===== */
@media screen and (max-width: 480px) { /* target typical mobile portrait */

  /* Ensure section/container fit the screen */
  .faq-section,
  .faq-container {
      padding-left: 12px;    /* slightly smaller padding for narrow screens */
      padding-right: 12px;
      min-width: 0;           /* prevents flex overflow */
  }

  /* Titles wrap nicely */
  .faq-title,
  .rule-title {
      font-size: 1.1rem;      /* slightly smaller on mobile */
      white-space: normal;    /* allow wrapping */
      word-break: break-word; /* prevent overflow */
      max-width: 100%;
      flex-shrink: 1;         /* allow arrow + text to shrink */
      justify-content: space-between; /* arrow stays right */
  }

  /* Buttons inside FAQ wrap */
  .faq-item button {
      font-size: 1.6rem;
      width: 100%;
      max-width: 100%;
      white-space: normal;
      word-break: break-word;
  }

  /* Description text stays inside container */
  .rule-desc,
  .faq-desc {
      font-size: 1rem;
      line-height: 1.8rem;
      padding: 0.4rem 0;
      overflow-wrap: break-word;
      word-break: break-word;
  }
}