/* FAQ page - questions bar and club owners actually ask, grouped by topic.
   Each answer is a native <details> so the full text is in the HTML for
   search engines and AI crawlers, and opens without JavaScript. */

.faq{background:
  radial-gradient(ellipse 45% 18% at 88% 6%,rgba(177,58,242,.2),transparent 70%),
  radial-gradient(ellipse 40% 14% at 8% 40%,rgba(0,191,212,.09),transparent 70%),
  radial-gradient(ellipse 50% 12% at 50% 94%,rgba(204,0,204,.16),transparent 70%),
  var(--ink)}
.faq .cl-crumbs,.faq__inner{max-width:calc(920px + 2 * var(--gutter))}
.faq__inner{padding-top:56px;padding-bottom:120px}

.faq__title{font:400 clamp(40px,5vw,64px)/1.04 var(--font-display);color:#fff;text-wrap:balance}
.faq__underline{margin-top:20px;width:96px;height:6px;border-radius:3px;background:#F2FFFE;
  box-shadow:0 0 6px #00F5D4,0 0 16px #00BFD4,0 0 32px rgba(0,191,212,.6)}
.faq__lead{margin-top:28px;max-width:720px;font:400 17px/1.65 var(--font-body);color:rgba(255,255,255,.76);text-wrap:pretty}

/* Topic jump links */
.faq__toc{margin:40px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.faq__toc a{display:inline-block;padding:8px 14px;border-radius:999px;font:700 13px/1.2 var(--font-body);letter-spacing:.4px;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.faq__toc a:hover{color:#fff;border-color:var(--cyan);background:rgba(0,191,212,.12)}

/* Topic groups */
.faq__group{margin-top:72px;scroll-margin-top:96px}
.faq__group-title{font:400 clamp(26px,3vw,34px)/1.1 var(--font-display);color:#fff;text-wrap:balance}
.faq__group-intro{margin-top:10px;font:400 15px/1.6 var(--font-body);color:var(--muted)}
.faq__list{margin-top:24px;display:flex;flex-direction:column;gap:12px}

/* One question: a faceplate that opens into a paper answer */
.faq__item{border-radius:14px;overflow:hidden}
.faq__item > summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;padding:18px 20px;-webkit-tap-highlight-color:transparent}
.faq__item > summary::-webkit-details-marker{display:none}
.faq__q{flex:1;font:700 17px/1.4 var(--font-body);color:#fff;text-shadow:var(--engrave)}
.faq__icon{flex:none;position:relative;width:26px;height:26px;margin-top:-1px;border-radius:50%;
  background:rgba(0,0,0,.35);box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.12)}
.faq__icon::before,.faq__icon::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:1px;
  background:var(--neon-cyan);box-shadow:0 0 6px rgba(0,245,212,.7);transition:transform .2s ease}
.faq__icon::after{transform:rotate(90deg)}
.faq__item[open] .faq__icon::after{transform:rotate(0)}
.faq__item > summary:hover .faq__q{color:var(--cyan-hover)}
.faq__a{padding:4px 20px 22px;font:400 16px/1.7 var(--font-body);color:rgba(255,255,255,.8)}
.faq__a p + p,.faq__a p + ul,.faq__a ul + p{margin-top:12px}
.faq__a ul{margin:12px 0 0;padding-left:20px}
.faq__a li + li{margin-top:6px}
.faq__a strong{color:#fff}

/* Closing call to action */
.faq__cta{margin-top:100px;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.faq__cta-title{font:400 clamp(28px,3.6vw,42px)/1.08 var(--font-display);color:#fff;text-wrap:balance}
.faq__cta-body{max-width:560px;font:400 16px/1.6 var(--font-body);color:rgba(255,255,255,.76)}
.faq__cta-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}

@media (max-width:599px){
  .faq__inner{padding-top:36px}
  .faq__q{font-size:16px}
  .faq__item > summary{padding:16px}
  .faq__a{padding:2px 16px 18px;font-size:15px}
}