/* Services-cluster chrome CSS carried over verbatim from
 * design/ServiceDetail.dc.html's <helmet><style> block.
 *
 * The FAQ accordion on the Remote Radiology Reporting detail page uses NATIVE
 * <details class="faq"> + CSS (summary::after +/– toggle) — NO JavaScript. This
 * is the design's own mechanism, so it's ported verbatim as native <details>
 * (server-renderable, works with JS disabled). The `open` attribute on the first
 * item keeps it expanded by default, matching the design + screenshot.
 *
 * Imported globally via app/globals.css. (`.tm` + grid min-width:0 already global
 * via footer.css / home.css.)
 */
details.faq {
  border: 1px solid var(--border-default);
  border-radius: 12px;
  margin-bottom: 12px;
  background: #fff;
  overflow: hidden;
}
details.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-weight: 700;
  font-size: 16.5px;
  color: var(--gray-900);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
details.faq summary::-webkit-details-marker {
  display: none;
}
details.faq summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--at-green);
}
details.faq[open] summary::after {
  content: "\2013";
}
details.faq .faq-body {
  padding: 0 24px 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-600);
}