/* ================================================================
   FAQ — Numbered accordion
   Native <details>/<summary> with CSS grid animation trick.
   No JavaScript required.
================================================================ */

.hs-faq {
  background-color: var(--hs-color-bg-page);
  padding-block:    var(--hs-section-pad-y);
}

.hs-faq__header {
  text-align:    center;
  max-width:     var(--hs-container-md);
  margin-inline: auto;
  margin-bottom: var(--hs-space-14);
}

.hs-faq__eyebrow {
  display:        block;
  margin-bottom:  var(--hs-space-4);
  color:          var(--hs-color-text-accent);
  letter-spacing: var(--hs-tracking-wider);
}

.hs-faq__headline {
  font-family:    var(--hs-font-display);
  font-size:      var(--hs-text-section-h);
  font-weight:    var(--hs-font-extrabold);
  line-height:    var(--hs-leading-heading);
  letter-spacing: var(--hs-tracking-tight);
  color:          var(--hs-color-text-brand);
}

/* ── List ────────────────────────────────────────────────────── */

.hs-faq__list {
  max-width:     var(--hs-container-lg);
  margin-inline: auto;
  border-top:    var(--hs-border-1) solid var(--hs-color-border-subtle);
}

/* ── Each item ───────────────────────────────────────────────── */

.hs-faq__item {
  border-bottom: var(--hs-border-1) solid var(--hs-color-border-subtle);
}

.hs-faq__item[open] {
  border-bottom-color: var(--hs-color-border-default);
}

/* Remove default marker */
.hs-faq__item summary {
  list-style: none;
}
.hs-faq__item summary::-webkit-details-marker {
  display: none;
}

/* ── Question row ────────────────────────────────────────────── */

.hs-faq__q {
  display:     flex;
  align-items: baseline;
  gap:         var(--hs-space-5);
  padding:     var(--hs-space-6) 0;
  cursor:      pointer;
  user-select: none;
  transition:  color var(--hs-duration-fast) var(--hs-ease-out);
}

.hs-faq__q:hover .hs-faq__q-text {
  color: var(--hs-color-text-accent);
}

.hs-faq__num {
  font-family:    var(--hs-font-mono);
  font-size:      var(--hs-text-xs);
  font-weight:    var(--hs-font-bold);
  letter-spacing: var(--hs-tracking-widest);
  color:          var(--hs-color-text-accent);
  flex-shrink:    0;
  padding-top:    var(--hs-space-0-5);
}

.hs-faq__q-text {
  font-family:  var(--hs-font-display);
  font-size:    var(--hs-text-lg);
  font-weight:  var(--hs-font-semibold);
  line-height:  var(--hs-leading-snug);
  color:        var(--hs-color-text-brand);
  flex:         1;
  transition:   color var(--hs-duration-fast) var(--hs-ease-out);
}

.hs-faq__chevron {
  flex-shrink: 0;
  color:       var(--hs-color-text-tertiary);
  margin-left: auto;
  transition:  transform var(--hs-duration-normal) var(--hs-ease-out),
               color     var(--hs-duration-fast)   var(--hs-ease-out);
}

.hs-faq__item[open] .hs-faq__chevron {
  transform: rotate(-180deg);
  color:     var(--hs-color-text-accent);
}

/* ── Answer — CSS grid trick for smooth open/close ───────────── */

.hs-faq__a {
  display:              grid;
  grid-template-rows:   0fr;
  overflow:             hidden;
  transition:           grid-template-rows var(--hs-duration-slow) var(--hs-ease-out);
}

.hs-faq__item[open] .hs-faq__a {
  grid-template-rows: 1fr;
}

.hs-faq__a-inner {
  overflow: hidden;
}

.hs-faq__a-inner p {
  padding-bottom: var(--hs-space-6);
  padding-left:   calc(var(--hs-text-xs) * 3 + var(--hs-space-5));
  font-family:    var(--hs-font-body);
  font-size:      var(--hs-text-base);
  line-height:    var(--hs-leading-relaxed);
  color:          var(--hs-color-text-secondary);
  max-width:      68ch;
  margin:         0;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 640px) {
  .hs-faq__q {
    gap: var(--hs-space-3);
  }

  .hs-faq__q-text {
    font-size: var(--hs-text-base);
  }

  .hs-faq__a-inner p {
    padding-left: 0;
  }
}