/* Developer portal styles, lifted from the VaaS sandbox artifact.

   Recoloured to the indigo palette 2026-08-11. The artifact arrived on the old
   blue-green teal and was the last page the palette swap never reached. Every
   value below now names the same colour the marketing stylesheet does, so the
   site nav and footer this page also loads no longer sit on a different system.

   Three families are deliberately NOT indigo, because they carry meaning rather
   than brand: approve/review/deny, the amber sandbox notice, and the JSON syntax
   tokens. Recolouring those to one hue would cost the reader the distinction the
   colour exists to make. Only the teal token moved, to cyan.
   Everything is scoped under .dev because the artifact reuses names the
   marketing stylesheet also defines (.hero, .btn, .grid2, .eyebrow) and
   redefines shared custom properties (--teal, --line, --text) with different
   values. Its :root and body rules become .dev so they cannot reach the
   site nav or footer. Six class names were prefixed dv- where the site's
   rules would still have leaked in. */
.dev{
    --ink:#352D6F;       
    --navy2:#2E2660;     
    --navy3:#453B87;     
    --teal:#5361A8;      
    --teal-dk:#352D6F;
    --teal-bright:#8DDCF1;
    --mint:#E8F8FC;
    --paper:#F8F8FA;
    --surface:#FFFFFF;
    --line:#EBEAF1;
    --line-soft:#F2F1F7;
    --text:#262238;
    --muted:#4E4C63;
    --muted-2:#76738C;
    --approve:#017F4D; --approve-bg:#E7F6EF;
    --review:#C9831F;  --review-bg:#FBF1DF;
    --deny:#C2453B;    --deny-bg:#FBEAE8;
    --disp:"Space Grotesk", system-ui, sans-serif;
    --body:"Inter", system-ui, -apple-system, sans-serif;
    --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --r:12px; --r-sm:8px;
    --shadow:0 1px 2px rgba(37,31,78,.05), 0 12px 32px -16px rgba(37,31,78,.18);
  }
.dev *{box-sizing:border-box}
html{scroll-behavior:smooth}
.dev{
    margin:0;background:var(--paper);color:var(--text);
    font-family:var(--body);font-size:15px;line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
.dev a{color:inherit;text-decoration:none}
.dev .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.dev .mono{font-family:var(--mono)}
.dev header.nav{position:sticky;top:0;z-index:50;background:rgba(248,248,250,.85);
    backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.dev .nav-in{display:flex;align-items:center;gap:28px;height:64px}
.dev .brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);
    font-weight:700;letter-spacing:.14em;font-size:15px;color:var(--ink)}
.dev .brand .dot{width:11px;height:11px;border-radius:50%;
    background:conic-gradient(from 210deg,var(--teal),var(--teal-bright),var(--teal));}
.dev .nav-links{display:flex;gap:22px;margin-left:8px;font-weight:500;color:var(--muted)}
.dev .nav-links a:hover{color:var(--ink)}
.dev .nav-links a.active{color:var(--ink)}
.dev .nav-links a.active::after{content:"";display:block;height:2px;border-radius:2px;
    background:var(--teal);margin-top:4px}
.dev .nav-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.dev .nav-right .signin{font-weight:500;color:var(--muted)}
.dev .nav-right .signin:hover{color:var(--ink)}
.dev .dv-btn{font-family:var(--body);font-weight:600;font-size:14px;cursor:pointer;
    border:none;border-radius:var(--r-sm);padding:10px 16px;transition:.15s ease}
.dev .btn-primary{background:var(--teal);color:#fff}
.dev .btn-primary:hover{background:var(--teal-dk)}
.dev .dv-btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.dev .dv-btn-ghost:hover{border-color:var(--muted-2)}
.dev .dv-btn:focus-visible, .dev a:focus-visible, .dev input:focus-visible, .dev select:focus-visible, .dev [tabindex]:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.dev .dv-hero{position:relative;background:
      radial-gradient(120% 140% at 85% -10%,rgba(141,220,241,.16),transparent 55%),
      linear-gradient(180deg,#352D6F,#2E2660);
    color:#fff;overflow:hidden}
.dev .dv-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:34px 34px;mask-image:radial-gradient(80% 90% at 70% 0%,#000,transparent 75%)}
.dev .hero-in{position:relative;z-index:1;padding:62px 0 72px;max-width:760px}
.dev .dv-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
    font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-bright);
    border:1px solid rgba(141,220,241,.35);border-radius:999px;padding:5px 12px}
.dev .dv-eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--teal-bright);
    box-shadow:0 0 0 0 rgba(141,220,241,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(141,220,241,.5)}70%{box-shadow:0 0 0 9px rgba(141,220,241,0)}100%{box-shadow:0 0 0 0 rgba(141,220,241,0)}}
