:root{
    --bg:#fff;
    --card:#f7f8fa;
    --text:#111;
    --muted:#6b7280;
    --ring:rgba(14,165,233,.35);
    --radius:12px;
    --speed:.25s;
  }
  .wrapper_qa {
    font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    line-height:1.7;
    color:var(--text);
    background:var(--bg);
    margin:0;
    margin-bottom: 50px;
    /* padding:24px; */
  }
  /* body{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.7;
        color:var(--text);background:var(--bg);margin:0;padding:24px} */
/* ===== 2) Wrapper & Headings ===== */
.faq{
  max-width: var(--faq-max);
  margin-inline: auto;
}

.faq h1{
  font-size: clamp(20px, 3vw, 28px);
  margin: 0 0 12px;
}

.faq p.lead{
  color: var(--muted);
  margin: 0 0 24px;
}

/* ===== 3) Accordion Layout ===== */
.accordion_qa{
  display: grid;
  gap: var(--faq-gap);
}
/* .accordion{
  display: grid;
  gap: var(--faq-gap);
} */

/* ===== 4) Item (card) ===== */
.item{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ===== 5) Header (trigger button) ===== */
.hdr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  width: 100%;
  padding: 16px 18px;

  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.hdr:hover{
  background: var(--hover);
}

.hdr:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: calc(var(--radius) - 2px);
}

/* header left group (Q icon + text) */
.hdr .left{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

/* Q icon size */
.q-icon{
  inline-size: 28px;
  block-size: 28px;
  flex: 0 0 28px;
}

/* question text */
.q{
  font-weight: 600;
}

/* caret icon (right side) */
.icon{
  inline-size: 22px;
  block-size: 22px;
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  transition: transform var(--speed) ease;
}

/* rotate caret when open */
.hdr[aria-expanded="true"] .icon{
  transform: rotate(180deg);
}

/* ===== 6) Panel (answer) ===== */
/* NOTE: block-size transition with auto is non-animating in most browsers;
   kept for simplicity. For smooth animation, switch to JS-driven height. */
.panel{
  overflow: hidden;
  block-size: 0;
  transition: block-size var(--speed) ease;
}

/* inner content spacing */
.panel-inner{
  display: flex;
  align-items: flex-start;
  gap: 10px;

  padding: 0 18px 16px;
  color: var(--text);
}

/* A icon size */
.a-icon{
  inline-size: 28px;
  block-size: 28px;
  flex: 0 0 28px;
  margin-top: 4px;
}

/* open state (toggled via JS: data-open="true") */
.panel[data-open="true"]{
  block-size: auto;
}

.panel[data-open="true"] .panel-inner{
  padding-top: 0;
}

/* ===== 7) Reduced Motion ===== */
@media (prefers-reduced-motion: reduce){
  .panel{ transition: none; }
  .icon{ transition: none; }
}

html {
  scroll-behavior: smooth;
}

.accordion a {
  display: inline;
}

/* .accordion a {
  display: none;
} */