/* ---------- Page shell ---------- */
.help{ padding: 8px 0 18px }
.help__title{
  font-size: 20px; text-align:center; margin: 8px 0 12px;
}

/* ---------- Tabs (category pills) ---------- */
.help__tabs{
  display:grid; grid-template-columns: repeat(7, minmax(0,1fr));
  gap:10px; margin-bottom: 12px;
}
@media (max-width: 980px){
  .help__tabs{ grid-template-columns: repeat(3, minmax(0,1fr)) }
}
@media (max-width: 620px){
  .help__tabs{ grid-template-columns: repeat(2, minmax(0,1fr)) }
}

.pill{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  background: var(--panel);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans), transform var(--trans);
}
.pill:hover{ background: color-mix(in srgb, var(--panel) 85%, white); }
.pill:active{ transform: translateY(1px); }
.pill.active{
  outline: 2px solid color-mix(in srgb, var(--tint) 40%, transparent);
  background: color-mix(in srgb, var(--tint) 6%, var(--panel));
  border-color: color-mix(in srgb, var(--tint) 40%, var(--border));
}
.pill__icon{
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:8px; color: var(--tint);
  background: color-mix(in srgb, var(--tint) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tint) 30%, transparent);
}
.pill__text{ font-weight: 700; font-size: 13px }

/* ---------- Card ---------- */
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow-1);
  backdrop-filter: saturate(160%) blur(6px);
}

/* ---------- FAQ list ---------- */
.faq-list[hidden]{ display:none !important; }

.faq-item{
  border:1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  overflow:hidden;
  margin: 8px 0;
}
.faq-q{
  width:100%; text-align:left;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding: 12px 14px; background:transparent; border:0; color:inherit; cursor:pointer;
}
.faq-item:hover .faq-q{ background: color-mix(in srgb, var(--ink) 6%, transparent); }
.faq-q .chev{ transition: transform .18s var(--ease) }
.faq-q[aria-expanded="true"] .chev{ transform: rotate(180deg) }

.faq-a{
  padding: 0 14px 12px;
  color: var(--muted);
  border-top: 1px dashed var(--border);
}

/* Tiny helpers */
.muted{ color: var(--muted) }