/* ============================================================================
   Floom — the questions (floom-faq.js opens and closes them)
   ----------------------------------------------------------------------------
   One accordion for every page that asks them: the home's, and since
   2026-10-31 each product page's, which had a two-column list of its own. A
   centred heading over eight columns of questions, each a full-width button
   with the plus, its answer folding open under it; one open at a time.
   Drawn in the palette's own ink and orange, not the --ap- tokens, which
   differ from page to page.
   ========================================================================== */
.st-faq-head{ text-align: center; margin-bottom: round(clamp(40px, 5.5vw, 72px), 8px); }
.st-faq-head > *{ margin-inline: auto; }   /* a heading with a measure of its own stays centred */
.st-faq{ width: var(--fl-span-8); margin-inline: auto; }
.st-faq-item{
  border-bottom: 1px solid color-mix(in srgb, var(--fl-ink) 14%, transparent);
  transition: opacity .28s cubic-bezier(0, 0, 0, 1);
}
.st-faq:hover > .st-faq-item{ opacity: .5; }
.st-faq:hover > .st-faq-item:hover{ opacity: 1; }
.st-faq-q{ margin: 0; display: flex; }
.st-faq-trigger{
  flex: 1 1 auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  width: 100%;
  margin: 0; padding: 24px 0; border: 0;
  background: none; text-align: left; cursor: pointer;
  font-family: var(--font);
  /* title 3's own size, not its token: a page's phone ladder folds the
     token, and the questions read the same on every page */
  font-size: clamp(17.81px, 1.4vw, 20.08px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3;
  color: var(--fl-ink);
}
.st-faq-trigger:focus-visible{ outline: 2px solid #FF3C00; outline-offset: -8px; border-radius: 4px; }
.st-faq-text{ flex: 1 1 auto; padding-right: 8px; }
.st-faq-icon{ position: relative; flex: none; width: 32px; height: 32px; margin-top: -4px; }
.st-faq-icon::before, .st-faq-icon::after{
  content: ""; position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  border-radius: 1px; background: var(--fl-ink);
  transition: transform .28s cubic-bezier(0, 0, 0, 1), opacity .28s cubic-bezier(0, 0, 0, 1);
}
.st-faq-icon::before{ width: 14px; height: 1.75px; }
.st-faq-icon::after{ width: 1.75px; height: 14px; }
.st-faq-trigger[aria-expanded="true"] .st-faq-icon::after{ transform: scaleY(0); opacity: 0; }
.st-faq-panel{ overflow: hidden; height: 0; }
.st-faq-panel[hidden]{ display: none; }
.st-faq-inner{ padding: 0 0 24px; }
.st-faq-inner p{ margin: 0; font-size: 15.79px; font-weight: 450; line-height: 1.3; color: var(--fl-ink-soft); }
.st-faq-inner p + p{ margin-top: 12px; }
.st-faq-inner a{ color: #FF3C00; }
@media (max-width: 719.98px){ .st-faq-head{ text-align: left; } }