.documents-section {
  background: #fff;
}

.document-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 34px 0 22px;
}

.document-tab {
  border: 1px solid #e3d6c0;
  background: #f7f4ef;
  border-radius: 999px;
  padding: 13px 20px;
  font: inherit;
  font-weight: 800;
  color: #171717;
  cursor: pointer;
  transition: .2s;
}

.document-tab.active,
.document-tab:hover {
  background: #15120e;
  color: #fff;
  border-color: #15120e;
}

.documents-panel {
  max-width: 920px;
  margin: 0 auto;
  background: #f7f4ef;
  border: 1px solid #eadfcd;
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(0,0,0,.05);
  overflow: hidden;
}

.document-content {
  display: none;
  max-height: 620px;
  overflow: auto;
  padding: 34px;
}

.document-content.active {
  display: block;
}

.document-content h3 {
  margin: 0 0 18px;
  font-size: clamp(24px, 3vw, 34px);
}

.document-content h4 {
  margin: 26px 0 10px;
  font-size: 20px;
}

.document-content p,
.document-content li {
  color: #4f4f4f;
  line-height: 1.72;
}

.document-content ul {
  margin: 0 0 18px;
  padding-left: 22px;
}

.document-content a {
  color: #8c6a35;
  font-weight: 800;
}

@media (max-width: 560px) {
  .document-tab {
    width: 100%;
  }

  .document-content {
    max-height: 560px;
    padding: 22px;
  }
}

#documents { scroll-margin-top: 24px; }
#documents .document-content { overflow-wrap: anywhere; }
#documents .document-tab:focus-visible { outline: 3px solid #b9965d; outline-offset: 3px; }