/* Minimal FAQ accordion styling tied to existing tokens */
.faq { display: grid; gap: 12px; }
.faq-item {
  border-radius: var(--radius-md, 20px);
  overflow: hidden;
  border: 1px solid #e5e5e5;
  background: #ffffff;
  /* Subtle brand accent without overwhelming the section */
  border-left: 6px solid var(--color-primary, #6fffe6);
}
.faq-q {
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 1rem;
  background: #ffffff;
  color: var(--color-text, #212121);
  border: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding-right: 48px; /* space for chevron */
}
.faq-q:hover { background: #f6fffd; }
.faq-q:focus-visible { outline: 2px solid var(--color-primary, #6fffe6); outline-offset: 2px; }

/* Chevron indicator */
.faq-q::after {
  content: "";
  position: absolute;
  right: 20px;
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  transition: transform 0.2s ease;
  /* Down chevron SVG, tinted to brand accent */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23006666' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6z'/%3E%3C/svg%3E");
}
.faq-q[aria-expanded="true"]::after { transform: rotate(180deg); }
.faq-a {
  padding: 12px 20px 16px;
  background: #ffffff;
  border-top: 1px solid #eee;
}