<div class="faq-container">
<details class="faq-item" open>
<summary class="faq-question">How do I reset my password?</summary>
<div class="faq-answer">Go to settings and click on security. You will find the reset option there.</div>
</details>
<details class="faq-item">
<summary class="faq-question">Can I upgrade my plan later?</summary>
<div class="faq-answer">Yes, you can upgrade your subscription at any time from your account dashboard.</div>
</details>
<details class="faq-item">
<summary class="faq-question">Do you offer technical support?</summary>
<div class="faq-answer">We offer 24/7 support via email and live chat for all our premium customers.</div>
</details>
</div>
.faq-container {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 15px;
}
.faq-item {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
transition: box-shadow 0.2s;
}
.faq-item:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.faq-question {
padding: 20px;
font-weight: 600;
cursor: pointer;
list-style: none;
position: relative;
color: #1f2937;
font-size: 1.05rem;
}
.faq-question::-webkit-details-marker {
display: none;
}
.faq-question::after {
content: "+";
position: absolute;
right: 20px;
font-size: 1.5rem;
color: #3b82f6;
transition: transform 0.2s;
}
details[open] .faq-question::after {
transform: rotate(45deg);
}
.faq-answer {
padding: 0 20px 20px;
color: #4b5563;
line-height: 1.6;
border-top: 1px solid #f3f4f6;
}