/* Homepage FAQ: native disclosures with a measured height animation from app.js. */
.faq-section { position:relative; z-index:5; background:var(--paper); }
.home-preview .faq-section { position:relative; z-index:30; background:var(--paper); }
.faq-layout { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:60px; align-items:start; }
.faq-intro { position:sticky; top:120px; }
.faq-intro p { max-width:340px; margin-top:22px; color:var(--muted); font-size:15px; line-height:1.6; }
.faq-intro p a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.faq-page { padding-top:140px; background:linear-gradient(#ecf1ed,var(--paper) 420px); }
.faq-page .breadcrumb { margin-bottom:48px; }
.faq-page .faq-intro h1 { margin:0; font-size:var(--page-title-size); font-weight:500; line-height:1.08; letter-spacing:-.045em; }
.faq-page-actions { margin-top:30px; }
.faq-list { border-top:1px solid var(--line); }
.faq-item { overflow-anchor:none; border-bottom:1px solid var(--line); }
.faq-item summary { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:22px 0; list-style:none; cursor:pointer; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:focus-visible { outline:2px solid #173342; outline-offset:4px; border-radius:6px; }
.faq-item h2,.faq-item h3 { font-size:18px; font-weight:560; line-height:1.35; letter-spacing:-.025em; transition:color .2s; }
.faq-item summary:hover h2,.faq-item summary:hover h3 { color:#173342; }
.faq-chevron { flex:none; width:18px; height:18px; color:var(--muted); transition:transform .42s var(--ease),color .2s; }
.faq-item summary:hover .faq-chevron { color:var(--ink); }
.faq-item[open]:not([data-expanded="false"]) .faq-chevron { transform:rotate(180deg); color:#173342; }
.faq-answer { padding:0 48px 24px 0; }
.faq-answer p { max-width:640px; color:var(--muted); font-size:15px; line-height:1.65; }
.faq-answer a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

@media(max-width:1000px) {
  .faq-layout { grid-template-columns:1fr; gap:30px; }
  .faq-intro { position:static; }
}
@media(max-width:900px) {
  .faq-page { padding-top:110px; }
  .faq-page .breadcrumb { margin-bottom:36px; }
}
@media(max-width:760px) {
  .faq-item summary { padding:18px 0; }
  .faq-item h2,.faq-item h3 { font-size:16px; }
  .faq-answer { padding-right:0; }
  .faq-answer p { font-size:14px; }
}

@media(max-width:760px) {
  .faq-section:not(.faq-page) .faq-intro { text-align:center; }
  .faq-section:not(.faq-page) .faq-intro p { margin-inline:auto; }
}
