/* ===================== FAQ (no Bootstrap) ===================== */
:root{
  --rx-green:#1a841a;
  --rx-green-2:#20c997;
  --ink:#111827;
  --muted:#6b7280;
  --soft:#f6f8f7;
  --paper:#fff;
  --ring:0 1px 2px rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
img{max-width:100%;display:block}
a{color:var(--rx-green);text-decoration:none}
a:hover{text-decoration:underline}

.fq-container{width:min(1200px,92vw);margin-inline:auto;padding:0 0}

.fq-breadcrumb svg{ width:16px; height:16px; opacity:.8 }

/* ===== Hero ===== */
.fq-hero{position:relative; isolation:isolate; overflow:hidden; padding:86px 0 76px; color:#fff}
.fq-hero__bg{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.05)}
.fq-hero__mask{position:absolute; inset:0; background:linear-gradient(120deg,rgba(0,0,0,.55),rgba(0,0,0,.35))}
.fq-hero__content{position:relative; z-index:2; text-align:center}
.fq-hero__title{font:800 clamp(30px,6vw,58px)/1.06 system-ui,Segoe UI,Roboto,sans-serif; margin:0 0 8px}
.fq-dot{color:var(--rx-green)}
.fq-breadcrumb{display:flex; gap:8px; align-items:center; justify-content:center; margin-top:8px; opacity:.9}
.fq-breadcrumb a{color:#fff; font-weight:800}
.fq-breadcrumb svg{width:16px;height:16px; opacity:.8}
.fq-breadcrumb .current{opacity:.85}

/* ===== Section head ===== */
.fq{padding:56px 0; background:#fff}
.fq-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.fq-title{font:800 clamp(22px,3vw,30px)/1.2 system-ui,Segoe UI,Roboto,sans-serif; color:var(--ink); margin:0}
.fq-actions{display:flex; gap:8px; flex-wrap:wrap}
.fq-btn{appearance:none;border:1px solid rgba(0,0,0,.08); background:#fff; border-radius:10px; padding:8px 12px; font-weight:800; color:#1f2937; box-shadow:0 1px 2px rgba(0,0,0,.06); cursor:pointer; transition:.15s}
.fq-btn:hover{transform:translateY(-1px)}
.fq-btn--ghost{background:#f8fafc}

/* ===== Grid ===== */
.fq-grid{display:grid; gap:16px; grid-template-columns:repeat(12,1fr)}
.fq-col{grid-column:span 6}
@media (max-width: 900px){ .fq-col{grid-column:span 12} }

/* ===== Accordion ===== */
.fq-acc{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.fq-item{
  background:var(--paper); border:1px solid rgba(0,0,0,.06); border-radius:14px;
  box-shadow:var(--ring); overflow:hidden;
}
.fq-q{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  padding:14px 14px; background:#fff; border:0; cursor:pointer; text-align:left;
  font-weight:800; color:var(--ink); outline-offset:3px; position:relative;
}
.fq-q__num{
  inline-size:28px; block-size:28px; border-radius:8px; display:grid; place-items:center;
  background:rgba(26,132,26,.08); color:var(--rx-green); font-size:13px; font-weight:800;
}
.fq-q__txt{line-height:1.3}
.fq-q__ico{
  width:22px;height:22px; border-radius:6px; display:grid; place-items:center; position:relative;
}
.fq-q__ico::before, .fq-q__ico::after{
  content:""; position:absolute; background:currentColor; left:50%; top:50%; transform:translate(-50%,-50%);
}
.fq-q__ico::before{ width:14px; height:2px; }
.fq-q__ico::after{ width:2px; height:14px; transition:.2s }
.fq-item.is-open .fq-q__ico::after{ transform:translate(-50%,-50%) scaleY(0); }

/* Answer (animated height) */
.fq-a{
  height:0; overflow:hidden; transition:height .26s ease;
  background:#fafafa; border-top:1px solid rgba(0,0,0,.06);
}
.fq-a__in{ padding:12px 14px; color:#374151; }
.fq-item.is-open .fq-a{ /* height set via JS for smooth transition */ }

/* Small helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

@media (max-width:768px){ .fq-hero{padding:74px 0 64px} }