.terms-graphic {
  position: relative;
  min-height: 350px;
}
.terms-graphic > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.terms-graphic path {
  fill: none;
  stroke: rgba(229, 31, 43, 0.38);
  stroke-width: 1.5;
  stroke-dasharray: 6 7;
}
.terms-node,
.terms-center {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}
.terms-node {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  font-size: 1.45rem;
}
.terms-node.document {
  left: 7%;
  top: 35px;
}
.terms-node.wallet {
  right: 7%;
  top: 35px;
}
.terms-node.chain {
  left: 7%;
  bottom: 35px;
}
.terms-node.check {
  right: 7%;
  bottom: 35px;
}
.terms-center {
  left: 50%;
  top: 50%;
  width: 155px;
  height: 175px;
  padding: 18px;
  text-align: center;
  border-radius: 34px;
  transform: translate(-50%, -50%);
}
.terms-center > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--color-primary);
  border-radius: 50%;
  font: 600 1.4rem var(--font-display);
}
.terms-center b,
.terms-center small {
  display: block;
}
.terms-center small {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}
.terms-graphic > em {
  position: absolute;
  right: 0;
  top: 48%;
  color: #8e7775;
  font: italic 1rem/1.25 var(--font-display);
  transform: rotate(-7deg);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 21px 0;
}
.service-grid article {
  padding: 17px;
  background: var(--color-surface-warm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.service-grid i {
  color: var(--color-primary);
  font-style: normal;
  font-size: 1.35rem;
}
.service-grid h3 {
  margin-top: 12px;
  font: 700 var(--text-ui) var(--font-body);
}
.service-grid p {
  font-size: var(--text-small);
}
.cross-list {
  display: grid;
  gap: 10px;
  margin: 17px 0;
  padding: 0;
  list-style: none;
}
.cross-list li {
  position: relative;
  padding-left: 24px;
}
.cross-list li::before {
  content: '×';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}
.risk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 20px;
}
.risk-grid span {
  position: relative;
  padding: 14px 14px 14px 39px;
  background: var(--color-surface-warm);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: var(--text-small);
}
.risk-grid span::before {
  content: '!';
  position: absolute;
  left: 14px;
  top: 13px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}
.acceptance-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 21px;
  padding: 17px 19px;
  background: var(--color-primary-soft);
  border: 1px solid rgba(229, 31, 43, 0.2);
  border-radius: var(--radius-md);
}
.acceptance-note i {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex: 0 0 27px;
  color: #fff;
  background: #17a877;
  border-radius: 50%;
  font-style: normal;
}
.acceptance-note p {
  margin: 0;
}
#terms-cta .eyebrow {
  color: var(--color-primary-hover);
}

html[data-theme='dark'] #terms-cta .eyebrow {
  color: #f05e64;
}
html[data-theme='dark'] .terms-node,
html[data-theme='dark'] .terms-center {
  background: #191a1c;
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}
html[data-theme='dark'] .service-grid article,
html[data-theme='dark'] .risk-grid span {
  background: #191a1c;
  border-color: rgba(255, 255, 255, 0.09);
}
html[data-theme='dark'] .acceptance-note {
  background: rgba(229, 31, 43, 0.08);
}
@media (max-width: 650px) {
  .terms-graphic {
    min-height: 310px;
  }
  .terms-graphic > em {
    display: none;
  }
  .terms-node {
    width: 48px;
    height: 48px;
  }
  .service-grid,
  .risk-grid {
    grid-template-columns: 1fr;
  }
}