.faq-group {
  padding: 76px 0 84px;
  scroll-margin-top: 108px;
  background: #fff;
}

.faq-group:nth-of-type(even) {
  background: var(--faq-light);
}

.faq-group-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 820px);
  gap: 24px;
  margin-bottom: 34px;
}

.faq-group-head > span {
  padding-top: 7px;
  color: var(--faq-blue);
  font-size: 13px;
  font-weight: 800;
}

.faq-group-head h2 {
  margin: 0 0 10px;
  color: var(--faq-ink);
  font-size: 34px;
  line-height: 1.24;
  letter-spacing: 0;
}

.faq-group-head p {
  margin: 0;
  color: var(--faq-muted);
  font-size: 16px;
  line-height: 1.7;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 46px;
  align-items: start;
}

.faq-item {
  border-bottom: 1px solid var(--faq-line);
}

.faq-item:first-child,
.faq-item:nth-child(2) {
  border-top: 1px solid var(--faq-line);
}

.faq-item summary {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 18px;
  align-items: center;
  padding: 16px 12px 16px 16px;
  color: var(--faq-ink);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  content: "";
}

.faq-item summary i {
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--faq-blue);
  border-bottom: 2px solid var(--faq-blue);
  transform: rotate(45deg) translate(-2px, 2px);
  transition: transform .25s ease;
}

.faq-item[open] summary i {
  transform: rotate(225deg) translate(-2px, 2px);
}

.faq-item summary:hover {
  color: var(--faq-blue-dark);
}

.faq-item summary:focus-visible {
  outline: 3px solid rgba(0, 120, 184, .32);
  outline-offset: -3px;
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .35s ease, opacity .25s ease;
}

.faq-answer > div {
  overflow: hidden;
}

.faq-item[open] .faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-answer p {
  margin: 0;
  padding: 0 50px 24px 16px;
  color: var(--faq-muted);
  font-size: 16px;
  line-height: 1.75;
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer,
  .faq-item summary i {
    transition: none;
  }
}