.tablist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 32px;
  border-bottom: 2px solid #dce7ed;
}

.faq-tab {
  appearance: none;
  border: 0;
  border-bottom: 4px solid transparent;
  background: #f2f6ff;
  color: #092b49;
  padding: 17px 14px;
  margin-bottom: -2px;
  font: 700 1rem/1.25 Arial, Helvetica, sans-serif;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}

.faq-tab:hover { background: #e5eefc; }
.faq-tab.active { background: #092b49; border-bottom-color: #23aa67; color: #fff; }
.faq-tab:focus-visible { outline: 3px solid #23aa67; outline-offset: 3px; }
.faq-panel { animation: faqFade .22s ease; }
.faq-panel[hidden] { display: none; }
.faq-panel details:first-child { border-top: 1px solid #dce7ed; }

@keyframes faqFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 820px) {
  .tablist { grid-template-columns: 1fr; gap: 6px; border-bottom: 0; }
  .faq-tab { width: 100%; margin: 0; border: 1px solid #dce7ed; border-left: 4px solid transparent; text-align: left; padding: 14px; }
  .faq-tab.active { border-color: #092b49; border-left-color: #23aa67; }
}