.jdSettlement-page {
  --font-brand: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --type-heading: 28px;
  --type-body: 13px;
  --type-detail: 12px;
  --type-caption: 11px
}

.jdSettlement-page {
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6
}

.jdSettlement-page button,
.jdSettlement-page input {
  font-family: inherit
}

.jdSettlement-page .desktop-nav a,
.jdSettlement-page .mobile-nav a {
  font-size: var(--type-detail)
}

.jdSettlement-page .nav-phone {
  font-size: 12px;
  letter-spacing: .06em
}

.jdSettlement-page .button,
.jdSettlement-page .nav-cta,
.jdSettlement-page .hero-actions .primary,
.jdSettlement-page .hero-actions .text-button,
.jdSettlement-page .onboarding-action .button,
.jdSettlement-page .text-link {
  font-size: var(--type-detail);
  font-weight: 500;
  line-height: 1.6
}

.jdSettlement-page .hero-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em
}

.jdSettlement-page .hero h1 {
  font-size: clamp(30px, 3.1vw, 40px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0
}

.jdSettlement-page .hero-description {
  font-size: var(--type-body);
  line-height: 1.8;
  letter-spacing: 0
}

.jdSettlement-page .official-summary p {
  font-size: 14px;
  line-height: 1.6
}

.jdSettlement-page .official-summary > span {
  font-size: var(--type-caption);
  letter-spacing: .04em
}

.jdSettlement-page .section h2,
.jdSettlement-page .demo-section h2 {
  font-size: var(--type-heading);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0
}

.jdSettlement-page .section-heading > p,
.jdSettlement-page .section-heading > .flow-intro {
  font-size: var(--type-body);
  line-height: 1.85
}

.jdSettlement-page .feature h3,
.jdSettlement-page .solution-explainer .feature h3 {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0
}

.jdSettlement-page .feature > p,
.jdSettlement-page .solution-explainer .feature > p {
  font-size: var(--type-detail);
  line-height: 1.85
}

.jdSettlement-page .ecosystem-visual figcaption > span {
  font-size: var(--type-caption);
  letter-spacing: .04em
}

.jdSettlement-page .ecosystem-visual figcaption small,
.jdSettlement-page .scenario-media figcaption span {
  font-size: 10px
}

.jdSettlement-page .segmented button {
  font-size: 12px;
  font-weight: 500
}

.jdSettlement-page .green-pill,
.jdSettlement-page .flow-note {
  font-size: 11px
}

.jdSettlement-page .flow-node strong {
  font-size: 13px;
  font-weight: 500
}

.jdSettlement-page .bank-node strong {
  font-size: 12px
}

.jdSettlement-page .flow-node small {
  font-size: 11px
}

.jdSettlement-page .mallbook-node strong {
  font-size: 11px;
  font-weight: 500
}

.jdSettlement-page .mallbook-node small,
.jdSettlement-page .flow-arrow span,
.jdSettlement-page .recipients small {
  font-size: 10px
}

.jdSettlement-page .recipients > div,
.jdSettlement-page .data-route,
.jdSettlement-page .data-route strong,
.jdSettlement-page .flow-insight p,
.jdSettlement-page .trace-label {
  font-size: 11px
}

.jdSettlement-page .data-route strong {
  font-weight: 500
}

.jdSettlement-page .trace-row {
  font-size: 12px
}

.jdSettlement-page .scenario-tabs button {
  font-size: 14px;
  font-weight: 500
}

.jdSettlement-page .scenario-tabs button span {
  font-size: 11px;
  font-weight: 400
}

.jdSettlement-page .small-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em
}

.jdSettlement-page .scenario-text h3 {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.03em
}

.jdSettlement-page .scenario-text > p {
  font-size: 13px;
  line-height: 1.9
}

.jdSettlement-page .scenario-text li {
  font-size: 11px;
  line-height: 1.85
}

.jdSettlement-page .scenario-text .text-link {
  font-size: 12px;
  font-weight: 500
}

.jdSettlement-page .scenario-media figcaption strong {
  font-size: 14px;
  font-weight: 500
}

.jdSettlement-page .demo-copy > p:not(.section-kicker) {
  font-size: 13px;
  line-height: 1.9
}

.jdSettlement-page .demo-tip p {
  font-size: 11px;
  line-height: 1.8
}

.jdSettlement-page .calc-heading h3 {
  font-size: 16px;
  font-weight: 500
}

.jdSettlement-page .demo-tag {
  font-size: 10px
}

.jdSettlement-page .amount-label,
.jdSettlement-page .calc-table-head {
  font-size: 11px
}

.jdSettlement-page .amount-input input {
  font-size: 28px;
  font-weight: 500
}

.jdSettlement-page .calc-row {
  font-size: 12px
}

.jdSettlement-page .rate-input input,
.jdSettlement-page .calc-row output {
  font-size: 13px;
  font-weight: 500
}

.jdSettlement-page .calc-bottom,
.jdSettlement-page .reset-button,
.jdSettlement-page .calc-error {
  font-size: 11px
}

.jdSettlement-page .onboarding-steps article > span {
  font-size: 27px;
  font-weight: 500
}

.jdSettlement-page .onboarding-steps h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5
}

.jdSettlement-page .onboarding-steps p {
  font-size: 12px;
  line-height: 1.8
}

.jdSettlement-page .faq-list summary {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7
}

.jdSettlement-page .faq-list details > p {
  font-size: 13px;
  line-height: 1.9
}

.jdSettlement-page .footer-top > span,
.jdSettlement-page .back-top,
.jdSettlement-page .footer-bottom,
.jdSettlement-page .footer-bottom p {
  font-size: 11px;
  line-height: 1.7
}

.jdSettlement-page .quick-contact a {
  font-size: 10px
}

.jdSettlement-page .toast {
  font-size: 13px
}

@media (max-width: 1000px) {
  .jdSettlement-page .flow-node strong {
    font-size: 12px
  }

  .jdSettlement-page .bank-node strong,
  .jdSettlement-page .mallbook-node strong {
    font-size: 11px
  }

  .jdSettlement-page .flow-node small,
  .jdSettlement-page .recipients > div {
    font-size: 10px
  }

  .jdSettlement-page .mallbook-node small,
  .jdSettlement-page .recipients small {
    font-size: 9px
  }
}

@media (max-width: 760px) {
  .jdSettlement-page {
    --type-heading: 24px
  }

  .jdSettlement-page .hero h1 {
    font-size: 32px
  }

  .jdSettlement-page .hero-description {
    font-size: 12px
  }

  .jdSettlement-page .official-summary p {
    font-size: 12px
  }

  .jdSettlement-page .official-summary > span {
    font-size: 10px
  }

  .jdSettlement-page .scenario-tabs button {
    font-size: 12px
  }

  .jdSettlement-page .scenario-tabs button span {
    font-size: 10px
  }

  .jdSettlement-page .green-pill,
  .jdSettlement-page .flow-note {
    font-size: 10px
  }

  .jdSettlement-page .trace-row {
    font-size: 10px
  }

  .jdSettlement-page .quick-contact a {
    font-size: 8px
  }
}

@media (max-width: 420px) {
  .jdSettlement-page .hero h1 {
    font-size: 29px
  }
}