.faq-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.faq-intro {
  padding: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.faq-number {
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.faq-intro h2,
.faq-card h2,
.faq-questions h2 {
  font-size: 15px;
  margin: 1px 0 8px;
}

.faq-intro p,
.faq-card p,
.faq-questions p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 13px;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.faq-card {
  padding: 22px;
  position: relative;
}

.faq-card.recommended {
  border-color: #9edc65;
  box-shadow: 0 4px 18px #86cc4330;
}

.recommended-label {
  position: absolute;
  right: 18px;
  top: 18px;
  font-size: 8px;
  letter-spacing: 1px;
  font-weight: 900;
  color: #087c63;
  background: #e7f7ee;
  border-radius: 5px;
  padding: 5px 7px;
}

.faq-card pre,
.faq-intro pre {
  margin: 12px 0 0;
  background: var(--navy);
  color: #b6ead4;
  padding: 14px;
  border-radius: 9px;
  font-size: 10px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
}

.faq-intro pre { font-size: 9px; }

.faq-note {
  margin-top: 14px;
  padding: 11px 12px;
  background: #f0f7f4;
  border-radius: 8px;
  color: #587177;
  font-size: 10px;
  line-height: 1.5;
}

.faq-note code,
.faq-questions code,
.faq-intro p code {
  background: #e7f0ed;
  color: #176b57;
  border-radius: 4px;
  padding: 2px 5px;
}

.faq-questions { padding: 22px; }
.faq-questions > h2 { margin-bottom: 9px; }

.faq-questions details {
  border-top: 1px solid #e8eeee;
  padding: 15px 2px;
}

.faq-questions summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.faq-questions details p {
  margin: 10px 0 0;
  max-width: 850px;
}

.faq-questions summary::marker { color: #19a377; }

@media (max-width: 1100px) {
  .faq-layout, .faq-grid { grid-template-columns: 1fr; }
  .faq-intro pre { font-size: 10px; }
}

@media (max-width: 620px) {
  .faq-intro, .faq-card, .faq-questions { padding: 17px; }
  .recommended-label {
    position: static;
    display: inline-block;
    margin-bottom: 10px;
  }
}