/* =====================================================================
   faq.css — FAQs page. Requires common.css first.
   Hero (.pr-hero) + accordion (.faq-item/.faq-q/.faq-a) come from common.css;
   this only carries the role tabs and the panel switching.
   ===================================================================== */

/* ---- ROLE TABS (overlap the hero) ---- */
.pr-tabwrap{position:relative;margin-top: -63px;z-index:5;}
.pr-tabs{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.16);overflow:hidden;}
.pr-tab{width:100%;height:100%;background:none;border:none;border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:.6rem;padding:1.15rem 1.4rem;font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--muted);cursor:pointer;transition:.15s;justify-content: space-between;}
.pr-tabs > div:last-child .pr-tab{border-right:none;}
.pr-tab .ic{font-size:1.5rem;line-height:1;}
.pr-tab:hover{color:var(--ink);background:#f8faff;}
.pr-tab.on{color:var(--blue);background:#f4f7ff;box-shadow:inset 0 -3px 0 var(--blue);}

/* ---- FAQ SECTION ---- */
.faq-page{padding:70px 0;}
.faq-head{text-align:center;margin-bottom:2.6rem;}
.faq-panel{display:none;max-width:820px;margin:0 auto;}
.faq-panel.on{display:block;}
.faq-cat{font-family:var(--font-display);font-size:1.15rem;font-weight:800;color:var(--blue);margin:2rem 0 .3rem;}
.faq-cat.first{margin-top:0;}

/* ---- CTA ---- */
.faq-cta{text-align:center;margin-top:3rem;}
.faq-cta p{color:var(--muted);font-size:.95rem;margin:0 0 1rem;}

@media (max-width:767.98px){
  .pr-tabwrap{margin-top:-40px;}
  .pr-tab{border-right:none;border-bottom:1px solid var(--line);padding:.95rem 1rem;font-size:.88rem;}
}