.faq-explorer{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  margin-top:30px;
  padding:14px 16px;
  border:1px solid rgba(246,239,227,.13);
  border-radius:14px;
  background:rgba(246,239,227,.035);
}

.faq-explorer>span{
  color:var(--sand);
  font-family:var(--f-d);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

.faq-explorer>div{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.faq-explorer button{
  min-height:36px;
  padding:8px 13px;
  border:1px solid rgba(246,239,227,.16);
  border-radius:999px;
  background:rgba(3,27,35,.48);
  color:var(--td);
  font:600 .76rem/1 var(--f-d);
  cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s,transform .2s;
}

.faq-explorer button:hover{
  border-color:rgba(245,158,59,.55);
  color:var(--sand);
  transform:translateY(-1px);
}

.faq-explorer button[aria-pressed="true"]{
  border-color:var(--amber);
  background:var(--amber);
  color:var(--deep);
}

.faq-explorer button:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

.faq-explorer p{
  margin:0;
  color:var(--td);
  font-size:.72rem;
  white-space:nowrap;
}

.faqg details{
  position:relative;
}

.faqg details.is-faq-entering{
  animation:faq-enter .34s ease both;
}

.faqg details[hidden]{
  display:none!important;
}

@keyframes faq-enter{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width:860px){
  .faq-explorer{
    grid-template-columns:1fr;
    gap:11px;
  }

  .faq-explorer p{
    white-space:normal;
  }
}

@media (max-width:560px){
  .faq-explorer>div{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .faq-explorer button{
    width:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  .faq-explorer button,
  .faqg details.is-faq-entering{
    transition:none;
    animation:none;
  }
}