@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap');

body.faq-page{
  margin:0;
  min-height:100vh;
  background:#9bd4e4;
  color:#10233f;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.faq-main{
  padding:0 18px 78px;
}

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

.faq-hero{
  width:100vw;
  margin:0 0 24px calc(50% - 50vw);
  padding:24px 18px;
  box-sizing:border-box;
  background:#042698;
  text-align:center;
}

.faq-hero h1{
  margin:0;
  color:#fdfee9;
  font-size:clamp(2.7rem, 5vw, 4.6rem);
  line-height:1;
  font-family:"Racing Sans One", system-ui, sans-serif;
  font-weight:400;
}

.faq-hero p{
  margin:8px 0 0;
  color:#183a63;
  font-size:1.08rem;
  font-weight:800;
}

.faq-list{
  display:grid;
  gap:10px;
}

.faq-item{
  border:1px solid rgba(24,58,99,.2);
  border-radius:12px;
  background:#fff;
  box-shadow:0 8px 18px rgba(9,26,52,.06);
  overflow:hidden;
}

.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:16px 18px;
  color:#183a63;
  font-weight:800;
  line-height:1.25;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

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

.faq-item summary::after{
  content:"";
  flex:0 0 auto;
  width:.62rem;
  height:.62rem;
  margin-right:.2rem;
  border-right:2.5px solid #042698;
  border-bottom:2.5px solid #042698;
  transform:rotate(45deg) translateY(-2px);
  transform-origin:center;
  transition:transform .2s ease;
}

.faq-item[open] summary::after{
  transform:rotate(225deg) translate(-2px,-2px);
}

.faq-item p{
  margin:0;
  padding:0 18px 17px;
  color:#263955;
  line-height:1.6;
}

@media (max-width:700px){
  .faq-main{
    padding:0 12px 56px;
  }

  .faq-hero{
    margin-bottom:18px;
    padding:20px 12px;
  }

  .faq-item summary{
    padding:15px 16px;
    font-size:.98rem;
  }

  .faq-item p{
    padding:0 16px 16px;
  }
}