/* From the live .tt-faq (research/faq-staging.md): heading and jump links in
   a sticky column on the left, questions in the two right columns, max 60rem.
   At 991px and below everything stacks to 36rem and the jump links become a
   sticky row that scrolls sideways.

   --_nav (px) is where the site's sticky navigation ends, measured by
   useNavOffset; --_bar-height is the height of the jump-link row. Both feed
   --tt-faq-scroll-top, which the categories use as scroll-margin-top. */
.gvffg3TR59hC8cYXkiGF {
  --_gap: 2rem;
  --_width: var(--tt-width-2xl, 60rem);
  --_heading: var(--tt-heading-2xl, clamp(2.2rem, 1.368rem + 3.125vw, 3rem));
  --_heading-lh: var(--tt-heading-2xl-lh, 1);
  --_sticky-top: calc(var(--_nav, 4.5rem) + 1.5rem);
  --_bar-in: 0px;
  --tt-faq-scroll-top: calc(var(--_nav, 4.5rem) + var(--_bar-in) + 1.5rem);
  --tt-faq-accent: var(--purple-600, #6f00ff);

  --_d-fg: var(--tt-dark) var(--white-a-100, #fff);
  --_d-tint: var(--tt-dark) var(--white-a-10, rgba(255, 255, 255, 0.1));
  --_d-pill: var(--tt-dark) var(--white-a-20, rgba(255, 255, 255, 0.2));
  --_fg: var(--_d-fg, var(--black-a-100, #0d0d0d));
  --_tint: var(--_d-tint, var(--warm-grey-1, #f5f5f4));
  --_pill: var(--_d-pill, rgba(13, 13, 13, 0.06));
  --_ease: cubic-bezier(0.65, 0, 0.35, 1);

  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--_gap);
  align-items: start;
  width: 100%;
  max-width: var(--_width);
  margin-inline: auto;
  color: var(--_fg);
}

.gvffg3TR59hC8cYXkiGF *,
.gvffg3TR59hC8cYXkiGF *::before,
.gvffg3TR59hC8cYXkiGF *::after {
  box-sizing: border-box;
}

.gvffg3TR59hC8cYXkiGF[data-width="medium"] {
  --_width: var(--tt-width-lg, 44rem);
}

.gvffg3TR59hC8cYXkiGF[data-width="full"] {
  --_width: none;
}

.gvffg3TR59hC8cYXkiGF[data-size="medium"] {
  --_heading: var(--tt-heading-xl, clamp(1.9rem, 1.276rem + 2.344vw, 2.5rem));
  --_heading-lh: var(--tt-heading-xl-lh, 1);
}

.gvffg3TR59hC8cYXkiGF[data-color="neutral"] {
  --tt-faq-accent: var(--black-a-60, rgba(13, 13, 13, 0.6));
}

/* ---------- Side: heading, jump links, Open all ---------- */

.gvffg3TR59hC8cYXkiGF [data-part="side"] {
  position: sticky;
  top: var(--_sticky-top);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  min-width: 0;
  padding-bottom: 1.5rem;
}

.gvffg3TR59hC8cYXkiGF [data-part="heading"] {
  max-width: 24ch;
  margin: 0;
  color: inherit;
  font-size: var(--_heading);
  line-height: var(--_heading-lh);
  font-weight: var(--tt-heading-weight, 600);
  font-feature-settings: "ss03" on, "ss08" on, "ss12" on;
  text-wrap: balance;
}

/* The light italic second line, like .headline-decoration on the site. */
.gvffg3TR59hC8cYXkiGF [data-part="accent"] {
  display: block;
  font-weight: var(--tt-heading-italic-weight, 300);
  font-variation-settings: "ital" 11;
}

.gvffg3TR59hC8cYXkiGF [data-part="links"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.gvffg3TR59hC8cYXkiGF [data-part="links"] a {
  padding: 0.6rem 0.6rem 0.5rem;
  border-radius: var(--tt-radius-xs, 0.5rem);
  color: inherit;
  font-size: 0.8rem;
  line-height: 1.15;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.5;
  transition:
    opacity 0.25s var(--_ease),
    background-color 0.25s var(--_ease);
}

.gvffg3TR59hC8cYXkiGF [data-part="links"] a[aria-current] {
  opacity: 1;
  background: var(--_pill);
}

.gvffg3TR59hC8cYXkiGF [data-part="links"] a:focus-visible,
.gvffg3TR59hC8cYXkiGF [data-part="expand"]:focus-visible {
  outline: 2px solid var(--tt-color-brand, #6f00ff);
  outline-offset: 2px;
}

@media (hover: hover) {
  .gvffg3TR59hC8cYXkiGF [data-part="links"] a:hover {
    opacity: 1;
  }
}

.gvffg3TR59hC8cYXkiGF [data-part="expand"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.4rem 0.6rem 0.4rem 0.4rem;
  border: 0;
  border-radius: var(--tt-radius-xs, 0.5rem);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.15;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.25s var(--_ease), background-color 0.25s var(--_ease);
}

@media (hover: hover) {
  .gvffg3TR59hC8cYXkiGF [data-part="expand"]:hover {
    opacity: 1;
    background: var(--_tint);
  }
}

/* Plus for "Open all", minus for "Close all", like the items. */
.gvffg3TR59hC8cYXkiGF [data-part="expand-icon"] {
  position: relative;
  width: 1rem;
  height: 1rem;
}

.gvffg3TR59hC8cYXkiGF [data-part="expand-icon"]::before,
.gvffg3TR59hC8cYXkiGF [data-part="expand-icon"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.6rem;
  height: 2px;
  margin: -1px 0 0 -0.3rem;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.3s var(--_ease);
}

.gvffg3TR59hC8cYXkiGF [data-part="expand-icon"]::after {
  transform: rotate(90deg);
}

.gvffg3TR59hC8cYXkiGF [data-part="expand-icon"][data-open]::after {
  transform: rotate(0deg);
}

/* ---------- Items ---------- */

/* Items sit flush, separated by their own lines, with or without categories.
   The space between categories comes from the categories themselves
   (FaqCategory.module.css). Webflow wraps slot content in one element, which
   may render as a box, so it stacks the same way. */
.gvffg3TR59hC8cYXkiGF [data-part="items"],
.gvffg3TR59hC8cYXkiGF [data-part="items"] ::slotted(*) {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
}

@media (max-width: 479px) {
  .gvffg3TR59hC8cYXkiGF {
    --_gap: 1.5rem;
  }
}

/* ---------- Stacked: heading on top, jump links as a sticky row ----------
   Layout Stacked, and every layout at 991px and below. The FAQ becomes a flex
   column and the side column dissolves, so the row can stick along the whole
   FAQ (a sticky element only sticks inside its parent). The rules are the
   same twice because a media query can't be combined with an attribute. */

.gvffg3TR59hC8cYXkiGF[data-layout="stacked"] {
  --_bar-in: var(--_bar-height, 0px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.gvffg3TR59hC8cYXkiGF[data-layout="stacked"] [data-part="side"] {
  display: contents;
}

.gvffg3TR59hC8cYXkiGF[data-layout="stacked"] [data-part="links"] {
  position: sticky;
  top: calc(var(--_nav, 4.5rem) + 0.5rem);
  z-index: 2;
  flex-direction: row;
  /* Full width without letting the links widen the page. */
  width: 0;
  min-width: 100%;
  gap: 0.1rem;
  padding: 0.25rem;
  border-radius: calc(var(--tt-radius-xs, 0.5rem) + 0.25rem);
  background: var(--_tint);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

@media (max-width: 991px) {
  .gvffg3TR59hC8cYXkiGF {
    --_width: var(--tt-width-md, 36rem);
    --_bar-in: var(--_bar-height, 0px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .gvffg3TR59hC8cYXkiGF[data-width="full"] {
    --_width: none;
  }

  .gvffg3TR59hC8cYXkiGF [data-part="side"] {
    display: contents;
  }

  .gvffg3TR59hC8cYXkiGF [data-part="links"] {
    position: sticky;
    top: calc(var(--_nav, 4.5rem) + 0.5rem);
    z-index: 2;
    flex-direction: row;
    /* Full width without letting the links widen the page. */
    width: 0;
    min-width: 100%;
    gap: 0.1rem;
    padding: 0.25rem;
    border-radius: calc(var(--tt-radius-xs, 0.5rem) + 0.25rem);
    background: var(--_tint);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
}

.gvffg3TR59hC8cYXkiGF [data-part="links"]::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .gvffg3TR59hC8cYXkiGF *,
  .gvffg3TR59hC8cYXkiGF *::before,
  .gvffg3TR59hC8cYXkiGF *::after {
    transition: none !important;
  }
}