/* ============================================================
   SHARED FAQ COMPONENT — the reusable FAQ pattern for every
   Zenwork use-case page (Business Verification, Vendor Payments,
   1099 / Tax Information Reporting, W-9 & TIN Matching, and future
   pages). One coherent accordion surface — never individual cards —
   inside an editorial two-column chapter. It sits on the existing
   .m-light-b environment above, so it carries no background token
   of its own. Base rules below are the desktop composition; the two
   media blocks that follow narrow it down for tablet and mobile,
   the same convention used for testimonial/hero/verification-record
   above. Only the <details> markup inside .faq__surface should ever
   change between pages — every selector and rule here moves verbatim.
   ============================================================ */

.faq__intro{position:sticky;top:112px;}
.faq__intro p{margin:20px 0 0;font-family:var(--sans);font-size:18px;line-height:1.58;color:var(--muted);max-width:46ch;}

.faq__surface{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.faq__item{border-top:1px solid var(--line);}
.faq__item:first-child{border-top:0;}
.faq__item.is-active{
  background:rgba(0,171,82,.025);
  transition:background 280ms var(--ease);
}

.faq__summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:25px 26px;
  cursor:pointer;
  transition:background 160ms;
  -webkit-tap-highlight-color:transparent;
}
.faq__summary::-webkit-details-marker{display:none;}
.faq__summary::marker{display:none;}
.faq__summary:hover{background:var(--g-025);}
.faq__summary:focus-visible{outline:none;background:var(--g-025);box-shadow:inset 0 0 0 2px var(--green);}

.faq__question{
  flex:1;min-width:0;
  font-family:var(--sans);font-weight:600;
  font-size:17.5px;line-height:1.4;
  color:var(--ink);
  text-wrap:pretty;
}

.faq__toggle{
  flex:none;width:35px;height:35px;border-radius:50%;
  background:var(--g-050);border:1px solid var(--g-100);
  display:flex;align-items:center;justify-content:center;
  transition:border-color 260ms var(--ease);
}
.faq__toggle svg{width:14px;height:14px;overflow:visible;}
.faq__toggle-h,.faq__toggle-v{
  stroke:var(--green-ink);stroke-width:1.6;stroke-linecap:round;
  transform-origin:10px 10px;
  transition:transform 320ms var(--ease);
}
/* the one place brand color marks "active" — a slightly more present
   ring on the control itself, not a bar run down the row. Keyed to
   .is-active (set the instant open/close starts) rather than [open]
   (which only flips at the end of a close), so the icon and ring
   ease in step with the row's own height animation. */
.faq__item.is-active .faq__toggle{border-color:rgba(0,171,82,.45);}
.faq__item.is-active .faq__toggle-v{transform:rotate(90deg);}

.faq__answer{overflow:hidden;height:0;}
.faq__item[open] .faq__answer{height:auto;}
.faq__answer-in{padding:0 68px 26px 28px;}
.faq__answer-in p{
  margin:0;font-family:var(--sans);font-weight:400;
  font-size:16.5px;line-height:1.65;color:var(--muted);
  text-wrap:pretty;
}

/* tablet — retain the two-column composition, narrower; sticky intro
   is desktop-only, so it's switched off for tablet and mobile alike */
@media (max-width:1023px){
  .faq__intro{position:static;top:auto;}
}
@media (min-width:768px) and (max-width:1023px){
  .faq__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,4vw,44px);}
  .faq__summary{padding:23px 24px;}
  .faq__question{font-size:17px;}
  .faq__answer-in{padding:0 60px 24px 26px;}
}
/* mobile — recompose to one column: intro, then the accordion */
@media (max-width:767px){
  .faq__grid{display:flex;flex-direction:column;gap:30px;}
  .faq__intro p{font-size:17px;}
  .faq__surface{border-radius:var(--mobile-radius-stage);}
  .faq__summary{min-height:56px;padding:18px 20px;}
  .faq__question{font-size:16.5px;}
  .faq__toggle{width:31px;height:31px;}
  .faq__answer-in{padding:0 18px 20px;}
  .faq__answer-in p{font-size:15.75px;line-height:1.6;}
}