/* faq.css — Landing FAQ accordion (swipe-classic fit) */

.kdg-faq { background: var(--kdg-canvas); }

.kdg-faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 64rem;
  margin: 0 auto;
}

/* accordion / accordion-item / button / icon / accordion-content contract
 * preserved so faq.js (toggles aria-expanded) keeps working. */

.accordion { text-align: left; }
.accordion .accordion-item { border-bottom: 1px solid var(--kdg-border); }
.accordion .accordion-item:first-child { border-top: 1px solid var(--kdg-border); }

.accordion .accordion-item button[aria-expanded="true"] {
  border-bottom: 1px solid var(--kdg-brand);
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1.25rem 2rem 1.25rem 0;
  color: var(--kdg-ink);
  font-family: var(--kdg-font-display);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
  transition: color .15s ease;
}
.accordion button:hover,
.accordion button:focus { color: var(--kdg-brand); }

.accordion button .accordion-title { padding: 0; }

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 1.25rem;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--kdg-border-strong);
  border-radius: var(--kdg-radius-pill);
  color: var(--kdg-ink-2);
  background: var(--kdg-surface);
  transition: border-color .15s ease, color .15s ease;
}
.accordion button:hover .icon,
.accordion button:focus .icon {
  border-color: var(--kdg-brand);
  color: var(--kdg-brand);
}

.accordion button .icon::before,
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: "";
  background: currentColor;
  transition: transform .2s ease, width .2s ease;
}
.accordion button .icon::before {
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.accordion button .icon::after {
  top: 50%;
  left: 50%;
  width: 1.5px;
  height: 10px;
  transform: translate(-50%, -50%);
}

.accordion button[aria-expanded="true"] { color: var(--kdg-brand); }
.accordion button[aria-expanded="true"] .icon {
  border-color: var(--kdg-brand);
  background: var(--kdg-brand);
  color: #fff;
}
.accordion button[aria-expanded="true"] .icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.accordion button[aria-expanded="true"] + .accordion-content {
  opacity: 1;
  max-height: 30rem;
  transition: opacity 200ms ease, max-height 250ms ease;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms ease, max-height 250ms ease;
}
.accordion .accordion-content p {
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--kdg-ink-2);
  margin: 0 0 1.25rem;
  font-weight: 300;
}

@media (max-width: 767px) {
  .kdg-faq__grid { grid-template-columns: 1fr; gap: 0; }
}