.faq { position: relative; padding: clamp(4rem, 9vw, 8rem) max(1.25rem, calc((100vw - 1120px) / 2)); background: var(--paper); overflow: clip; }
.faq::before { content: "?"; position: absolute; top: -2rem; right: max(-1rem, calc((100vw - 1120px) / 2 - 3rem)); font-family: "Fraunces", serif; font-size: clamp(9rem, 20vw, 16rem); line-height: 1; color: rgba(35,28,22,.045); pointer-events: none; }
.faq__intro { position: relative; max-width: 780px; margin-bottom: 2.5rem; }
.faq__intro h2 { margin: .4rem 0; color: var(--ink); font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.08; }
.faq__tabs { position: relative; display: flex; gap: .6rem; overflow-x: auto; padding: .25rem .25rem 1.75rem; }
.faq__tabs button { min-height: 44px; flex: 0 0 auto; border: 1px solid rgba(196,155,90,.4); border-radius: 999px; padding: .7rem 1.15rem; background: #fff; color: var(--ink); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.faq__tabs button:hover { border-color: var(--gold-400); }
.faq__tabs button[aria-selected="true"] { border-color: var(--noir-950); background: var(--noir-950); color: var(--gold-100); }
.faq__tabs button:focus-visible, [data-faq-item] button:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 3px; }
.faq__panel { position: relative; padding-top: .5rem; }
[data-faq-item] { border-bottom: 1px solid rgba(35,28,22,.14); transition: background .2s ease, border-radius .2s ease; }
[data-faq-item]:first-child { border-top: 1px solid rgba(35,28,22,.14); }
[data-faq-item]:has([data-faq-answer].is-open) { background: rgba(196,155,90,.07); border-radius: 1rem; border-bottom-color: transparent; }
[data-faq-item] h3 { margin: 0; }
[data-faq-item] button { width: 100%; min-height: 64px; border: 0; padding: 1.1rem 3.25rem 1.1rem 1rem; background: transparent; color: var(--ink); font: inherit; font-family: "Fraunces", serif; font-size: 1.05rem; font-weight: 700; text-align: left; cursor: pointer; position: relative; transition: color .2s ease; }
[data-faq-item] button:hover { color: var(--seal-red); }
[data-faq-item] button::after { content: "+"; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(196,155,90,.5); color: var(--gold-400); font-family: "Inter", sans-serif; font-size: 1.1rem; font-weight: 700; transition: background .2s ease, border-color .2s ease, color .2s ease; }
[data-faq-item] button[aria-expanded="true"]::after { content: "−"; background: var(--seal-red); border-color: var(--seal-red); color: #fff; }
[data-faq-answer] { display: grid; }
[data-app-ready="true"] [data-faq-answer] { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .25s ease, opacity .25s ease; }
[data-faq-answer] p { min-height: 0; overflow: hidden; margin: 0; line-height: 1.7; color: rgba(35,28,22,.78); }
[data-faq-answer].is-open { grid-template-rows: 1fr; opacity: 1; }
[data-faq-answer].is-open p { padding: 0 3.25rem 1.35rem 1rem; }
[data-faq-answer] p.faq-note { margin-top: .6rem; font-size: .72rem; line-height: 1.5; color: rgba(35,28,22,.48); }
[data-faq-answer] p.faq-note sup { margin-right: .15em; }
@media (prefers-reduced-motion: reduce) { [data-app-ready="true"] [data-faq-answer] { transition-duration: 0s; } }
@media (max-width: 768px) { .faq__tabs { margin-right: -1.25rem; } .faq__tabs button { white-space: nowrap; } [data-faq-item] button { padding-right: 2.75rem; } [data-faq-answer].is-open p { padding-right: 2.75rem; } }