.section_faq-bouncy {
  overflow: clip;
}

.hvo-faq-head {
  display: flex;
  width: 100%;
  max-width: 49rem;
  margin-inline: auto;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hvo-faq-intro {
  max-width: 35rem;
}

.hvo-skiper103-stage {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
}

#hvo-faq-skiper103 {
  width: 100%;
  min-height: 24rem;
}

.hvo-faq-list {
  width: 100%;
  padding: 0.5rem;
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--bg-color--bg-white, #fff);
  box-shadow: 0 1rem 3rem rgba(21, 21, 21, 0.07);
}

.hvo-faq-item {
  border-radius: 1.125rem;
  color: var(--text-color--text-primary, #151515);
  transition: background-color 220ms ease,
    margin 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hvo-faq-item + .hvo-faq-item {
  border-top: 1px solid rgba(21, 21, 21, 0.07);
}

.hvo-faq-item.is-open {
  margin-block: 0.25rem;
  /* Was an 11% lime wash; Mena 2026-08-29: "I don't like the green tint on
     the expanded faq selection". The open item now separates by the same
     neutral hover tone the closed items already use, so open reads as
     "settled hover" instead of a new colour. Dark mode had its own neutral
     already (the .045 white wash below) and is untouched. */
  background: rgba(21, 21, 21, 0.035);
}

/* The lime wash it replaced worked in both themes; a dark ink wash does not,
   so dark gets the same white wash its hover already uses. */
html[data-theme="dark"] .hvo-faq-item.is-open {
  background: rgba(255, 255, 255, 0.045);
}

.hvo-faq-question-heading {
  margin: 0;
  font: inherit;
}

.hvo-faq-question {
  display: flex;
  width: 100%;
  min-height: 4rem;
  padding: 0.75rem 1.125rem;
  border: 0;
  border-radius: 1.125rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.035em;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hvo-faq-question:focus-visible {
  outline: 2px solid var(--base--purple, #772afa);
  outline-offset: -3px;
}

.hvo-faq-question svg {
  flex: 0 0 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hvo-faq-question[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.hvo-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 360ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease;
}

.hvo-faq-answer[aria-hidden="false"] {
  grid-template-rows: 1fr;
  opacity: 1;
}

.hvo-faq-answer-clip {
  min-height: 0;
  overflow: hidden;
}

.hvo-faq-answer p {
  max-width: 65ch;
  margin: 0;
  padding: 0 3.5rem 1rem 1.125rem;
  color: var(--text-color--text-secondary);
  font-size: 1rem;
  line-height: 1.55;
}

html[data-theme="dark"] .hvo-faq-list {
  background: var(--bg-color--bg-white, #232323);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] .hvo-faq-item + .hvo-faq-item {
  border-top-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .hvo-faq-answer p {
  color: var(--base--green, #d6fd70);
}

@media (hover: hover) {
  .hvo-faq-question:hover {
    background: rgba(21, 21, 21, 0.035);
  }

  html[data-theme="dark"] .hvo-faq-question:hover {
    background: rgba(255, 255, 255, 0.045);
  }
}

@media (max-width: 767px) {
  #hvo-faq-skiper103 {
    min-height: 22.25rem;
  }

  .hvo-faq-list {
    padding: 0.375rem;
    border-radius: 1.25rem;
  }

  .hvo-faq-question {
    min-height: 3.75rem;
    padding: 0.7rem 0.875rem;
    gap: 0.75rem;
    font-size: 1rem;
  }

  .hvo-faq-answer p {
    padding: 0 2.75rem 0.875rem 0.875rem;
    font-size: 0.9375rem;
    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hvo-faq-item,
  .hvo-faq-question svg,
  .hvo-faq-answer {
    transition-duration: 0.01ms !important;
  }
}