:root{
  --ink:#0b0f14; --muted:#6b7280; --accent:#16dd00; --bg:#ffffff;
  --stroke:rgba(0,0,0,.12);
  --radius:12px; --radius-lg:16px; --shadow:0 10px 28px rgba(0,0,0,.12);
}

/* Base helpers (safe) */
*{box-sizing:border-box}
body{background:#fff;color:var(--ink)}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}

/* =========================
   HERO (scoped)
   ========================= */
.faq-template .faq-hero{
  background:linear-gradient(173deg,#17c705 0%,#121810 .9%,#17c705 209%);
  color:#fff; padding:48px 0 56px;
}
.faq-template .faq-hero .container{
  width:var(--container); margin-inline:auto; padding:0 16px;
}
.faq-template .faq-hero h1{
  margin:0 0 10px; font-size:clamp(30px,4vw,48px);
  line-height:1.15; font-weight:900;
}
.faq-template .faq-hero p{
  margin:0; opacity:.95; max-width:720px;
}

/* =========================
   WRAP + CONTROLS (scoped)
   ========================= */
.faq-template .faq-wrap{
  width:var(--container); margin:24px auto 60px; padding:0 16px;
  display:grid; gap:16px;
}
.faq-template .controls{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  background:#fff; border:1px solid var(--stroke);
  border-radius:16px; padding:12px; box-shadow:var(--shadow);
}
.faq-template .search{
  flex:1 1 300px; display:flex; align-items:center; gap:8px;
  padding:10px 12px; border:1px solid var(--stroke); border-radius:10px; background:#fff;
}
.faq-template .search input{border:0; outline:0; background:transparent; width:100%}
.faq-template .btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 12px;
  border-radius:10px; font-weight:800; border:1px solid var(--stroke);
  background:#f8fafc; color:#111; cursor:pointer;
}

/* =========================
   FAQ Items (scoped)
   ========================= */
.faq-template .faq-group{display:grid; gap:10px}
.faq-template .group-title{
  display:flex; align-items:center; gap:10px; margin:0 0 6px;
  font-size:18px; font-weight:900; color:#132f0f;
}
.faq-template .dot{width:10px; height:10px; background:#16dd00; border-radius:999px}

.faq-template details.faq-item{
  background:#fff; border-radius:16px; border:1px solid var(--stroke); overflow:hidden;
}
.faq-template summary{
  list-style:none; display:flex; align-items:center; gap:12px;
  padding:16px 18px; cursor:pointer; background:#fff;
}
.faq-template summary::-webkit-details-marker{display:none}
.faq-template .q{font-weight:900; color:#111; flex:1; line-height:1.35}
.faq-template .caret{
  width:22px; height:22px; border-radius:6px; border:1px solid #d1d5db;
  display:grid; place-items:center; flex-shrink:0; transition:transform .2s ease;
}
.faq-template details[open] .caret{transform:rotate(180deg)}
.faq-template .a{
  padding:0 18px 18px; color:#0f172a; background:#fbfef9; border-top:1px dashed #cfeec6;
}
.faq-template .empty{
  padding:28px; border:2px dashed #d1fae5; border-radius:16px; text-align:center;
  color:#065f46; background:#ecfdf5; font-weight:700; display:none;
}

/* =========================
   Responsive (scoped)
   ========================= */

/* Tablet */
@media (max-width:1024px){
  .faq-template .faq-hero .container{display:grid; justify-items:start; row-gap:8px}
  .faq-template .faq-hero h1{font-size:clamp(28px,4.2vw,40px); line-height:1.18}
  .faq-template .faq-hero p{max-width:70ch}
}
@media (max-width:980px){
  .faq-template .faq-wrap{width:100%; margin:20px auto 50px; padding:0 12px}
  .faq-template .controls{flex-direction:column; align-items:stretch; gap:10px}
  .faq-template .search{flex:1 1 auto; width:100%}
  .faq-template .btn{width:100%; justify-content:center}
}

/* Mobile */
@media (max-width:640px){
  .faq-template .faq-hero{padding:clamp(22px,7vw,36px) 0; text-align:center}
  .faq-template .faq-hero .container{justify-items:center; text-align:center}
  .faq-template .faq-hero h1{font-size:clamp(24px,7vw,32px); word-break:break-word}
  .faq-template .faq-hero p{font-size:.95rem; max-width:60ch; margin-inline:auto}

  .faq-template summary{
    flex-direction:column; align-items:flex-start; gap:6px; padding:14px;
  }
  .faq-template .q{font-size:.95rem; font-weight:700}
  .faq-template .caret{align-self:flex-end}
  .faq-template .a{font-size:.95rem; line-height:1.5; padding:0 14px 14px}
}

/* Very small phones */
@media (max-width:400px){
  .faq-template .faq-wrap{gap:12px}
  .faq-template .controls{padding:10px; gap:8px}
  .faq-template .btn{font-size:.9rem; padding:8px 10px}
}
@media (max-width:390px){
  .faq-template .faq-hero h1{font-size:22px}
  .faq-template .faq-hero p{font-size:.93rem}
}

/* Nice focus animation (optional) */
@keyframes blink{
  0%,100%{box-shadow:0 0 0 0 rgba(22,221,0,0)}
  50%{box-shadow:0 0 0 6px rgba(22,221,0,.25)}
}
.faq-template .blink{animation:blink 1.1s ease 2}

/* If your site header is fixed, keep anchors visible */
.faq-template .faq-hero,
.faq-template .faq-wrap{scroll-margin-top:80px}