.gel-faq {
  --gel-faq-bg: var(--gel-soft, #f1f5f9);
  --gel-faq-ink: var(--gel-ink, #1f2937);
  --gel-faq-muted: var(--gel-muted, #667085);
  --gel-faq-blue: var(--gel-blue-600, #2563eb);
  --gel-faq-cyan: var(--gel-cyan-500, #38c7f3);
  background:
    radial-gradient(circle at 10% 14%, color-mix(in srgb, var(--gel-faq-blue) 7%, transparent), transparent 26%),
    var(--gel-faq-bg);
  color: var(--gel-faq-ink);
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  overflow: hidden;
  padding: clamp(70px, 7vw, 104px) 0;
  position: relative;
  right: 50%;
  width: 100vw;
}

.gel-faq--white {
  --gel-faq-bg: var(--gel-white, #ffffff);
}

.gel-faq::before,
.gel-faq::after {
  border: 1px solid color-mix(in srgb, var(--gel-faq-blue) 17%, transparent);
  border-radius: 48% 52% 54% 46% / 52% 44% 56% 48%;
  content: "";
  height: 300px;
  opacity: 0.48;
  position: absolute;
  right: -112px;
  top: -128px;
  transform: rotate(24deg);
  width: 300px;
}

.gel-faq::after {
  bottom: -160px;
  left: -128px;
  right: auto;
  top: auto;
  transform: rotate(-31deg);
}

.gel-faq__inner {
  margin: 0 auto;
  position: relative;
  width: min(860px, calc(100% - 40px));
  z-index: 1;
}

.gel-faq__heading {
  margin: 0 auto clamp(30px, 4vw, 46px);
  max-width: 720px;
  text-align: center;
}

.gel-faq__eyebrow {
  align-items: center;
  background: color-mix(in srgb, var(--gel-faq-blue) 12%, var(--gel-white, #ffffff));
  border-radius: 8px;
  color: var(--gel-faq-blue);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 8px;
  line-height: 1;
  margin: 0 0 18px;
  padding: 8px 12px;
  text-transform: uppercase;
}

.gel-faq__eyebrow::before {
  background: currentColor;
  content: "";
  height: 20px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cellipse cx='32' cy='32' rx='20' ry='27' transform='rotate(24 32 32)'/%3E%3Cellipse cx='32' cy='32' rx='27' ry='20' transform='rotate(-18 32 32)'/%3E%3Cellipse cx='32' cy='32' rx='23' ry='28' transform='rotate(68 32 32)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cellipse cx='32' cy='32' rx='20' ry='27' transform='rotate(24 32 32)'/%3E%3Cellipse cx='32' cy='32' rx='27' ry='20' transform='rotate(-18 32 32)'/%3E%3Cellipse cx='32' cy='32' rx='23' ry='28' transform='rotate(68 32 32)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  width: 20px;
}

.gel-faq__heading h2 {
  color: var(--gel-faq-ink);
  font-size: clamp(2.25rem, 4.2vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0;
}

.gel-faq__description {
  color: var(--gel-faq-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 18px auto 0;
  max-width: 620px;
}

.gel-faq__list {
  display: grid;
  gap: 14px;
}

.gel-faq__item {
  background: var(--gel-white, #ffffff);
  border: 1px solid color-mix(in srgb, var(--gel-faq-blue) 18%, var(--gel-line, #e5e7eb));
  border-radius: var(--gel-radius, 8px);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--gel-blue-900, #1e3a8a) 7%, transparent);
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.gel-faq__item:hover,
.gel-faq__item[open] {
  border-color: color-mix(in srgb, var(--gel-faq-blue) 46%, var(--gel-line, #e5e7eb));
  box-shadow: 0 24px 56px color-mix(in srgb, var(--gel-blue-900, #1e3a8a) 10%, transparent);
}

.gel-faq__item summary {
  align-items: center;
  color: var(--gel-faq-ink);
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  font-weight: 700;
  gap: 18px;
  justify-content: space-between;
  line-height: 1.35;
  list-style: none;
  min-height: 66px;
  padding: 20px 24px;
}

.gel-faq__item summary::-webkit-details-marker {
  display: none;
}

.gel-faq__item summary::after {
  align-items: center;
  background: color-mix(in srgb, var(--gel-faq-blue) 10%, var(--gel-white, #ffffff));
  border-radius: 50%;
  color: var(--gel-faq-blue);
  content: "+";
  display: inline-flex;
  flex: 0 0 30px;
  font-size: 1.25rem;
  font-weight: 500;
  height: 30px;
  justify-content: center;
  line-height: 1;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
  width: 30px;
}

.gel-faq__item[open] summary::after {
  background: var(--gel-faq-blue);
  color: var(--gel-white, #ffffff);
  content: "-";
  transform: rotate(180deg);
}

.gel-faq__content {
  color: var(--gel-faq-muted);
  font-size: 0.98rem;
  line-height: 1.72;
  padding: 0 24px 24px;
}

.gel-faq__content > :first-child {
  margin-top: 0;
}

.gel-faq__content > :last-child {
  margin-bottom: 0;
}

@media (max-width: 680px) {
  .gel-faq {
    padding: 58px 0;
  }

  .gel-faq__inner {
    width: min(100% - 28px, 720px);
  }

  .gel-faq__item summary {
    min-height: 60px;
    padding: 18px 18px;
  }

  .gel-faq__content {
    padding: 0 18px 20px;
  }
}