/* API product page follows the approved PetrolTrade hero and typography. */
.api-page .api-hero{min-height:0}
.api-page .hero-inner{position:relative;grid-template-columns:1fr 1fr;column-gap:64px;min-height:570px;padding-block:42px}
.api-page .hero-copy{max-width:600px}
.api-page .hero-description{max-width:540px;margin-top:24px}
.api-page .hero-art::before,.api-page .hero-art::after{left:calc(50% + 8px)}
.api-hero-visual{position:absolute;left:56.5%;right:0;top:50%;transform:translateY(-50%);aspect-ratio:2048/1256;pointer-events:none;overflow:hidden}
.api-hero-visual picture{display:block;width:100%;height:100%;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 95%,transparent 100%)}
.api-hero-visual img{display:block;width:100%;height:100%;object-fit:contain;filter:contrast(.9)}
.api-page .hero-conditions{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:7px;transition:color .18s,text-decoration-color .18s}
.api-page .hero-conditions:is(:hover,:focus-visible){color:#9bd9ff;text-decoration-color:var(--orange)}
.api-page-nav .container{border-top:1px solid #ffffff26;display:flex;align-items:center;gap:44px;min-height:74px}
.api-page-nav a{color:#bed0de;font-size:var(--type-meta);padding-block:20px}
.api-page-nav a:is(:hover,:focus-visible){color:#fff}
.api-page-nav a:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
.api-capabilities .section-heading{margin-bottom:28px}
.api-capabilities .advantage h3{font-size:var(--type-label);font-weight:var(--weight-emphasis);letter-spacing:0}
.api-flow{display:grid;grid-template-columns:1fr .8fr 1fr;align-items:stretch;margin-top:64px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.api-flow-node,.api-flow-bridge{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:13px;padding:34px 36px;min-width:0}
.api-flow-node strong{font-size:22px;font-weight:var(--weight-emphasis);line-height:1.4;letter-spacing:-.02em}
.api-flow-node>span:last-child{font-size:var(--type-meta);line-height:1.6;color:var(--muted)}
.api-flow-label{font-size:var(--type-meta);color:var(--blue)}
.api-flow-bridge{position:relative;z-index:1;isolation:isolate;align-items:center;text-align:center;padding-inline:48px;color:#fff}
/* The white module enters the API socket; the API tab enters the last module. */
.api-flow-shape{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible;pointer-events:none}
.api-flow-shape-mobile{display:none}
.api-flow-bridge+.api-flow-node{padding-inline:52px}
.api-flow-bridge strong{font-size:44px;line-height:1;font-weight:var(--weight-emphasis);letter-spacing:-.035em}
.api-flow-bridge>span{font-size:var(--type-meta);line-height:1.5;color:#c7d9e4}
.api-uat{background:#f5f5f5}
.api-uat-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px}
.api-uat-grid>div{min-width:0}
.api-uat-grid .text-link{margin-top:30px}
.api-uat-copy>p{font-size:var(--type-body);line-height:1.75;color:var(--muted)}
.api-uat-points{list-style:none;padding:0;margin:28px 0}
.api-uat-points li{display:grid;grid-template-columns:40px 1fr;gap:20px;border-top:1px solid #d3dfe7;padding:22px 0}
.api-uat-points li:last-child{border-bottom:1px solid #d3dfe7}
.api-uat-points li>span{font-size:var(--type-label);line-height:1.5;color:var(--blue)}
.api-uat-points h3,.api-steps h3{font-size:var(--type-label);font-weight:var(--weight-emphasis);letter-spacing:0;line-height:1.5;margin-bottom:8px}
.api-uat-points p,.api-steps p{font-size:var(--type-body);line-height:1.75;color:var(--muted)}
.api-uat-copy .api-uat-note{font-size:var(--type-meta);line-height:1.7}
.api-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;margin:0;padding:0}
.api-steps li{border-top:1px solid var(--line);padding-top:24px}
.api-step-index{display:block;font-size:32px;font-weight:400;line-height:1;color:var(--blue);margin-bottom:28px}
.api-connection-bottom{display:flex;align-items:center;justify-content:space-between;gap:40px;border-top:1px solid var(--line);margin-top:42px;padding-top:26px}
.api-connection-bottom p{max-width:720px;font-size:var(--type-body);line-height:1.75;color:var(--muted)}
.api-connection-bottom .text-link{flex-shrink:0}
.api-page .faq-section{background:#f5f5f5}
@media(min-width:1650px){.api-page .hero-inner{min-height:610px}}
@media(max-width:1100px){.api-page .hero-inner{grid-template-columns:1.05fr .95fr;column-gap:48px}.api-hero-visual{left:59%}.api-uat-grid{gap:44px}.api-flow-node{padding:28px 24px}.api-flow-bridge{padding:32px}.api-flow-bridge+.api-flow-node{padding-inline:36px}.api-steps{gap:24px}.api-page-nav .container{gap:28px}.api-connection-bottom{align-items:flex-start;flex-direction:column;gap:22px}}
@media(max-width:800px){.api-page .hero-inner{display:block;min-height:0;padding-block:30px 36px}.api-hero-visual{display:none}.api-page .hero-copy{max-width:640px}.api-page-nav .container{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;min-height:0;padding-block:8px}.api-page-nav a{padding-block:10px}.api-uat-grid{grid-template-columns:1fr;gap:32px}.api-steps{grid-template-columns:1fr 1fr;gap:32px}.api-flow{margin-top:40px;grid-template-columns:1fr}.api-flow-node{padding:28px}.api-flow-bridge{padding:42px 28px}.api-flow-shape-desktop{display:none}.api-flow-shape-mobile{display:block}.api-flow-bridge+.api-flow-node{padding:40px 28px}.api-flow-bridge strong{font-size:36px}}
@media(max-width:540px){.api-page .api-hero h1{font-size:clamp(31px,8.65vw,42px)}.api-steps{grid-template-columns:1fr;gap:26px}.api-steps li{display:grid;grid-template-columns:36px 1fr;column-gap:18px;padding-top:22px}.api-step-index{grid-row:span 2;font-size:24px;margin:3px 0 0}.api-steps p{grid-column:2}.api-uat-points li{grid-template-columns:28px 1fr;gap:15px}.api-connection-bottom{margin-top:30px}.api-flow-node strong{font-size:var(--type-label)}.api-flow-node{padding:26px 24px}.api-flow-bridge{padding-inline:24px}.api-flow-bridge+.api-flow-node{padding:40px 24px}}