@charset "utf-8";
/* ====== HP4U FAQ====== */
:root{
  --hp4u-faq-maxw: 100%;
  --hp4u-faq-gap: .75rem;

  --hp4u-faq-border: var(--hp4u-color-border, #E6E8EC);
  --hp4u-faq-radius: 14px;
  --hp4u-faq-focus: var(--hp4u-accent, #5ecb00);

  --hp4u-faq-q: var(--hp4u-color-text, #1b4259);
  --hp4u-faq-q-open: var(--hp4u-ui-hairline, #5ecb00);
  --hp4u-faq-a: var(--hp4u-color-subtle, #374151);

  --hp4u-faq-title-bg: var(--hp4u-surface-2, #FAFBFC);
  --hp4u-faq-title-bg-open: var(--hp4u-surface-5, #FFFFFF);
  --hp4u-faq-title-bg-hover: color-mix(in srgb, var(--hp4u-surface-2, #FAFBFC), white 6%);
  --hp4u-faq-panel-bg: var(--hp4u-surface-1, #FFFFFF);

  --hp4u-faq-open-dur: 300ms;

  --hp4u-faq-close-dur: 280ms;

  --hp4u-faq-anim-ease: cubic-bezier(.33,.06,.19,.99);
	--hp4u-faq-panel-pad-inline: calc(
    var(--hp4u-section-pad)                  /* P */
    + var(--hp4u-icon-arrow-size)                      /* S */
    + calc(var(--hp4u-icon-arrow-gap) + 3px)        /* G */
  );
}

.hp4u-faq{ max-width:var(--hp4u-faq-maxw); margin:2rem auto; }
.hp4u-faq-title{ text-align:center; margin:0 0 1rem 0; }

.hp4u-faq-list{
  margin: 0!important; padding:0;
  display: flex; flex-direction:column; gap:var(--hp4u-faq-gap);
  list-style: none!important;
}

.hp4u-faq-item{
  border: 0 solid var(--hp4u-faq-border);
  border-radius: var(--hp4u-faq-radius);
  overflow: hidden;
  background: var(--hp4u-faq-panel-bg);

  scroll-margin-top: var(--hp4u-faq-scroll-margin, 80px);
}

.hp4u-faq-q{ margin:0; }
.hp4u-faq-item h3{ font-family:var(--hp4u-font-family)!important; 
font-size:var(--hp4u-step-2)!important;
line-height: var(--hp4u-lh-head)!important;  letter-spacing: var(--hp4u-trk-tight);
	font-weight:var(--hp4u-font-weight-kicker)!important;

} 

.hp4u-faq-toggle{
  display: block; width:100%; text-align:center;
  padding: 1rem 1.125rem; background:var(--hp4u-faq-title-bg); border:0; cursor:pointer;
  color: var(--hp4u-faq-q);
	 font-weight: var(--hp4u-font-weight-medium)!important;
}
/* .hp4u-faq-toggle:hover{ background:var(--hp4u-faq-title-bg-hover); }*/
.hp4u-faq-item.is-open .hp4u-faq-toggle{ color:var(--hp4u-faq-q-open);}
.hp4u-faq-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--hp4u-faq-focus);
  border-radius: 8px;
}
.hp4u-faq-item.is-open  h3, .hp4u-faq-item.is-open .hp4u-faq-toggle {
    font-weight: 700 !important;
}
/* ===== Panel animation (classic) =====
   We animate max-height + opacity. Spacing lives on the inner wrapper to avoid margin “pops”. */
.hp4u-faq-panel{
  max-height: 0;

  opacity: 0;
  overflow: hidden;
  padding: 0;

  transition:
    max-height var(--hp4u-faq-open-dur) var(--hp4u-faq-anim-ease), 
    opacity var(--hp4u-faq-open-dur) linear;
  will-change: max-height, opacity;
}

.hp4u-faq-panel-inner{
  overflow: visible;
  min-height: 0;
  padding: 0 1.125rem 0;

  color: var(--hp4u-faq-a);
}

.hp4u-faq-item.is-open .hp4u-faq-panel{ opacity:1; }
.hp4u-faq-item.is-open .hp4u-faq-panel-inner{ padding-bottom:1rem; }

.hp4u-faq-panel-inner :is(p, ul, ol, dl):first-child{ margin-top:1rem; }
.hp4u-faq-panel-inner :is(p, ul, ol, dl):last-child{ margin-bottom:0; }

@media (prefers-reduced-motion: reduce){
  .hp4u-faq-panel{ transition:none !important; }
}