:root {
  --blue: #1f8ae6;
  --blue-dk: #0b5cad;
  --red: #ec3c30;
  --purple: #5a3db5;
  --ink: #1d2433;
  --muted: #5b6475;
  --line: #dfe4ec;
  --soft: #f4f7fb;
  --code-bg: #0f1724;
  --code-head: #1a2436;
}




* { box-sizing: border-box; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body {
  margin: 0; color: var(--ink); background: #fff;
  font: 10pt/1.55 "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--blue-dk); text-decoration: none; }
p { margin: 0 0 3mm; }
code, pre { font-family: "Cascadia Mono", Consolas, "Courier New", monospace; }
code { font-size: 8.6pt; background: var(--soft); border: 0.5pt solid var(--line); border-radius: 3px; padding: 0 3px; }

/* ---------- cover ---------- */
.cover {
  height: 297mm; position: relative; overflow: hidden; break-after: page;
  padding: 0 22mm;
  background:
    radial-gradient(120mm 120mm at 105% -5%, rgba(31,138,230,.10), transparent 70%),
    radial-gradient(110mm 110mm at -10% 105%, rgba(236,60,48,.08), transparent 70%), #fff;
}
.cover-band { position: absolute; left: 0; right: 0; top: 0; height: 7mm;
  background: linear-gradient(90deg, var(--blue) 0 45%, var(--red) 45% 82%, var(--purple) 82%); }
.cover .logo { display: block; width: 125mm; margin: 46mm auto 0; }
.cover-title { margin-top: 26mm; border-left: 2.2mm solid var(--blue); padding-left: 7mm; }
.eyebrow { font: 700 9.5pt "Segoe UI"; letter-spacing: .22em; text-transform: uppercase; color: var(--red); }
.cover h1 { font: 700 30pt/1.15 "Segoe UI Semibold", "Segoe UI", sans-serif; margin: 2mm 0 4mm; color: var(--ink); }
.cover .sub { font-size: 11.5pt; color: var(--muted); max-width: 140mm; }
.cover-meta { margin-top: 20mm; border-collapse: collapse; font-size: 10pt; }
.cover-meta th { text-align: left; color: var(--muted); font-weight: 600; padding: 1.6mm 10mm 1.6mm 0; }
.cover-meta td { padding: 1.6mm 0; }
.cover-foot { position: absolute; left: 22mm; right: 22mm; bottom: 16mm; padding-top: 4mm;
  border-top: 0.6pt solid var(--line); font-size: 8.5pt; color: #8a92a2; }

/* ---------- toc ---------- */
.toc-page { break-after: page; }
.toc-h { font-size: 20pt; margin: 0 0 8mm; border-bottom: 1.2mm solid var(--blue); padding-bottom: 3mm; display: block; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { border-bottom: 0.5pt dashed var(--line); }
.toc a { display: flex; align-items: baseline; gap: 3mm; padding: 3.3mm 1mm; color: var(--ink); font-size: 11.5pt; }
.toc .tn { width: 9mm; font-weight: 700; color: var(--blue-dk); }
.toc .tt { font-weight: 600; }
.toc .lead { flex: 1; border-bottom: 1pt dotted #b9c1cf; transform: translateY(-1mm); }
.toc .tp { min-width: 8mm; text-align: right; font-weight: 700; color: var(--red); }

/* ---------- sections ---------- */
.sec { margin-top: 11mm; }
.sec.newpage { break-before: page; margin-top: 0; }
.sec > p:first-of-type, .sec > .endpoint:first-of-type { break-before: avoid; }
h2 {
  display: flex; align-items: center; gap: 3mm; margin: 0 0 5mm; padding: 0 0 3mm;
  font: 700 17pt/1.2 "Segoe UI Semibold", "Segoe UI", sans-serif; color: var(--ink);
  border-bottom: 0.8pt solid var(--line); break-after: avoid;
}
h2 .num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 9.5mm; height: 9.5mm;
  border-radius: 2mm; background: var(--blue); color: #fff; font-size: 13pt;
}
h3 {
  font: 700 11pt "Segoe UI Semibold", "Segoe UI", sans-serif; color: var(--blue-dk);
  margin: 5mm 0 2mm; break-after: avoid;
}
h3::before { content: ""; display: inline-block; width: 1.2mm; height: 3.6mm; background: var(--red);
  margin-right: 2.2mm; vertical-align: -0.5mm; border-radius: 1px; }

.flow { padding-left: 6mm; margin: 0 0 2mm; }
.flow li { margin-bottom: 2mm; }
.conv { padding-left: 6mm; margin: 0; }
.conv li { margin-bottom: 1.4mm; }

.endpoint {
  display: flex; align-items: stretch; border: 0.8pt solid #c9d8ee; border-radius: 2mm;
  background: #f2f7fe; margin: 0 0 3mm; overflow: hidden; break-inside: avoid;
}
.endpoint .method { border-radius: 0; padding: 2.4mm 4mm; font-size: 9pt; display: flex; align-items: center; }
.endpoint .ep-url { padding: 2.4mm 4mm; font: 600 9.6pt "Cascadia Mono", Consolas, monospace;
  overflow-wrap: anywhere; word-break: break-all; align-self: center; }
.method { display: inline-block; font: 700 8.4pt "Segoe UI"; color: #fff; padding: .4mm 2.4mm;
  border-radius: 1.2mm; letter-spacing: .04em; white-space: nowrap; }
.method.post { background: #e57a00; }
.method.get { background: #1c9c5c; }

.note { margin: 4mm 0 0; padding: 3mm 4mm; background: #fff7ec; border-left: 1.2mm solid #e57a00;
  border-radius: 1mm; font-size: 9.3pt; }
.cap { font-size: 9.4pt; color: var(--muted); }

/* ---------- tables ---------- */
table.params { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 2mm;
  border: 0.8pt solid var(--line); border-radius: 2mm; overflow: hidden; font-size: 9.1pt; }
table.params thead { display: table-header-group; }
table.params th { background: #16233a; color: #fff; text-align: left; font-weight: 600;
  padding: 2.2mm 3mm; font-size: 8.8pt; }
table.params td { padding: 2.2mm 3mm; vertical-align: top; border-top: 0.6pt solid var(--line); }
table.params tbody tr:nth-child(even) td { background: #f8fafd; }
table.params tr { break-inside: avoid; }
table.params { table-layout: fixed; }
table.c4 th:nth-child(1) { width: 25%; } table.c4 th:nth-child(2) { width: 12%; }
table.c4 th:nth-child(3) { width: 35%; } table.c4 th:nth-child(4) { width: 28%; }
table.c3 th:nth-child(1) { width: 22%; } table.c3 th:nth-child(2) { width: 42%; }
table.c3 th:nth-child(3) { width: 36%; }
table.summary th:nth-child(1) { width: 12%; } table.summary th:nth-child(2) { width: 50%; }
table.summary th:nth-child(3) { width: 38%; }
table.two th:nth-child(1) { width: 24%; }
table.hdr th:nth-child(1) { width: 20%; } table.hdr th:nth-child(2) { width: 12%; }
table.hdr th:nth-child(3) { width: 12%; } table.hdr th:nth-child(4) { width: 56%; }
table.params code.pn { background: none; border: 0; padding: 0; color: #b42318; font-weight: 600; font-size: 8.8pt;
  overflow-wrap: anywhere; }
table.c4 td:nth-child(2) { white-space: nowrap; }
table.params code.sv { display: inline-block; margin: .5mm 0; font-size: 8.3pt; color: #0b5cad; }
code.brk { overflow-wrap: anywhere; word-break: break-all; }
td small { color: var(--muted); }
.req { display: inline-block; min-width: 5.5mm; text-align: center; background: #e7f6ee; color: #137a45;
  font-weight: 700; border-radius: 1mm; padding: 0 1.5mm; font-size: 8.6pt; }
.opt { color: #9aa2b1; }
blockquote { margin: 1.5mm 0 0; padding: 2mm 3mm; background: #f4f1fc; border-left: 1mm solid var(--purple);
  font-style: italic; color: #3b3260; border-radius: 1mm; }

/* ---------- code ---------- */
figure.code { break-inside: avoid; margin: 0 0 2mm; border-radius: 2mm; overflow: hidden; background: var(--code-bg);
  border: 0.8pt solid #0a101a; }
figure.code figcaption { display: flex; justify-content: space-between; align-items: center;
  background: var(--code-head); color: #9fb0cc; font: 600 7.8pt "Segoe UI"; letter-spacing: .08em;
  text-transform: uppercase; padding: 1.6mm 3.5mm; }
.dots b { display: inline-block; width: 2mm; height: 2mm; border-radius: 50%; margin-left: 1.2mm; background: #ff5f57; }
.dots b:nth-child(2) { background: #febc2e; }
.dots b:nth-child(3) { background: #28c840; }
figure.code pre { margin: 0; padding: 3mm 4mm; color: #e6edf6; font-size: 8.5pt; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }
figure.url pre { color: #a5d6ff; }
.ph { color: #ffb86b; font-weight: 600; }
.conv .ph { color: #c25e00; font-family: "Cascadia Mono", Consolas, monospace; font-size: 8.6pt; }

/* pygments token colours (dark theme) */
.code .p, .code .o { color: #c9d4e5; }
.code .nt { color: #7cc4ff; }          /* JSON keys */
.code .s2, .code .s1, .code .s, .code .se { color: #a5e07a; }
.code .mi, .code .mf, .code .m { color: #ffb86b; }
.code .k, .code .kd, .code .kr, .code .kc { color: #ff7ab2; }
.code .nv, .code .vm { color: #ffd479; }
.code .nb, .code .nf, .code .fm { color: #7cc4ff; }
.code .c1, .code .cm, .code .c { color: #7f8ea6; font-style: italic; }
.code .cp { color: #ff7ab2; font-weight: 600; }
.code .nx, .code .na { color: #e6edf6; }

/* ---------- service modes ---------- */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; margin: 2mm 0 2mm; }
.mode { border: 0.8pt solid var(--line); border-radius: 2.5mm; overflow: hidden; background: #fff; break-inside: avoid; }
.mode-h { padding: 3.5mm 4mm; color: #fff; }
.mode.ekyc .mode-h { background: linear-gradient(135deg, var(--blue), var(--blue-dk)); }
.mode.esign .mode-h { background: linear-gradient(135deg, var(--purple), #3f2a8a); }
.mode-h h4 { margin: 0 0 1.5mm; font-size: 12.5pt; }
.mode-h code { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; font-size: 8pt; }
.mode ul { list-style: none; margin: 0; padding: 2mm 4mm 3mm; }
.mode li { display: flex; gap: 2.5mm; padding: 1.8mm 0; border-bottom: 0.5pt dashed var(--line); font-size: 9.3pt; line-height: 1.45; }
.mode li:last-child { border-bottom: 0; }
.ck { flex: none; width: 4.2mm; height: 4.2mm; margin-top: .6mm; border-radius: 50%; background: #e7f6ee; position: relative; }
.ck::after { content: ""; position: absolute; left: 1.45mm; top: .75mm; width: 1.1mm; height: 2.1mm;
  border: solid #137a45; border-width: 0 .45mm .45mm 0; transform: rotate(45deg); }
table.cmp th:nth-child(1) { width: 30%; } table.cmp th:nth-child(2), table.cmp th:nth-child(3) { width: 35%; }
table.cmp td:first-child { font-weight: 600; }
.refund { display: flex; gap: 4mm; align-items: flex-start; margin: 5mm 0 3mm; padding: 4mm 5mm;
  background: linear-gradient(135deg, #ecfbf3, #f6fffa); border: 0.8pt solid #b9e8cf; border-left: 1.5mm solid #1c9c5c;
  border-radius: 2mm; break-inside: avoid; }
.refund-ic { flex: none; width: 10mm; height: 10mm; border-radius: 50%; background: #1c9c5c; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14pt; font-weight: 700; }
.refund h4 { margin: 0 0 1mm; font-size: 11.5pt; color: #0f6b3d; }
.refund p { margin: 0; }

/* ---------- screenshots ---------- */
figure.shot { margin: 0 0 6mm; break-inside: avoid; }
figure.shot img { width: 100%; display: block; border: 0.8pt solid var(--line); border-radius: 2mm;
  box-shadow: 0 1mm 3mm rgba(16,24,40,.12); }
figure.shot figcaption { font-size: 8.8pt; color: var(--muted); text-align: center; margin-top: 2mm; font-style: italic; }

/* ---------- website layout (overrides the print stylesheet) ---------- */
body.web {
  font: 15px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #fff; color: var(--ink);
}
body.web code, body.web pre, body.web .endpoint .ep-url {
  font-family: "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
html { scroll-behavior: smooth; }

.topbar {
  position: sticky; top: 0; z-index: 30; height: 60px; display: flex; align-items: center; gap: 16px;
  padding: 0 24px; background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.topbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue) 0 45%, var(--red) 45% 82%, var(--purple) 82%); }
.brand img { height: 38px; display: block; }
.tb-title { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-ver { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--purple); background: #f1edfc;
  padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.menu-btn { display: none; font-size: 22px; line-height: 1; background: none; border: 0; cursor: pointer;
  color: var(--ink); padding: 6px; }

.layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); width: 80%; margin: 0 auto;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.side { position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto;
  border-right: 1px solid var(--line); padding: 24px 14px 40px 20px; background: #fbfcfe; }
.side-h { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px 10px; }
.side ol { list-style: none; margin: 0; padding: 0; }
.side a { display: flex; gap: 8px; padding: 7px 10px; border-radius: 8px; color: #3a4354; font-size: 14px;
  line-height: 1.35; }
.side a:hover { background: #eef4fd; color: var(--blue-dk); }
.side a.active { background: #e3effd; color: var(--blue-dk); font-weight: 600; }
.side .nn { min-width: 18px; color: var(--blue); font-weight: 700; }

.content { padding: 36px 48px 60px; min-width: 0; }
.topbar { padding-left: 10%; padding-right: 10%; }
.hero { padding: 8px 0 28px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.hero .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.hero h1 { font-size: 36px; line-height: 1.2; margin: 6px 0 10px; }
.hero .sub { color: var(--muted); font-size: 16px; max-width: 680px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 14px; color: var(--muted); }
.hero-meta b { color: var(--ink); margin-right: 6px; }

body.web .sec { margin-top: 56px; break-before: auto; }
body.web h2 { scroll-margin-top: 76px; font-size: 26px; }
body.web h2 .num { min-width: 36px; height: 36px; border-radius: 8px; font-size: 18px; }
body.web h3 { font-size: 16px; margin: 26px 0 10px; }
body.web p { margin: 0 0 12px; }
body.web code { font-size: 13px; }
body.web .endpoint .ep-url { font-size: 14px; }
body.web .method { font-size: 12px; }
body.web table.params { font-size: 14px; }
body.web table.params th { font-size: 13px; }
body.web table.params code.pn, body.web table.params code.sv { font-size: 13px; }
body.web figure.code pre { font-size: 13px; padding: 14px 18px; }
body.web figure.code figcaption { font-size: 11px; }
body.web .note, body.web .cap { font-size: 14px; }

body.web .mode li, body.web .refund p { font-size: 14px; }
body.web .mode-h h4 { font-size: 18px; }
body.web .mode-h code { font-size: 12px; }
@media (max-width: 760px) { .modes { grid-template-columns: 1fr; } }

/* copy button */
figure.code { position: relative; }
.copy-btn { font: 600 11px/1 inherit; letter-spacing: .06em; text-transform: uppercase; color: #cfd9ea;
  background: #2a3650; border: 1px solid #3a4866; border-radius: 6px; padding: 5px 10px; cursor: pointer;
  margin-left: auto; margin-right: 10px; }
.copy-btn:hover { background: #34446a; }
.copy-btn.done { color: #8ff0b0; border-color: #2f7a4f; }

figure.shot a { display: block; }
figure.shot img { max-width: 100%; }

.foot { margin-top: 64px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr); width: 100%; border: 0; }
  .topbar { padding-left: 16px; padding-right: 16px; }
  .menu-btn { display: block; }
  .side { position: fixed; top: 60px; left: 0; bottom: 0; width: 280px; height: auto; z-index: 25;
    transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
  body.nav-open .side { transform: none; visibility: visible; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
  .content { padding: 24px 16px 48px; }
}
@media (max-width: 640px) {
  .topbar { padding: 0 12px; gap: 10px; }
  .brand img { height: 30px; }
  .tb-title { font-size: 14px; }
  .tb-ver { display: none; }
  .hero h1 { font-size: 27px; }
  body.web h2 { font-size: 21px; }
  /* stack parameter tables into cards on narrow screens */
  body.web table.params, body.web table.params tbody, body.web table.params tr, body.web table.params td {
    display: block; width: 100% !important; }
  body.web table.params thead { display: none; }
  body.web table.params tr { border-top: 1px solid var(--line); padding: 8px 0; }
  body.web table.params td { border: 0; padding: 4px 12px; white-space: normal !important; }
  body.web table.params td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
  .endpoint { flex-direction: column; }
}