#faq {
	padding: 20px;
}

dt, dd {
  transition: all 0.2s ease;
}

dd {
  display: none;
  padding: 10px 20px;
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

dt {
  position: relative;
  font-weight: bold;
  padding: 12px 40px 12px 20px;
  cursor: pointer;
  background-color: #f9f7e9;
  border: 1px solid #9c6e41;
  border-radius: 5px;
  margin: 10px 0;
}

dt:hover {
  background-color: #d9b89c;
}

dt::after {
  content: "▸";
  position: absolute;
  right: 15px;
  font-size: 1.2em;
  color: #d56b35;
  transition: transform 0.2s ease;
}

dt.open::after {
  transform: rotate(90deg);
}

@media (max-width: 600px) {
  dt, dd {
    font-size: 0.9rem;
  }
}