/* NESkills v198 — site-wide premium FAQ system */
:root{
  --nx198-faq-ink:#0a1b33;
  --nx198-faq-copy:#526174;
  --nx198-faq-accent:#0f7694;
  --nx198-faq-border:rgba(6,19,38,.11);
  --nx198-faq-border-active:rgba(15,118,148,.34);
  --nx198-faq-surface:rgba(255,255,255,.88);
  --nx198-faq-shadow:0 10px 28px rgba(6,19,38,.055);
  --nx198-faq-shadow-active:0 16px 38px rgba(6,19,38,.085);
}

/* Keep FAQ blocks editorial and restrained across the site. */
body:not(.homepage) main > section[class*="faq"]{
  padding-top:clamp(64px,6vw,82px)!important;
  padding-bottom:clamp(64px,6vw,82px)!important;
}

main section[class*="faq"] [class*="faq-grid"]{
  gap:clamp(38px,5vw,64px)!important;
}

body:not(.homepage) main section[class*="faq"] [class*="faq-intro"] h2{
  margin-top:10px!important;
  font-size:clamp(2rem,3.25vw,3.25rem)!important;
  line-height:1.02!important;
  letter-spacing:-.04em!important;
}

/* Keep every native FAQ consistent without touching navigation <details>. */
main section[class*="faq"] details{
  margin:10px 0!important;
  padding:0!important;
  overflow:hidden;
  border:1px solid var(--nx198-faq-border)!important;
  border-radius:17px!important;
  background:var(--nx198-faq-surface)!important;
  box-shadow:var(--nx198-faq-shadow)!important;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background-color .2s ease;
}

main section[class*="faq"] details:first-child{margin-top:0!important}
main section[class*="faq"] details:last-child{margin-bottom:0!important}

main section[class*="faq"] details:hover{
  border-color:rgba(15,118,148,.23)!important;
  box-shadow:0 13px 32px rgba(6,19,38,.07)!important;
}

main section[class*="faq"] details[open]{
  border-color:var(--nx198-faq-border-active)!important;
  background:#fff!important;
  box-shadow:var(--nx198-faq-shadow-active)!important;
}

main section[class*="faq"] details > summary{
  position:relative!important;
  display:block!important;
  min-height:0!important;
  margin:0!important;
  padding:18px 64px 18px 21px!important;
  color:var(--nx198-faq-ink)!important;
  font-family:inherit!important;
  font-size:clamp(1rem,1.18vw,1.09rem)!important;
  font-weight:800!important;
  line-height:1.38!important;
  letter-spacing:-.012em!important;
  list-style:none!important;
  cursor:pointer;
  text-wrap:pretty;
  -webkit-tap-highlight-color:transparent;
}

main section[class*="faq"] details > summary::-webkit-details-marker{display:none!important}
main section[class*="faq"] details > summary::marker{content:""!important}

/* Refined plus/minus control built from CSS lines. */
main section[class*="faq"] details > summary::before{
  content:"";
  position:absolute;
  top:50%;
  right:17px;
  width:31px;
  height:31px;
  border:1px solid rgba(15,118,148,.19);
  border-radius:50%;
  background:#f5fafb;
  transform:translateY(-50%);
  transition:border-color .2s ease,background-color .2s ease;
}

main section[class*="faq"] details > summary::after{
  content:""!important;
  position:absolute!important;
  top:50%!important;
  right:26px!important;
  width:13px!important;
  height:13px!important;
  color:var(--nx198-faq-accent)!important;
  background:
    linear-gradient(currentColor,currentColor) 50% 50%/13px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) 50% 50%/1.5px 13px no-repeat!important;
  transform:translateY(-50%) rotate(0deg)!important;
  transition:transform .22s ease,background-size .22s ease!important;
}

main section[class*="faq"] details[open] > summary::before{
  border-color:rgba(15,118,148,.32);
  background:#eaf5f7;
}

main section[class*="faq"] details[open] > summary::after{
  background-size:13px 1.5px,0 0!important;
  transform:translateY(-50%) rotate(180deg)!important;
}

main section[class*="faq"] details > summary:focus-visible{
  outline:3px solid rgba(15,118,148,.23)!important;
  outline-offset:-3px!important;
  border-radius:15px!important;
}

main section[class*="faq"] details > :not(summary){
  max-width:72ch;
  margin:0!important;
  padding:0 21px 20px!important;
  color:var(--nx198-faq-copy)!important;
  font-size:.96rem!important;
  line-height:1.66!important;
}

/* Neutralise page-specific sticky FAQ headings where they feel oversized. */
main section[class*="faq"] [class*="faq-intro"]{
  align-self:start;
}

@media (min-width:768px){
  main section[class*="faq"] [class*="faq-grid"]{
    align-items:start!important;
  }
}

@media (max-width:767px){
  /* FAQ sections should be concise on phones, not full-screen slabs. */
  body:not(.homepage) main > section[class*="faq"]{
    padding-top:44px!important;
    padding-bottom:46px!important;
  }

  main section[class*="faq"] [class*="faq-grid"]{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:18px!important;
  }

  main section[class*="faq"] [class*="faq-intro"]{
    position:static!important;
    top:auto!important;
    margin:0!important;
  }

  main section[class*="faq"] [class*="faq-intro"] .eyebrow{
    margin-bottom:0!important;
    font-size:.67rem!important;
  }

  body:not(.homepage) main section[class*="faq"] [class*="faq-intro"] h2{
    max-width:16ch!important;
    margin-top:7px!important;
    font-size:clamp(1.7rem,7.6vw,2.08rem)!important;
    line-height:1.06!important;
    letter-spacing:-.035em!important;
  }

  main section[class*="faq"] details{
    margin:7px 0!important;
    border-radius:14px!important;
    box-shadow:0 6px 18px rgba(6,19,38,.045)!important;
  }

  main section[class*="faq"] details:hover{
    transform:none!important;
  }

  main section[class*="faq"] details > summary{
    padding:14px 49px 14px 15px!important;
    font-size:.96rem!important;
    line-height:1.36!important;
    letter-spacing:-.008em!important;
  }

  main section[class*="faq"] details > summary::before{
    right:12px;
    width:27px;
    height:27px;
  }

  main section[class*="faq"] details > summary::after{
    right:19px!important;
    width:13px!important;
    height:13px!important;
  }

  main section[class*="faq"] details > :not(summary){
    padding:0 15px 15px!important;
    font-size:.875rem!important;
    line-height:1.56!important;
  }
}

@media (max-width:370px){
  main section[class*="faq"] details > summary{
    padding-left:14px!important;
    padding-right:46px!important;
    font-size:.92rem!important;
  }

  main section[class*="faq"] details > :not(summary){
    padding-left:14px!important;
    padding-right:14px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  main section[class*="faq"] details,
  main section[class*="faq"] details > summary::before,
  main section[class*="faq"] details > summary::after{
    transition:none!important;
  }
}
