/* Styles are scoped to the API product page. */
.api-page .solution-hero__grid { grid-template-columns:1fr 1fr; gap:64px; }
.api-protocols { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.api-protocols span { padding:5px 10px; border:1px solid #d7e5ef; border-radius:6px; color:#526e83; font-size:.72rem; letter-spacing:.03em; }
.api-network { min-width:0; background:#fff; border:1px solid #d4e3ef; border-radius:20px; box-shadow:0 24px 65px #18496912; padding:26px; }
.api-network__top { display:flex; justify-content:space-between; gap:10px; align-items:center; color:#516c82; font-size:.78rem; padding-bottom:26px; }
.api-network__top>span:last-child { font-size:.6rem; letter-spacing:.08em; }
.api-network__top i { color:#1172b7; margin-right:6px; }
.api-network__sources { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.api-network__sources>span { display:flex; align-items:center; flex-direction:column; gap:12px; border:1px solid #dde7f0; border-radius:10px; background:#f8fafc; padding:18px 5px; font-size:.8rem; font-weight:600; }
.api-network__sources i { font-size:1.4rem; color:#3d789e; }
.api-network__transfer { display:flex; flex-direction:column; align-items:center; gap:6px; color:#6c8397; font-size:.72rem; padding:6px; }
.api-network__line { height:18px; width:1px; background:#bed3e3; }
.api-network__hub { background:#f0f7fd; border:1px solid #cadfed; border-radius:12px; padding:24px 16px; text-align:center; }
.api-network__hub img { width:145px; height:auto; max-width:100%; }
.api-network__hub p { color:#526e83; font-size:.85rem; margin:16px 0; line-height:1.6; }
.api-network__hub>div { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; color:#296d9b; font-size:.72rem; }
.api-network__hub i { margin-right:4px; }
.api-network__return { display:flex; align-items:center; gap:12px; padding:24px 0 18px; }
.api-network__return>i { color:#138770; font-size:1.5rem; }
.api-network__return strong,.api-network__return div>span { display:block; font-size:.8rem; }
.api-network__return div>span { color:#698294; font-size:.73rem; margin-top:5px; }
.api-network__tag { margin-left:auto; font-size:.56rem; letter-spacing:.07em; color:#21846f; background:#e9f6f2; border-radius:4px; padding:6px; }
.api-network__event { display:flex; align-items:center; gap:10px; border:1px solid #dfeae9; border-radius:8px; padding:12px; background:#f7fbfa; }
.api-network__event code { color:#237360; font-size:.76rem; }
.api-network__event>span:last-child { margin-left:auto; font-size:.68rem; color:#607d73; }
.api-dot { width:7px; height:7px; border-radius:50%; background:#24886b; flex-shrink:0; }
.api-demo { background:#f2f7fc; }
.api-demo [hidden] { display:none!important; }
.api-demo__intro { display:grid; grid-template-columns:1.2fr 1fr; gap:70px; align-items:end; margin-bottom:36px; }
.api-demo__intro h2 { margin-bottom:0; }
.api-demo__intro>p { margin-bottom:0; max-width:430px; }
.api-demo__shell { border:1px solid #d4e2ee; border-radius:18px; overflow:hidden; background:white; }
.api-demo__header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:22px 28px; border-bottom:1px solid #e2ebf2; }
.api-demo__header strong { font-size:.88rem; }
.api-demo__header i { color:#1172b7; margin-right:8px; }
.api-demo__header>span { font-size:.72rem; color:#6a8296; }
.api-demo__controls { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:22px 28px; }
.api-demo__controls button { border:1px solid #d6e2ed; border-radius:8px; background:white; color:#526d82; padding:12px; text-align:left; font:inherit; font-size:.85rem; font-weight:650; }
.api-demo__controls button>span { margin-right:8px; opacity:.7; font-size:.73rem; }
.api-demo__controls button[aria-pressed=true] { color:white; background:#1172b7; border-color:#1172b7; }
.api-demo__controls button:focus-visible { outline:3px solid #155fa0; outline-offset:3px; }
.api-demo__body { display:grid; grid-template-columns:1.05fr 1fr; gap:32px; padding:6px 28px 30px; align-items:stretch; }
.api-demo__story { padding:18px 0; min-width:0; }
.api-demo__step-label { font-size:.7rem; letter-spacing:.1em; font-weight:700; color:#1172b7; }
.api-page .api-demo__story h3 { font-size:1.65rem; line-height:1.25; letter-spacing:-.035em; margin:14px 0; }
.api-demo__story>p { font-size:.94rem; }
.api-demo__order { display:flex; gap:12px; align-items:center; border:1px solid #dce6ed; border-radius:10px; padding:18px 14px; margin:24px 0; }
.api-demo__order-icon { display:grid; place-items:center; width:36px; height:42px; flex-shrink:0; color:#1172b7; background:#eef6fc; border-radius:8px; }
.api-demo__order strong,.api-demo__order div>span { display:block; }
.api-demo__order strong { font-size:.86rem; }
.api-demo__order div>span { margin-top:4px; color:#657f92; font-size:.68rem; }
.api-demo__status { margin-left:auto; font-size:.67rem; color:#256d9e; border-radius:5px; background:#eaf5fc; padding:6px 8px; white-space:nowrap; }
.api-demo[data-stage=delivered] .api-demo__status,.api-demo[data-stage=evidence] .api-demo__status { background:#e6f5ef; color:#23745f; }
.api-demo__direction { display:flex; align-items:center; gap:10px; color:#137b68; font-weight:650; font-size:.85rem; margin-bottom:12px; }
.api-page .api-demo__outcome { font-size:.85rem; margin:0; }
.api-demo__technical { min-width:0; border:1px solid #24465e; border-radius:12px; background:#102a40; color:#eef8ff; overflow:hidden; }
.api-demo__code-heading { display:flex; justify-content:space-between; gap:10px; padding:17px 22px; border-bottom:1px solid #2b4358; color:#b5cede; font-size:.75rem; }
.api-demo__code-heading i { margin-right:6px; }
.api-page .api-demo__technical .api-demo__endpoint { color:#8edbc5; font: .78rem/1.6 ui-monospace,monospace; margin:20px 22px 12px; overflow-wrap:anywhere; }
.api-demo__code-label { display:block; color:#afc6d7; font-size:.68rem; margin:0 22px; }
.api-demo__technical pre { color:#d8edf8; font-size:.85rem; line-height:1.8; padding:16px 22px; margin:0; min-height:260px; }
.api-page main .api-demo__technical a { display:block; color:#b5e3ff!important; font-size:.76rem; border-top:1px solid #2b4358; padding:17px 22px; }
.api-demo__footer { display:flex; gap:12px; align-items:center; padding:20px 28px; background:#eaf3fa; color:#4a6a82; font-size:.82rem; }
.api-demo__footer i { color:#1172b7; }
.api-resources { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.api-resources article { border:1px solid #dfe8ef; border-radius:12px; padding:28px; display:flex; flex-direction:column; }
.api-resources article>i { color:#1172b7; font-size:1.65rem; margin-bottom:22px; }
.api-resources p { font-size:.9rem; }
.api-page main .api-resources a { margin-top:auto; color:#1172b7!important; font-size:.82rem; font-weight:600; }
.api-page main .api-resources a:hover,.api-page main .api-demo__technical a:hover { text-decoration:underline!important; }
.api-developers { background:#f5f8fb; }
.api-developers__grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; }
.api-developers .btn { padding:13px 18px; margin-top:16px; font-weight:600; }
.api-start { list-style:none; margin:0; padding:0; }
.api-start li { display:flex; gap:20px; padding:24px 0; border-bottom:1px solid #dbe5ee; }
.api-start li:first-child { padding-top:0; }
.api-start li>span { color:#1172b7; font-size:.8rem; font-weight:700; padding-top:4px; }
.api-start p { font-size:.9rem; margin:0; }
@media(max-width:1199px) { .api-page .solution-hero__grid { gap:32px; } .api-network { padding:20px; } .api-network__top>span:last-child { display:none; } .api-demo__body { gap:24px; } }
@media(max-width:991px) { .api-page .solution-hero__grid { grid-template-columns:1fr; } .api-network { max-width:640px; width:100%; } .api-demo__intro { gap:30px; } .api-demo__body { grid-template-columns:1fr; } .api-demo__technical pre { min-height:0; } .api-resources { grid-template-columns:repeat(2,1fr); } .api-developers__grid { gap:40px; } }
@media(max-width:767px) { .api-demo__intro,.api-developers__grid,.api-resources { grid-template-columns:1fr; gap:24px; } .api-demo__header { padding:20px; } .api-demo__controls { grid-template-columns:repeat(2,1fr); padding:20px; gap:8px; } .api-demo__controls button { font-size:.78rem; padding:12px 8px; } .api-demo__body { padding:0 20px 20px; } .api-demo__order { flex-wrap:wrap; } .api-demo__footer { padding:20px; } .api-network__sources { gap:8px; } .api-network__sources>span { font-size:.7rem; } .api-network__tag { display:none; } .api-network__event { flex-wrap:wrap; } .api-network__event>span:last-child { margin-left:17px; } .api-developers__grid { gap:40px; } }