/* -----------------------------------------------
   Canonical FAQ accordion — shared site-wide by sector, app, /faq/, and
   scenario pages. Extracted from sector-page.css so the V3 accordion is the
   single FAQ style across the site. Toggled by faq.js.

   Token references carry literal fallbacks: this sheet loads on pages that do
   NOT define the --rmai-* palette (e.g. /faq/, scenario pages), so the FAQ
   must render correctly with or without the token context.
   ----------------------------------------------- */
.faq {
  margin-top: 24px;
  border-top: 1px solid var(--rmai-border, #E8E8EB);
}
.faq .q {
  border-bottom: 1px solid var(--rmai-border, #E8E8EB);
}
.faq .q-head {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 4px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--rmai-fg-1, #1A1B25);
  line-height: 1.35;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.faq .q-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  margin-right: 10px;
  border: 1px solid var(--rmai-border, #E8E8EB);
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;
}
.faq .q-head .ico {
  flex-shrink: 0;
  width: 22px; height: 22px;
  position: relative;
  color: var(--rmai-purple, #A77ACD);
}
.faq .q-head .ico::before,
.faq .q-head .ico::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 200ms cubic-bezier(0.4,0,0.2,1);
}
.faq .q-head .ico::before { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); }
.faq .q-head .ico::after { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); }
.faq .q.open .q-head .ico::after { transform: translateX(-50%) scaleY(0); }
.faq .q-ans {
  font-size: 16px;
  line-height: 1.62;
  color: var(--rmai-fg-1, #1A1B25);
  max-width: 68ch;
  overflow: hidden;
  transition: max-height 240ms cubic-bezier(0.4,0,0.2,1), opacity 200ms, padding 240ms;
}
.faq .q:not(.open) .q-ans { max-height: 0; opacity: 0; padding-bottom: 0; }
.faq .q.open .q-ans { max-height: 420px; opacity: 1; padding-bottom: 24px; }
.faq .q-ans .ent { font-weight: 600; }