/* ==========================================================================
   FAQ — Figma frame-y 7699→8558 (859 tall)

   Absolute stage: the ball-trailer photograph (252:1141) hangs off the top
   right and overlaps the giant FAQ mark, which no flow layout reproduces.
   Content sits on x=205 at 1050 wide — the width the comp actually draws its
   items and dividers at; the 1034/1054 wrappers around them are looser.
   ========================================================================== */

.gw-faq {
  position: relative;
  /* transparent, not white: the next section's photograph is pulled up 78 under
     this one's tail, exactly as the comp overlaps them */
  background: transparent;
  overflow: clip;
  container-type: inline-size;
  z-index: 1;
}

.gw-faq__stage {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  height: calc(859 * var(--u));
  --u: min(1px, calc(100cqw / 1440));
}
.gw-faq__stage > * { position: absolute; }

/* 252:1141 — the ball trailer */
.gw-faq__trailer {
  top: 0; left: calc(749 * var(--u));
  width: calc(691 * var(--u)); height: calc(460 * var(--u));
  z-index: 0;
  pointer-events: none;
}

.gw-faq__mark {
  top: calc(240 * var(--u)); left: calc(205 * var(--u));
  font-family: var(--gw-font-head);
  font-weight: 700;
  font-size: calc(128 * var(--u));
  line-height: calc(128 * var(--u));
  color: var(--gw-gray-350);
  z-index: 1;
}

.gw-faq__list {
  top: calc(392 * var(--u)); left: calc(205 * var(--u));
  width: calc(1050 * var(--u));
  z-index: 1;
}

.gw-faq__item {
  position: relative;
  width: 100%;
  padding-block: calc(24 * var(--u));
}
/* the comp gaps 8 to the divider and 8 again to the next item */
.gw-faq__item::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 8 * var(--u));
  height: 1px;
  background: var(--gw-line);
}
.gw-faq__item + .gw-faq__item { margin-top: calc(16 * var(--u)); }

.gw-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;   /* the comp butts the icon straight against the question */
  text-align: left;
}
.gw-faq__q-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--gw-font-display);
  font-weight: 400;
  font-size: calc(24 * var(--u));
  line-height: calc(31.2 * var(--u));
  color: var(--gw-ink-900);
  transition: color var(--gw-dur) var(--gw-ease);
}
.gw-faq__q:hover .gw-faq__q-text { color: var(--gw-violet); }

/* the plus, drawn as the comp draws it: a 16x2 and a 2x16 bar */
.gw-faq__icon {
  position: relative;
  flex: none;
  width: calc(24 * var(--u)); height: calc(24 * var(--u));
  margin-top: calc(3 * var(--u));
}
.gw-faq__icon i {
  position: absolute;
  background: var(--gw-ink-900);
  transition: transform var(--gw-dur) var(--gw-ease), opacity var(--gw-dur) var(--gw-ease);
}
.gw-faq__icon i:first-child { top: calc(11 * var(--u)); left: calc(4 * var(--u)); width: calc(16 * var(--u)); height: calc(2 * var(--u)); }
.gw-faq__icon i:last-child  { top: calc(4 * var(--u)); left: calc(11 * var(--u)); width: calc(2 * var(--u)); height: calc(16 * var(--u)); }
/* the comp draws a plus while the answers are open, so that is the rest state;
   collapsing rotates it to a cross */
.gw-faq__icon { transition: transform var(--gw-dur) var(--gw-ease); }
.gw-faq__item:not(.is-open) .gw-faq__icon { transform: rotate(45deg); }

.gw-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--gw-ease);
}
.gw-faq__a > p { overflow: hidden; }
.gw-faq__item.is-open .gw-faq__a { grid-template-rows: 1fr; }
.gw-faq__item.is-open .gw-faq__a > p { margin-top: calc(12 * var(--u)); }
.gw-faq__a p {
  font-size: calc(16 * var(--u));
  line-height: calc(24 * var(--u));
  color: var(--gw-gray-600);
}

@media (max-width: 1023px) {
  .gw-faq__stage {
    height: auto; --u: 1px;
    padding: clamp(2rem, 5vw, 3rem) var(--gw-gutter) clamp(2rem, 5vw, 3rem);
    display: flex; flex-direction: column;
  }
  .gw-faq__stage > * { position: static; }
  .gw-faq__trailer {
    order: -1;
    align-self: flex-end;
    width: min(28rem, 70%); height: auto;
    margin-bottom: clamp(-2rem, -3vw, -1rem);
  }
  .gw-faq__mark { font-size: clamp(3.25rem, 9vw, 4.5rem); line-height: 1.05; }
  .gw-faq__list { width: 100%; margin-top: 1.5rem; }
  .gw-faq__q-text { font-size: clamp(1.0625rem, 2.4vw, 1.375rem); line-height: 1.35; }
  .gw-faq__icon { width: 22px; height: 22px; margin-top: 2px; }
  .gw-faq__icon i:first-child { top: 10px; left: 3px; width: 16px; height: 2px; }
  .gw-faq__icon i:last-child  { top: 3px; left: 10px; width: 2px; height: 16px; }
  .gw-faq__item { padding-block: 1.25rem; }
  .gw-faq__item::after { top: calc(100% + 8px); }
  .gw-faq__item + .gw-faq__item { margin-top: 1rem; }
  .gw-faq__a p { font-size: 1rem; line-height: 1.5; }
  .gw-faq__item.is-open .gw-faq__a > p { margin-top: 0.75rem; }
}