.dev h1.hero-h{font-family:var(--disp);font-weight:700;font-size:clamp(30px,4.6vw,50px);
    line-height:1.04;letter-spacing:-.02em;margin:20px 0 16px}
.dev h1.hero-h em{font-style:normal;color:var(--teal-bright)}
.dev .dv-hero p{font-size:17px;color:#D3D1DF;max-width:600px;margin:0 0 26px}
.dev .chips{display:flex;flex-wrap:wrap;gap:10px}
.dev .chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;
    color:#DEDCEA;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
    border-radius:999px;padding:7px 13px}
.dev .chip b{font-family:var(--mono);font-weight:600;color:#fff}
.dev .sec{padding:56px 0}
.dev .sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.dev .step-no{font-family:var(--mono);font-size:13px;font-weight:600;color:#fff;
    background:var(--teal);border-radius:7px;padding:3px 9px}
.dev .sec-head h2{font-family:var(--disp);font-weight:600;font-size:24px;letter-spacing:-.01em;margin:0}
.dev .sec-sub{color:var(--muted);margin:0 0 26px;max-width:640px}
.dev .cred{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
    box-shadow:var(--shadow);padding:24px}
.dev .cred-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dev .cred-top .copy-note{color:var(--muted);font-size:13px;max-width:420px}
.dev .keys{margin-top:20px;display:grid;gap:12px}
.dev .keyrow{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:12px;
    background:var(--mint);border:1px solid #C9EAF4;border-radius:var(--r-sm);padding:11px 14px}
.dev .keyrow .klabel{font-family:var(--mono);font-size:12px;color:var(--teal-dk);font-weight:600}
.dev .keyrow .kval{font-family:var(--mono);font-size:13.5px;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev .copybtn{font-family:var(--body);font-size:12px;font-weight:600;color:var(--teal-dk);
    background:#fff;border:1px solid #C9EAF4;border-radius:6px;padding:5px 10px;cursor:pointer}
.dev .copybtn:hover{background:#F0FAFD}
.dev .cred-foot{margin-top:16px;font-size:12.5px;color:var(--muted-2);
    display:flex;gap:18px;flex-wrap:wrap}
.dev .cred-foot span{display:inline-flex;align-items:center;gap:6px}
.dev .tick{color:var(--teal)}
.dev .hidden{display:none !important}
.dev .explorer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
    box-shadow:var(--shadow);background:var(--surface)}
.dev .req{padding:22px;border-right:1px solid var(--line)}
.dev .endpoint{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;
    background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:9px 12px;margin-bottom:20px}
.dev .verb{background:var(--teal);border-radius:5px;padding:2px 8px;font-weight:600;font-size:12px}
.dev .field-group{margin-bottom:22px}
.dev .fg-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted-2);margin-bottom:11px;display:flex;align-items:center;gap:8px}
.dev .modules{display:grid;gap:9px}
.dev .mod{display:flex;align-items:center;gap:12px;border:1px solid var(--line);
    border-radius:var(--r-sm);padding:11px 13px;cursor:pointer;transition:.15s;background:#fff}
.dev .mod:hover{border-color:var(--teal)}
.dev .mod.on{border-color:var(--teal);background:#F2FBFE;box-shadow:inset 0 0 0 1px var(--teal)}
.dev .mod .cbx{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--muted-2);
    flex:none;display:grid;place-items:center;color:#fff;transition:.15s}
.dev .mod.on .cbx{background:var(--teal);border-color:var(--teal)}
.dev .mod .cbx svg{width:11px;height:11px;opacity:0}
.dev .mod.on .cbx svg{opacity:1}
.dev .mod .mname{font-weight:600;font-size:14px}
.dev .mod .mmeta{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--muted);text-align:right}
.dev .mod .mmeta .tier-tag{display:inline-block;margin-top:2px;font-size:10px;padding:1px 6px;border-radius:999px;
    background:var(--mint);color:var(--teal-dk);font-weight:600;letter-spacing:.04em}
.dev .mod .mmeta .tier-tag.enh{background:var(--teal-dk);color:var(--teal-bright)}
.dev .mod .mmeta .tier-tag.tbd{background:#EFEEF5;color:var(--muted)}
.dev .seg{display:inline-flex;background:var(--line-soft);border-radius:999px;padding:3px;gap:2px}
.dev .seg button{font-family:var(--body);border:none;background:transparent;cursor:pointer;
    font-size:12.5px;font-weight:600;color:var(--muted);padding:5px 13px;border-radius:999px}
.dev .seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.dev .dv-grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.dev .inp{display:flex;flex-direction:column;gap:5px}
.dev .inp.full{grid-column:1/-1}
.dev .inp label{font-size:12px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:7px}
.dev .enh-pill{font-size:9.5px;font-family:var(--mono);font-weight:600;letter-spacing:.04em;
    background:var(--teal-dk);color:var(--teal-bright);border-radius:999px;padding:1px 6px}
.dev .inp input{font-family:var(--mono);font-size:13px;color:var(--ink);background:#fff;
    border:1px solid var(--line);border-radius:7px;padding:9px 11px;width:100%}
.dev .inp input:focus{border-color:var(--teal)}
.dev .inp input::placeholder{color:var(--muted-2)}
.dev .sandbox-ctl{background:#FAFAFC;border:1px dashed #D6D4E4;border-radius:var(--r-sm);padding:14px}
.dev .sandbox-ctl .hint{font-size:12px;color:var(--muted);margin:0 0 12px}
.dev .sandbox-ctl .hint code{font-family:var(--mono);font-size:11px;background:var(--mint);
    color:var(--teal-dk);padding:1px 5px;border-radius:4px}
.dev .outcomes{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:12px}
.dev .oc{font-family:var(--body);font-size:12.5px;font-weight:600;cursor:pointer;
    border:1px solid var(--line);background:#fff;border-radius:7px;padding:8px 6px;color:var(--muted);
    display:flex;flex-direction:column;align-items:center;gap:5px;transition:.12s}
.dev .oc .led{width:8px;height:8px;border-radius:50%;background:var(--muted-2)}
.dev .oc[data-v="approve"].on{border-color:var(--approve);color:var(--approve);background:var(--approve-bg)}
.dev .oc[data-v="approve"].on .led{background:var(--approve)}
.dev .oc[data-v="review"].on{border-color:var(--review);color:var(--review);background:var(--review-bg)}
.dev .oc[data-v="review"].on .led{background:var(--review)}
.dev .oc[data-v="deny"].on{border-color:var(--deny);color:var(--deny);background:var(--deny-bg)}
.dev .oc[data-v="deny"].on .led{background:var(--deny)}
.dev .oc[data-v="async"].on{border-color:var(--ink);color:var(--ink);background:#EFEEF5}
.dev .oc[data-v="async"].on .led{background:var(--ink)}
.dev .path-row{display:flex;align-items:center;gap:10px}
.dev .path-row label{font-size:12px;color:var(--muted);font-family:var(--mono)}
.dev .path-row select{flex:1;font-family:var(--mono);font-size:12.5px;color:var(--ink);
    border:1px solid var(--line);border-radius:7px;padding:8px 10px;background:#fff}
.dev .send-row{margin-top:22px;display:flex;align-items:center;gap:14px}
.dev .btn-send{flex:1;background:var(--teal);color:#fff;font-size:15px;font-weight:600;
    border:none;border-radius:var(--r-sm);padding:13px;cursor:pointer;display:flex;
    align-items:center;justify-content:center;gap:9px;transition:.15s}
.dev .btn-send:hover{background:var(--teal-dk)}
.dev .btn-send:disabled{background:#B4B1C8;cursor:not-allowed}
.dev .btn-send .spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dev .err-msg{font-size:12.5px;color:var(--deny);font-weight:500}
.dev .res{background:var(--ink);color:#E7E5F0;display:flex;flex-direction:column;min-width:0}
.dev .res-top{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--navy3)}
.dev .tab{font-family:var(--mono);font-size:12.5px;font-weight:500;color:#A8A4C4;background:transparent;
    border:none;cursor:pointer;padding:7px 12px;border-radius:6px}
.dev .tab:hover{color:#fff}
.dev .tab.on{color:#fff;background:var(--navy2)}
.dev .res-meta{margin-left:auto;display:flex;align-items:center;gap:12px;padding-right:4px}
.dev .status-pill{font-family:var(--mono);font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;
    background:rgba(255,255,255,.08);color:#A8A4C4}
.dev .status-pill.ok{background:rgba(31,157,107,.18);color:#5FD6A2}
.dev .status-pill.pending{background:rgba(201,131,31,.2);color:#F0B860}
.dev .lat{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;color:#A8A4C4}
.dev .lat .meter{width:64px;height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;position:relative}
.dev .lat .meter i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--teal-bright);transition:width .5s ease}
.dev .lat b{color:#fff;font-weight:600}
.dev .res-body{padding:16px 18px;min-height:430px;overflow:auto;flex:1}
.dev .placeholder{height:100%;min-height:400px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;text-align:center;color:#A8A4C4;gap:14px;padding:30px}
.dev .placeholder .ic{width:46px;height:46px;border-radius:12px;border:1px solid var(--navy3);
    display:grid;place-items:center;color:var(--teal-bright)}
.dev .placeholder p{margin:0;font-size:13.5px;max-width:280px;line-height:1.5}
.dev pre.json{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:#D3D1DF;
    white-space:pre-wrap;word-break:break-word}
.dev .jk{color:#8DDCF1}
.dev .js{color:#F0B860}
.dev .jn{color:#9DBBF0}
.dev .jb{color:#E08CA8}
.dev .dcards{display:grid;gap:11px}
.dev .dv-dcard{background:var(--navy2);border:1px solid var(--navy3);border-radius:10px;padding:14px 15px;
    display:flex;align-items:center;gap:14px;animation:rise .4s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dev .dv-dcard .verdict{width:42px;height:42px;border-radius:10px;flex:none;display:grid;place-items:center;font-weight:700}
.dev .v-approve{background:var(--approve-bg);color:var(--approve)}
.dev .v-review{background:var(--review-bg);color:var(--review)}
.dev .v-deny{background:var(--deny-bg);color:var(--deny)}
.dev .v-pending{background:#EFEEF5;color:var(--ink)}
.dev .dv-dcard .dinfo{min-width:0}
.dev .dv-dcard .dmod{font-weight:600;font-size:14px;color:#fff}
.dev .dv-dcard .dcode{font-family:var(--mono);font-size:11.5px;color:#A8A4C4;margin-top:2px}
.dev .dv-dcard .dright{margin-left:auto;text-align:right;font-family:var(--mono);font-size:11px;color:#A8A4C4}
.dev .dv-dcard .dtier{display:inline-block;margin-bottom:3px;padding:2px 8px;border-radius:999px;font-weight:600;font-size:10px}
.dev .dtier.basic{background:rgba(141,220,241,.15);color:#8DDCF1}
.dev .dtier.enhanced{background:rgba(224,140,168,.18);color:#E08CA8}
.dev .dtier.single{background:rgba(157,187,240,.16);color:#9DBBF0}
.dev .async-box{margin-top:16px;background:var(--navy2);border:1px dashed var(--navy3);border-radius:10px;
    padding:15px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dev .async-box p{margin:0;font-size:12.5px;color:#A8A4C4;flex:1;min-width:200px}
.dev .async-box .mono{color:#F0B860}
.dev .btn-poll{background:var(--teal-bright);color:var(--ink);font-weight:600;font-size:13px;border:none;
    border-radius:7px;padding:9px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.dev .btn-poll:hover{background:#A5E7F7}
.dev .btn-poll:disabled{opacity:.6;cursor:wait}
.dev .code-tabs{display:flex;gap:6px;margin-bottom:12px}
.dev .ct{font-family:var(--mono);font-size:11.5px;color:#A8A4C4;background:var(--navy2);border:1px solid var(--navy3);
    border-radius:6px;padding:4px 11px;cursor:pointer}
.dev .ct.on{color:var(--ink);background:var(--teal-bright);border-color:var(--teal-bright);font-weight:600}
.dev .codewrap{position:relative}
.dev .codewrap .copybtn-dark{position:absolute;top:8px;right:8px;font-family:var(--body);font-size:11px;
    font-weight:600;color:#A8A4C4;background:var(--navy2);border:1px solid var(--navy3);border-radius:6px;
    padding:4px 9px;cursor:pointer;z-index:2}
.dev .codewrap .copybtn-dark:hover{color:#fff}
.dev .strip{background:var(--mint);border-top:1px solid #C9EAF4;border-bottom:1px solid #C9EAF4}
.dev .strip-in{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:34px;padding:46px 0}
.dev .strip h3{font-family:var(--disp);font-size:21px;margin:0 0 8px;color:var(--ink);letter-spacing:-.01em}
.dev .strip .lead{color:#352D6F;font-size:14.5px;margin:0}
.dev .feat{display:flex;gap:13px;align-items:flex-start}
.dev .feat .fic{width:34px;height:34px;border-radius:9px;background:#fff;border:1px solid #B8E4F2;flex:none;
    display:grid;place-items:center;color:var(--teal-dk)}
.dev .feat h4{margin:0 0 3px;font-size:14px;color:var(--ink)}
.dev .feat p{margin:0;font-size:13px;color:#4E4C63;line-height:1.5}
.dev footer.ft{background:var(--ink);color:#A8A4C4;padding:40px 0 30px}
.dev .ft-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.dev .ft .brand{color:#fff;margin-bottom:10px}
.dev .ft-addr{font-size:13px;line-height:1.7}
.dev .ft-addr a{color:var(--teal-bright)}
.dev .ft-links{display:flex;gap:48px;flex-wrap:wrap}
.dev .ft-col h5{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#A8A4C4;margin:0 0 10px}
.dev .ft-col a{display:block;font-size:13px;color:#C6C3DA;margin-bottom:7px}
.dev .ft-col a:hover{color:#fff}
.dev .ft-legal{border-top:1px solid var(--navy3);margin-top:30px;padding-top:18px;font-size:12px;color:#A8A4C4}
.dev #toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--ink);color:#fff;font-size:13px;font-weight:500;padding:10px 18px;border-radius:999px;
    box-shadow:0 10px 30px -8px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.25s;z-index:99}
.dev #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:920px){
.dev .explorer{grid-template-columns:1fr}
.dev .req{border-right:none;border-bottom:1px solid var(--line)}
.dev .strip-in{grid-template-columns:1fr;gap:22px}
.dev .nav-links{display:none}
}
@media (max-width:560px){
.dev .dv-grid2{grid-template-columns:1fr}
.dev .outcomes{grid-template-columns:repeat(2,1fr)}
.dev .keyrow{grid-template-columns:1fr;gap:7px}
.dev .keyrow .kval{white-space:normal;word-break:break-all}
.dev .nav-right .signin{display:none}
}
@media (prefers-reduced-motion:reduce){
.dev *{animation:none !important;transition:none !important;scroll-behavior:auto}
}
/* preview banner: this explorer answers with simulated data */
/* block, not flex: flex would make each text node its own item and strand the
   trailing full stop on a line of its own */
.dev .dev-notice{padding:14px 24px;background:#FBF1DF;
  border-bottom:1px solid #E8D6AE;font-size:14px;color:#6B5320;line-height:1.55}
.dev .dev-notice>span{max-width:1200px;margin:0 auto;display:block}
.dev .dev-notice strong{color:#5A4318}
.dev .dev-notice a{color:#352D6F;font-weight:600;text-decoration:underline}