/* FAQ page layout. */

.faq-header {
  text-align: center;
  padding-block: clamp(20px, 4vw, 40px) clamp(16px, 3vw, 28px);
}
.faq-title {
  color: var(--color-plum);
  font-size: var(--fs-headline);
  margin: 0 0 clamp(8px, 2vw, 16px);
}
.faq-intro {
  color: var(--color-plum);
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  margin: 0 auto;
  max-width: none;
}

/* Two-column accordion */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  padding-bottom: clamp(40px, 7vw, 88px);
}
.faq-col { display: grid; gap: clamp(12px, 1.5vw, 18px); align-content: start; }

.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding: 0 18px;
}
.faq-item__q {
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-ink);
}
.faq-item__q::-webkit-details-marker { display: none; }

.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--color-sage);
  transition: transform var(--duration-base) ease, opacity var(--duration-base) ease;
}
.faq-item__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }       /* horizontal */
.faq-item__icon::after  { top: 0; left: 8px; width: 2px; height: 18px; }        /* vertical */
.faq-item[open] .faq-item__icon::after { transform: rotate(90deg); opacity: 0; }

.faq-item__a {
  padding: 0 0 18px 32px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-ink);
}

/* Pale-green illustration section with wavy top edge */
.faq-feature {
  position: relative;
  background: var(--color-pale-green);
  margin-top: clamp(24px, 4vw, 48px);
  padding-block: clamp(48px, 8vw, 96px);
}
.faq-feature::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -38px;
  height: 40px;
  background: var(--color-pale-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,40 L0,18 C240,-6 480,-6 720,12 C960,30 1200,30 1440,10 L1440,40 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,40 L0,18 C240,-6 480,-6 720,12 C960,30 1200,30 1440,10 L1440,40 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.faq-feature__img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
}

@media (max-width: 1024px) {
  .faq-grid { grid-template-columns: 1fr; }
}