/* ==========================================================================
   FAQ — an index-card file on a deep green work surface
   ========================================================================== */
.faq {
  position: relative;
  overflow: hidden;
  padding: clamp(3.25rem, 7vw, 5.75rem) 0;
  color: #f8f3e8;
  background-color: #173f32;
  background-image:
    radial-gradient(circle at 16% 12%, rgba(104, 176, 143, 0.2), transparent 30%),
    radial-gradient(circle at 84% 78%, rgba(7, 22, 17, 0.36), transparent 34%),
    repeating-linear-gradient(7deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(97deg, rgba(0, 0, 0, 0.018) 0 1px, transparent 1px 7px);
  background-size: auto, auto, auto, auto;
}

.faq::before,
.faq::after {
  content: "?";
  position: absolute;
  font-family: "Caveat", cursive;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
}

.faq::before {
  top: -2rem;
  left: -1rem;
  font-size: clamp(13rem, 28vw, 27rem);
  rotate: -12deg;
}

.faq::after {
  right: -1rem;
  bottom: -5rem;
  font-size: clamp(11rem, 23vw, 22rem);
  rotate: 14deg;
}

.faq .container {
  position: relative;
  z-index: 1;
}

.faq__panel {
  position: relative;
}

.faq__head {
  max-width: 68ch;
  margin: 0 auto clamp(2rem, 5vw, 3.4rem);
  text-align: center;
}

.faq__head::before {
  content: "the useful fine print";
  display: block;
  width: fit-content;
  margin: 0 auto 0.7rem;
  font-family: "Caveat", cursive;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  color: #f2c765;
  rotate: -1.5deg;
}

.faq__title {
  font-size: clamp(2.25rem, 5vw, 3.8rem);
  line-height: 1;
  color: #fffaf0;
}

.faq__intro {
  max-width: 58ch;
  margin: 1rem auto 0;
  color: rgba(255, 250, 240, 0.76);
  font-size: 1.05rem;
}

/* Each answer is an index card, slightly offset like a card file. */
.faq__list {
  width: min(900px, calc(100% - clamp(0rem, 3vw, 2rem)));
  margin: 0 auto;
  display: grid;
  gap: 0.72rem;
}

.faq__item {
  --faq-tab: #e9b94d;
  position: relative;
  color: #29261f;
  background: #fffdf4;
  border-radius: 2px 5px 4px 2px;
  box-shadow:
    0 2px 2px rgba(3, 15, 10, 0.2),
    0 14px 24px -18px rgba(0, 0, 0, 0.8);
  overflow: visible;
  transition: box-shadow 0.2s ease;
}

.faq__item:nth-child(even) {
  --faq-tab: #76bca1;
}

.faq__item:nth-child(3n) {
  --faq-tab: #df8c60;
}

.faq__item:hover {
  box-shadow:
    0 3px 3px rgba(3, 15, 10, 0.2),
    0 20px 30px -20px rgba(0, 0, 0, 0.9);
}

.faq__item[open] {
  box-shadow:
    0 4px 5px rgba(3, 15, 10, 0.25),
    0 25px 40px -25px rgba(0, 0, 0, 0.9);
}

.faq__question {
  min-height: 4.25rem;
  padding: 1.05rem 4.25rem 1.05rem clamp(1.45rem, 3vw, 2.2rem);
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.1vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
  color: #1d1b17;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: "";
  position: absolute;
  top: 2.125rem;
  right: 1.3rem;
  width: 1.9rem;
  height: 1.9rem;
  translate: 0 -50%;
  border-radius: 50%;
  background-color: rgba(24, 91, 67, 0.1);
  background-image:
    linear-gradient(#185b43, #185b43),
    linear-gradient(#185b43, #185b43);
  background-position: center, center;
  background-size: 13px 2px, 2px 13px;
  background-repeat: no-repeat;
  transition: transform 0.22s ease, background-color 0.22s ease;
}

.faq__item[open] .faq__question::after {
  transform: rotate(45deg);
  background-color: color-mix(in srgb, var(--faq-tab) 36%, transparent);
}

.faq__answer {
  position: relative;
  padding: 0.25rem clamp(1.45rem, 3vw, 2.2rem) 1.5rem;
}

.faq__answer-text {
  color: #39352e;
  font-size: 1rem;
  line-height: 1.68;
}

/* Plain final CTA — the copy and button choices do the work here. */
.faq__cta-shell {
  width: min(900px, 100%);
  margin: clamp(3.25rem, 7vw, 4.75rem) auto 0;
  text-align: center;
}

.faq__cta-copy {
  max-width: 58ch;
  margin-inline: auto;
}

.faq__cta-title {
  font-size: clamp(1.65rem, 3.5vw, 2.35rem);
  line-height: 1.08;
  color: #fffaf0;
}

.faq__cta-body {
  margin-top: 0.7rem;
  color: rgba(255, 250, 240, 0.76);
}

.faq__cta {
  width: 100%;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.faq__cta .btn {
  min-width: 0;
  white-space: normal;
}

@media (max-width: 1200px) {
  .faq__list {
    width: calc(100% - 1.25rem);
  }

  .faq__cta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .faq__question {
    padding-right: 3.5rem;
  }

  .faq__question::after {
    right: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__item,
  .faq__question::after {
    transition: none;
  }
}