/* FAQ — matches reference site CSS exactly */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2.5rem clamp(2.5rem,5vw,4.5rem); align-items: start; }
.faq__head { grid-area: 1 / 1; }
.faq__list { grid-area: 1 / 2 / span 2; border-top: 1px solid var(--paper-3); }
.faq__aside { grid-area: 2 / 1; }

.faq details { border-bottom: 1px solid var(--paper-3); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.18rem, 1.05rem + .5vw, 1.5rem);
  letter-spacing: -.015em; line-height: 1.24;
  transition: color .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold); }
.faq summary .ic {
  position: relative; flex: 0 0 auto; width: 22px; height: 22px; margin-top: .35rem;
  border: 1px solid var(--paper-3); border-radius: 50%;
  transition: border-color .35s var(--ease), transform .45s var(--ease-out), background .35s var(--ease);
}
.faq summary .ic::before,
.faq summary .ic::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--text);
  transform: translate(-50%, -50%);
  transition: opacity .3s var(--ease), background .3s var(--ease);
}
.faq summary .ic::before { width: 9px; height: 1.5px; }
.faq summary .ic::after  { width: 1.5px; height: 9px; }
.faq summary:hover .ic { border-color: var(--gold); }
.faq details[open] summary { color: var(--gold); }
.faq details[open] summary .ic { background: var(--gold); border-color: var(--gold); transform: rotate(90deg); }
.faq details[open] summary .ic::after { opacity: 0; }
.faq details[open] summary .ic::before { background: var(--ink); }

.faq__answer { overflow: hidden; }
.faq__answer p { padding: 0 3rem 1.6rem 0; color: var(--text-2); font-size: .95rem; line-height: 1.7; max-width: 62ch; }
.faq__answer p + p { padding-top: .9rem; }
.faq__answer strong { color: var(--text); font-weight: 600; }
.faq details[open] .faq__answer { animation: reveal .5s var(--ease-out); }

.faq__aside {
  border: 1px solid var(--paper-3); border-radius: var(--r-lg);
  padding: clamp(1.6rem,3vw,2.2rem);
  background: var(--paper); position: sticky; top: 6.5rem;
}
.faq__aside h3 { font-family: var(--font-display); font-size: var(--step-2); }
.faq__aside p { margin-top: .9rem; color: var(--text-2); font-size: .92rem; line-height: 1.65; }
.faq__aside .btn { margin-top: 1.5rem; }

@media (max-width: 1080px) {
  .faq { grid-template-columns: 1fr; }
  .faq__head, .faq__list, .faq__aside { grid-area: auto / 1; }
  .faq__aside { position: static; }
}
@media (max-width: 640px) {
  .faq__answer p { padding-right: 0; }
}