/* ==========================================================
   RONIN: SLASHDOWN v3.3.0
   FAQ // WARPATH INTELLIGENCE
========================================================== */

.faq-screen{
  padding-bottom:48px;
}

.faq-shell{
  width:min(1000px,100%);
  margin:0 auto;
}

.faq-intro{
  margin:0 0 22px;
  padding:20px 22px;
  border:1px solid rgba(0,230,255,.14);
  border-radius:16px;
  background:
    radial-gradient(circle at 100% 0,rgba(255,35,102,.09),transparent 35%),
    linear-gradient(145deg,rgba(5,18,30,.9),rgba(7,10,18,.94));
}

.faq-intro small{
  display:block;
  margin-bottom:7px;
  color:#22e9f3;
  font-size:9px;
  font-weight:900;
  letter-spacing:.24em;
}

.faq-intro h3{
  margin:0 0 8px;
  color:#fff;
  font-size:clamp(20px,3vw,28px);
}

.faq-intro p{
  margin:0;
  color:#9ab1c0;
  line-height:1.7;
}

.faq-group{
  margin-top:26px;
}

.faq-group-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
  color:#ff477c;
  font-size:10px;
  font-weight:900;
  letter-spacing:.2em;
}

.faq-group-title::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(255,55,112,.35),
    transparent
  );
}

.faq-item{
  margin:8px 0;
  overflow:hidden;
  border:1px solid rgba(0,221,255,.11);
  border-radius:13px;
  background:rgba(4,14,24,.82);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.faq-item:hover{
  border-color:rgba(0,226,255,.28);
}

.faq-item[open]{
  border-color:rgba(255,50,111,.28);
  box-shadow:
    0 12px 32px rgba(0,0,0,.19),
    inset 0 1px rgba(255,255,255,.02);
}

.faq-item summary{
  position:relative;
  display:flex;
  align-items:center;
  min-height:56px;
  padding:15px 52px 15px 18px;
  color:#f5fbff;
  cursor:pointer;
  list-style:none;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  user-select:none;
}

.faq-item summary::-webkit-details-marker{
  display:none;
}

.faq-item summary::after{
  content:"+";
  position:absolute;
  right:18px;
  top:50%;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  border:1px solid rgba(0,225,255,.22);
  border-radius:50%;
  color:#22eaf3;
  font-size:18px;
  line-height:1;
  transition:transform .2s ease;
}

.faq-item[open] summary::after{
  content:"−";
  transform:translateY(-50%) rotate(180deg);
  color:#ff527e;
  border-color:rgba(255,60,119,.3);
}

.faq-answer{
  padding:0 18px 18px;
  color:#9db2c0;
  font-size:12px;
  line-height:1.75;
}

.faq-answer p{
  margin:0 0 10px;
}

.faq-answer p:last-child{
  margin-bottom:0;
}

.faq-answer strong{
  color:#edfaff;
}

.faq-answer ul{
  margin:8px 0 4px;
  padding-left:20px;
}

.faq-answer li{
  margin:5px 0;
}

.faq-answer .faq-command{
  color:#2eeaf2;
  font-weight:900;
}

.faq-official{
  margin-top:28px;
  padding:19px 20px;
  border:1px solid rgba(255,49,107,.23);
  border-radius:14px;
  background:
    linear-gradient(135deg,rgba(255,32,99,.06),rgba(1,13,23,.88));
}

.faq-official strong{
  display:block;
  margin-bottom:8px;
  color:#fff;
}

.faq-official p{
  margin:0;
  color:#8fa7b7;
  line-height:1.65;
}

@media(max-width:900px){

  .faq-screen{
    padding-bottom:90px;
  }

  .faq-intro{
    padding:17px;
  }

  .faq-item summary{
    min-height:52px;
    padding:14px 47px 14px 15px;
    font-size:11px;
  }

  .faq-answer{
    padding:0 15px 16px;
  }
}
