/* PAYATE Mock Payment Sandbox — scoped under #psx. System font body (zero webfont CLS),
   Poppins headings with metrics-matched fallback. Professional developer-tool look. */
@font-face{font-family:"PoppinsFB";src:local("Segoe UI Semibold"),local("Segoe UI"),local("Roboto Medium"),local("Roboto"),local("Helvetica Neue"),local("Arial");size-adjust:107%;ascent-override:98%;descent-override:32.7%;line-gap-override:0%}

body{margin:0;background:#f4f7fb;color:#14233c;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
#psx{--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  max-width:820px;margin:0 auto;padding:22px 16px 40px}
#psx h1,#psx h2{font-family:Poppins,"PoppinsFB",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}

#psx .pv-hero{background:#fff;border:1px solid #e6ecf5;border-radius:16px;padding:24px;
  box-shadow:0 1px 2px rgba(15,27,45,.05);margin-bottom:16px}
#psx .pv-hero h1{margin:0 0 8px;font-size:25px;line-height:1.2;color:#0f1b2d;font-weight:700}
#psx .pv-hero p{margin:0 0 12px;font-size:14px;line-height:1.7;color:#4a5b73;max-width:680px}
#psx .pv-flag{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.02em;
  color:#1d64d8;background:#eaf1fe;border:1px solid #cfe0fb;border-radius:20px;padding:5px 12px}

#psx .pv-card{background:#fff;border:1px solid #e6ecf5;border-radius:14px;padding:18px 18px 20px;
  box-shadow:0 1px 2px rgba(15,27,45,.05);margin-bottom:16px}
#psx .pv-card h2{margin:0 0 6px;font-size:17px;color:#0f1b2d}
#psx label{display:block;font-size:12.5px;font-weight:600;color:#5a6b83;margin:0 0 6px}
#psx input[type=text]{width:100%;box-sizing:border-box;border:1px solid #d7deea;border-radius:10px;
  padding:12px 14px;font-size:16px;letter-spacing:.5px;color:#14233c;background:#fbfcfe;font-family:var(--mono)}
#psx input:focus{outline:none;border-color:#1d64d8;background:#fff;box-shadow:0 0 0 3px rgba(29,100,216,.12)}
#psx button{margin-top:12px;background:#1d64d8;color:#fff;border:0;border-radius:10px;
  padding:11px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s}
#psx button:hover{background:#1550b4}

/* response */
#psx .pv-res{margin-top:16px;border:1px solid #e6ecf5;border-radius:12px;overflow:hidden}
#psx .pv-badge{display:inline-block;margin:14px 0 0 14px;font-size:11px;font-weight:700;letter-spacing:.07em;
  padding:5px 12px;border-radius:6px;color:#fff}
#psx .pv-res--approved .pv-badge{background:#17b26a}
#psx .pv-res--declined .pv-badge{background:#e04545}
#psx .pv-res--error .pv-badge{background:#f79009}
#psx .pv-badge--muted{background:#8a97a8}
#psx .pv-msg{padding:8px 14px 12px;font-size:13.5px;color:#3d4d63;line-height:1.6}
#psx .pv-json{margin:0;background:#0f1b2d;color:#d7e2f2;padding:16px 18px;font-family:var(--mono);
  font-size:13px;line-height:1.6;overflow-x:auto;white-space:pre}
#psx .pv-res--unknown{border-style:dashed}

/* table */
#psx .pv-note{margin:0 0 12px;font-size:13px;color:#7c8aa4}
#psx .pv-tbl{width:100%;border-collapse:collapse;font-size:13px}
#psx .pv-tbl th{text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:#7c8aa4;
  padding:8px 10px;border-bottom:2px solid #eef2f8}
#psx .pv-tbl td{padding:9px 10px;border-bottom:1px solid #f0f3f8;color:#3d4d63}
#psx .pv-tbl code{font-family:var(--mono);font-size:12.5px;color:#0f1b2d}
#psx .pv-trow{cursor:pointer;transition:background .12s}
#psx .pv-trow:hover{background:#f5f9ff}
#psx .pv-pill{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:6px}
#psx .pv-pill--ok{background:#eafaf1;color:#0a7f4e;border:1px solid #bfe8cf}
#psx .pv-pill--no{background:#fdecec;color:#b42020;border:1px solid #f4c7c7}
#psx .pv-pill--err{background:#fff5e6;color:#a35a00;border:1px solid #ffe0b3}

/* FAQ */
#psx .pv-faq{background:#fff;border:1px solid #e6ecf5;border-radius:16px;padding:20px 22px;
  box-shadow:0 1px 2px rgba(15,27,45,.05)}
#psx .pv-faq h2{margin:0 0 10px;font-size:19px;color:#0f1b2d}
#psx .pv-faq details{border-top:1px solid #eef2f8;padding:2px 0}
#psx .pv-faq details:first-of-type{border-top:0}
#psx .pv-faq summary{cursor:pointer;list-style:none;padding:12px 26px 12px 2px;position:relative;
  font-weight:600;font-size:14.5px;color:#14233c}
#psx .pv-faq summary::-webkit-details-marker{display:none}
#psx .pv-faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-size:18px;color:#7c8aa4}
#psx .pv-faq details[open] summary::after{content:"\2212"}
#psx .pv-faq details p{margin:0 2px 12px;font-size:13.5px;line-height:1.7;color:#4a5b73}
#psx .pv-faq code{background:#eef2f8;padding:1px 5px;border-radius:4px;font-size:12.5px;font-family:var(--mono)}
#psx .pv-faq a{color:#1d64d8;text-decoration:none}

/* Shared "More PAYATE tools" related section */
.pyt-rel{max-width:820px;margin:16px auto;padding:20px 22px;background:#fff;border:1px solid #e6ecf5;border-radius:14px;box-shadow:0 1px 2px rgba(15,27,45,.05);font-family:Poppins,"PoppinsFB",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#14233c}
.pyt-rel h2{margin:0 0 12px;font-size:18px;color:#0f1b2d}
.pyt-rel .prg{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.pyt-rel a{display:block;text-decoration:none;border:1px solid #e6ecf5;border-radius:10px;padding:12px 14px;background:#fbfcfe;transition:border-color .15s,background .15s}
.pyt-rel a:hover{border-color:#1d64d8;background:#f2f7ff}
.pyt-rel .prt{display:block;font-weight:600;font-size:14px;color:#14233c;margin-bottom:2px}
.pyt-rel .prd{display:block;font-size:12px;line-height:1.4;color:#7c8aa4}