.faq-intro {
  padding-top: var(--edge);
  padding-inline: var(--edge);
}

.faq-intro__canvas {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 80px;
  max-width: 1600px;
  margin-inline: auto;
  padding: 72px var(--canvas-pad);
  overflow: hidden;
  border-radius: var(--r-canvas);
  background:
    radial-gradient(ellipse at top right, var(--c-amber-mid), var(--c-clear) 65%),
    var(--c-canvas);
  color: var(--c-on-canvas);
}

.faq-intro__copy,
.faq-intro__note {
  min-width: 0;
}

.faq-intro .badge {
  border-color: var(--c-canvas-line);
  background: var(--c-canvas-fill);
  color: var(--c-on-canvas-muted);
}

.faq-intro h1 {
  margin: 0 0 24px;
  font-size: var(--fs-h1);
}

.faq-intro h1 .keep {
  color: var(--c-accent);
}

.faq-intro__lead {
  max-width: 530px;
  margin-bottom: 16px;
  font-size: var(--fs-lead);
}

.faq-intro__desc {
  max-width: 530px;
  color: var(--c-on-canvas-muted);
}

.faq-intro .hero__actions {
  margin-top: 28px;
  margin-bottom: 0;
}

.faq-intro__note {
  padding: 32px;
  border: 1px solid var(--c-canvas-line-strong);
  border-radius: var(--r-card);
  background: var(--c-canvas-fill);
  color: var(--c-on-canvas);
}

.faq-intro__label {
  display: block;
  margin-bottom: 16px;
  color: var(--c-accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.faq-intro__note h2 {
  margin: 0 0 20px;
  font-size: var(--fs-h3);
}

.faq-intro__note p {
  color: var(--c-on-canvas-muted);
  font-size: var(--fs-sm);
}

.faq-intro__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--c-canvas-line);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
}

.faq-intro__note .faq-intro__privacy {
  margin-top: 20px;
  margin-bottom: 0;
  font-size: var(--fs-xs);
}

.faq-content {
  padding-top: 56px;
}

.faq-category {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr);
  align-items: start;
  gap: 64px;
  margin-top: var(--section-gap);
}

.faq-category__heading,
.faq-category__answers {
  min-width: 0;
}

.faq-category__heading h2 {
  margin: 16px 0 20px;
  font-size: var(--fs-h3);
}

.faq-category__heading p {
  color: var(--c-muted);
}

.faq-category__heading .text-link {
  display: inline-block;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: var(--fs-sm);
}

.faq-category--panel {
  padding: 48px;
  gap: 48px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-canvas);
  background: var(--c-panel);
  color: var(--c-text);
}

.faq-category--panel .faq-item summary::after {
  background: var(--c-bg);
}

.faq-category--panel .faq-item[open] summary::after {
  background: var(--c-accent);
}

.faq-category__answers {
  border-top: 1px solid var(--c-border);
  overflow-wrap: break-word;
}

.faq-category .faq-item__answer {
  padding-right: 20px;
  line-height: 1.85;
}

@media (max-width: 960px) {
  .faq-intro__canvas {
    gap: 36px;
    padding: 48px 32px;
  }

  .faq-category {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
    gap: 32px;
  }

  .faq-category--panel {
    padding: 32px;
  }
}

@media (max-width: 768px) {
  .faq-intro__canvas,
  .faq-category {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-intro__canvas {
    gap: 32px;
  }

  .faq-intro h1 {
    font-size: var(--fs-h1);
  }

  .faq-intro__note {
    padding: 24px;
  }

  .faq-category {
    gap: 24px;
  }

  .faq-category__heading p {
    max-width: 480px;
  }
}

@media (max-width: 560px) {
  .faq-intro__canvas {
    padding: 36px 20px;
    border-radius: var(--r-mobile-canvas);
  }

  .faq-intro__lead {
    font-size: var(--fs-body);
  }

  .faq-content {
    padding-top: 32px;
  }

  .faq-category--panel {
    padding: 24px 20px;
    border-radius: var(--r-mobile-canvas);
  }

  .faq-category .faq-item__answer {
    padding-right: 0;
  }
}