/* ---------- FAQ: heading + call to action on the left, accordion on the right ---------- */
.faq {
  display: flex;
  justify-content: center;
  padding: 0 clamp(20px, 4vw, 48px) 128px;
}

.faq__layout { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px; align-items: start; }

.faq__aside { position: sticky; top: 96px; display: grid; gap: 16px; justify-items: start; }
.faq__title { margin: 0; font-weight: 500; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; letter-spacing: -0.035em; }
.faq__text { margin: 0 0 6px; max-width: 30ch; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

.faq__list { margin: 0; padding: 6px 28px; list-style: none; border-radius: 14px; background: var(--surface); }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:first-child { border-top: 0; }
.faq__h { margin: 0; font: inherit; }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.faq__q:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }

/* The brand plus shape in a lighter stroke, sitting on the first line of the question; it turns 45 degrees when open */
.faq__icon {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: calc((1.3em - 14px) / 2);   /* centred on the first line of text (line-height is 1.3em) */
  color: var(--ink);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.faq__item.is-open .faq__icon { transform: rotate(45deg); }

.faq__a > div { overflow: hidden; }
.faq__a p { margin: 0; padding: 0 44px 24px 0; max-width: 62ch; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }

/* With JavaScript the answers collapse; without it they simply stay open */
.faq.is-ready .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1); }
.faq.is-ready .faq__a > div { visibility: hidden; transition: visibility 0s .3s; }
.faq.is-ready .faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq.is-ready .faq__item.is-open .faq__a > div { visibility: visible; transition-delay: 0s; }