/* sapro.my/developers: on top of sapro-landing.css (nav, footer, fonts, colours). */
.dv { background: var(--lp-tint); }
.dv-main { padding-top: 110px; padding-bottom: 80px; max-width: 980px; }
.dv code { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: #eef0f7; color: #1e1b4b; padding: 1px 6px; border-radius: 6px; word-break: break-word; }
.dv-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-primary); background: var(--lp-primary-soft); padding: 5px 10px; border-radius: 99px; }
.dv-hero { padding: 24px 0 8px; }
.dv-hero h1 { font-size: clamp(32px, 5vw, 48px); margin: 14px 0 12px; }
.dv-hero p { font-size: 17px; line-height: 1.65; max-width: 700px; margin: 0; }
.dv-btn-demo { display: flex; align-items: center; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.dv-btn-demo small { color: var(--lp-muted); }
.dv-connect { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 10px; background: var(--lp-ink); color: #fff; font-weight: 600; font-size: 15px; box-shadow: var(--lp-shadow); }
.dv-connect svg { width: 18px; height: 18px; color: #a5b4fc; }
.dv-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 0 8px; }
.dv-steps > div { background: #fff; border: 1px solid var(--lp-border); border-radius: var(--lp-radius); padding: 20px; box-shadow: var(--lp-shadow); }
.dv-steps b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px; background: var(--lp-primary); color: #fff; font-size: 14px; }
.dv-steps h3 { font-size: 17px; margin: 12px 0 6px; }
.dv-steps p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.dv-sec { background: #fff; border: 1px solid var(--lp-border); border-radius: var(--lp-radius); padding: 28px; margin-top: 24px; box-shadow: var(--lp-shadow); scroll-margin-top: 90px; }
.dv-sec h2 { font-size: 26px; margin-bottom: 8px; }
.dv-sec h3 { font-size: 17px; margin: 26px 0 10px; }
.dv-sec p, .dv-list { font-size: 15px; line-height: 1.65; }
.dv-list { padding-left: 20px; }
.dv-list li + li { margin-top: 6px; }
.dv-code { background: var(--lp-ink); color: #e2e8f0; border-radius: 12px; padding: 16px 18px; overflow-x: auto; margin: 12px 0; font-size: 13px; line-height: 1.6; }
.dv-code code { background: none; color: inherit; padding: 0; font-size: inherit; word-break: normal; white-space: pre; }
.dv-table { overflow-x: auto; border: 1px solid var(--lp-border); border-radius: 12px; margin: 12px 0; }
.dv-table table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.dv-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--lp-muted); background: #f8fafc; padding: 10px 14px; }
.dv-table td { padding: 11px 14px; border-top: 1px solid var(--lp-border); vertical-align: top; line-height: 1.5; }
.dv .lp-foot-base a { color: inherit; }
@media (max-width: 760px) {
  .dv-steps { grid-template-columns: minmax(0, 1fr); }
  .dv-sec { padding: 20px; }
  .dv .lp-links { display: none; }
}