/* ---------- faq: "Before we talk" ---------- */
.faq .list{border-top:1px solid var(--fathom)}
/* the row's padding is the summary's own, so the whole row opens it: a 27 px line of text was the only target */
.faq details{border-bottom:1px solid var(--edge)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;padding-block:24px;font-size:20px;line-height:1.35;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
/* the mark: a drawn plus, 15 px, in hairlines. Open, its upright folds away and leaves the minus; it was a "+" and a dash
   swapped in the type */
.faq summary::after{content:"";flex:none;width:15px;height:15px;margin-top:6px;
  background:linear-gradient(var(--deep),var(--deep)) 50% 50%/15px 1px no-repeat,linear-gradient(var(--deep),var(--deep)) 50% 50%/1px 15px no-repeat;
  transition:background-size .35s cubic-bezier(.2,.7,.2,1)}
.faq details[open]:not(.closing) summary::after{background-size:15px 1px,1px 0}
/* the answer sits in a box of its own, which is what opens and closes (faq.js): the box is clipped, so the 12 px the answer
   is pulled up toward its question are the box's, not the paragraph's */
.faq .faq-a{margin-top:-12px;overflow:hidden}
.faq .faq-a p{margin:0;padding-bottom:24px;color:var(--deep);max-width:64ch}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}