/* FAQ styles, shared by the landing page and the generated pages.

   Its own file because index.html cannot load site.css: that stylesheet defines .header,
   .footer, .button and .wrap differently from the landing page's own inlined rules, and
   loading both would have them fight. The FAQ is the one component both pages genuinely
   share, so it is the one that gets extracted.

   Tokens come from whichever stylesheet the host page already loaded. Both define the
   same :root values. */

/* -------------------------------------------------------------------- faq */

.faq-section { padding-block: 80px; border-top: 1px solid var(--line); }
.faq-head { text-align: center; max-width: 660px; margin: 0 auto 44px; }
.faq-head h2 {
  font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: 1.06;
  color: var(--ink); margin: 22px 0 14px;
}
.faq-head h2 em { font-style: italic; }
.faq-head p { color: var(--muted); margin: 0; }
.faq-list { max-width: 820px; margin-inline: auto; }
/* <details> rather than a JavaScript accordion. It is open-able without scripting, it is
   keyboard operable for free, and crucially the answer text is IN the document whether or
   not it is expanded, so a crawler or an answer engine reads all of it. */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: flex-start; gap: 16px; justify-content: space-between;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 550; color: var(--ink); line-height: 1.45;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 22px; font-weight: 400; color: var(--muted);
  line-height: 1; flex-shrink: 0; transition: transform .2s;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item summary:hover { color: #0f2c24; }
.faq-item summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.faq-answer { padding: 0 0 24px; max-width: 700px; }
.faq-answer p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.68; color: var(--text); }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { text-decoration: underline; text-underline-offset: 2px; }