/* Parallang: FAQ, homepage section.
   Loaded after colors_and_type.css + home.css, so it inherits
   .section, .section--tint, .eyebrow, .section__kicker, .section__lede
   and the tokens (--navy, --blue, --line, ...).
   Each question is a native <details> element: no JavaScript, keyboard
   accessible, and every answer stays in the HTML for search engines and
   AI assistants. The head repeats the answers as FAQPage structured data. */

/* Two columns on desktop: the heading stays in view on the left while the
   questions fill the right; one column on tablets and phones. */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);gap:clamp(40px,6vw,88px);align-items:start;}
.faq__head{position:sticky;top:140px;}
.faq__head .section__lede{margin-bottom:0;}
.faq__more{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--ink-2);}
.faq__more a{display:inline-block;margin-top:4px;font-weight:600;color:var(--blue);}
.faq__more a:hover{color:var(--blue-hover);}
@media (max-width:900px){
  .faq{grid-template-columns:1fr;gap:clamp(28px,4vw,40px);}
  .faq__head{position:static;max-width:680px;}
}

.faq__list{display:grid;gap:12px;}
.faq__item{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  transition:border-color .25s,box-shadow .35s;
}
.faq__item:hover{border-color:#c7d0e6;}
.faq__item[open]{border-color:var(--blue-border);box-shadow:0 12px 32px rgba(42,53,84,.06);}

.faq__q{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 24px;border-radius:14px;
  font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.35;
  letter-spacing:-0.01em;color:var(--navy);
}
.faq__q::-webkit-details-marker{display:none;}
/* Plus sign in a soft blue circle; it turns into a cross when the answer is open */
.faq__q::after{
  content:'';flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:var(--blue-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004FFF' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/13px no-repeat;
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.faq__item[open] .faq__q::after{transform:rotate(45deg);}
.faq__q:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}

.faq__a{padding:0 24px 22px;}
.faq__a p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0;max-width:70ch;}
.faq__a a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}
.faq__a a:hover{color:var(--blue-hover);}

@media (max-width:600px){
  .faq__q{padding:18px;font-size:16px;}
  .faq__a{padding:0 18px 18px;}
}