.ht-faq-box{
  margin-top:24px;
  padding:16px 18px;
  border-radius:var(--radius);
  background:#ffffff;
  border:1px solid var(--border);
}

.ht-single__main .ht-faq-box{
  margin-top:24px;
}

.ht-faq-box__head{
  margin:0 0 14px;
  font-size:var(--h3);
  font-weight:600;
  color:var(--fg);
}

html[data-theme="dark"] .ht-faq-box{
  background:var(--surface-2);
  border-color:var(--border);
}

.ht-faq{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.ht-faq__item{
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:transparent;
  overflow:hidden;
  transition:border-color .15s ease,background-color .15s ease;
}

html[data-theme="dark"] .ht-faq__item{
  background:var(--surface);
  border-color:color-mix(in oklab,var(--border),transparent 20%);
}

.ht-faq__item[open]{
  border-color:var(--brand-500);
}

html[data-theme="dark"] .ht-faq__item[open]{
  border-color:var(--brand-300);
}

.ht-faq__q{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 12px;
  font-size:14px;
  font-weight:500;
  color:var(--fg);
  cursor:pointer;
  list-style:none;
}

.ht-faq__q::-webkit-details-marker{
  display:none;
}

.ht-faq__q-icon{
  flex:0 0 auto;
  inline-size:26px;
  block-size:26px;
  border-radius:50%;
  background:var(--bg);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
}

.ht-faq__q-icon svg{
  inline-size:14px;
  block-size:14px;
  stroke:var(--muted);
  stroke-width:2;
  fill:none;
  transform-origin:50% 50%;
  transition:transform .16s ease,stroke .16s ease;
}

.ht-faq__q-text{
  flex:1 1 auto;
}

.ht-faq__item[open] .ht-faq__q{
  color:var(--brand-700);
}

html[data-theme="dark"] .ht-faq__item[open] .ht-faq__q{
  color:var(--brand-300);
}

.ht-faq__item[open] .ht-faq__q-icon svg{
  transform:rotate(180deg);
  stroke:var(--brand-500);
}

html[data-theme="dark"] .ht-faq__item[open] .ht-faq__q-icon svg{
  stroke:var(--brand-300);
}

.ht-faq__q:focus-visible{
  outline:2px solid var(--brand-500);
  outline-offset:3px;
}

.ht-faq__a{
  padding:0 12px 12px 12px;
  font-size:14px;
  color:var(--muted);
}

.ht-faq__a p{
  margin:0 0 .7em;
}

.ht-faq__a p:last-child{
  margin-bottom:0;
}

.ht-faq__a ul,
.ht-faq__a ol{
  margin:.5em 0;
  padding-inline-start:1.4em;
}

@media(max-width:768px){
  .ht-faq-box{
    padding:14px 12px;
    border-radius:var(--radius-sm);
  }

  .ht-faq__q{
    padding:10px;
    font-size:13px;
  }

  .ht-faq__a{
    padding:0 10px 10px 10px;
    font-size:13px;
  }
}