/* css/landing-faq.css — Landing FAQ accordion (B-3)
   Compact FAQ section using native <details>/<summary>.
   Self-contained (landing does NOT load pages.css, so we cannot reuse .fq-item).
   Variables come from landing.css :root. */

.l-faq { padding: 64px 0 80px; background: var(--c-bg-2); }
.l-faq .container { max-width: 820px; }
.l-faq-head { text-align: center; margin-bottom: 36px; }
.l-faq-head .l-tag {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-accent-strong); background: var(--c-accent-soft);
  padding: 4px 12px; border-radius: var(--radius-pill); margin-bottom: 12px;
}
.l-faq-head h2 { font-size: 30px; font-weight: 700; color: var(--c-text-1); line-height: 1.25; }
.l-faq-head p { font-size: 15px; color: var(--c-text-3); margin-top: 8px; }

.l-faq-list { display: flex; flex-direction: column; gap: 10px; }
.l-faq-item {
  background: var(--c-bg-1);
  border: 1px solid var(--c-border-1);
  border-radius: var(--radius-2);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.l-faq-item:hover { border-color: var(--c-accent); }
.l-faq-item[open] { border-color: var(--c-accent); box-shadow: var(--shadow-2); }
.l-faq-item summary {
  padding: 16px 20px;
  font-size: 15px; font-weight: 600;
  color: var(--c-text-1);
  cursor: pointer; list-style: none;
  position: relative; user-select: none;
}
.l-faq-item summary::-webkit-details-marker { display: none; }
.l-faq-item summary::after {
  content: "+";
  position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px; font-weight: 300; line-height: 1;
  color: var(--c-text-3);
  transition: transform var(--transition);
}
.l-faq-item[open] summary::after { content: "\2212"; color: var(--c-accent-strong); }
.l-faq-item summary:hover { color: var(--c-accent-strong); }
.l-faq-answer {
  padding: 0 20px 18px;
  color: var(--c-text-2); font-size: 14px; line-height: 1.75;
}
.l-faq-answer p { margin: 0 0 10px; }
.l-faq-answer p:last-child { margin-bottom: 0; }
.l-faq-answer strong { color: var(--c-text-1); font-weight: 600; }

.l-faq-foot { text-align: center; margin-top: 28px; }
.l-faq-foot a {
  display: inline-block; padding: 10px 22px;
  background: var(--c-bg-1); border: 1px solid var(--c-border-2);
  border-radius: var(--radius-pill);
  color: var(--c-text-1); font-weight: 600; font-size: 14px;
  text-decoration: none; transition: all var(--transition);
}
.l-faq-foot a:hover { border-color: var(--c-accent); color: var(--c-accent-strong); }

@media (max-width: 640px) {
  .l-faq { padding: 48px 0 64px; }
  .l-faq-head h2 { font-size: 24px; }
  .l-faq-item summary { padding: 14px 44px 14px 16px; font-size: 14px; }
  .l-faq-item summary::after { right: 16px; }
  .l-faq-answer { padding: 0 16px 14px; font-size: 13px; }
}