.api-hero{background:var(--hero-wash);padding:34px 0 70px}
.api-hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,6vw,100px);align-items:center;margin-top:30px}
.api-map{min-width:0;border:1px solid #cbdde8;border-radius:20px;padding:22px;background:#ffffffd9;box-shadow:0 16px 45px #2c617321}
.api-map-head{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#365e72;font-weight:700;font-size:.86rem;padding-bottom:15px;border-bottom:1px solid #dde7ed}
.api-map-head span:last-child,.api-code{font-family:ui-monospace,monospace;letter-spacing:.07em;font-size:.72rem;color:#366c80}
.api-map-flow{list-style:none;margin:15px 0;padding:0;display:grid;gap:12px}
.api-map-flow li{position:relative;display:flex;align-items:center;gap:13px;padding:12px;background:#ecf6fc;border:1px solid #d6e8f3;border-radius:10px}
.api-map-flow li+li::before{content:"";position:absolute;left:29px;top:-13px;height:12px;border-left:1px dashed #7599aa}
.api-map-flow li:nth-child(2){background:#f1f5e8;border-color:#dce7c7}
.api-map-flow li:nth-child(3){background:#fdf0e7;border-color:#f0dcd0}
.api-map-icon{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:8px;background:#fff;color:#286f7e}
.api-map-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.api-map-flow small,.api-map-flow strong{display:block}
.api-map-flow small{color:#426979;font-size:.74rem;margin-bottom:2px}
.api-map-flow strong{font-size:clamp(.9rem,1.5vw,1.05rem)}
.api-map>p{margin:0;color:#567383;font-size:.79rem}
.api-section-head{margin-bottom:26px}
.api-section-head h2{font-size:clamp(1.85rem,3.1vw,2.8rem);line-height:1.2;letter-spacing:-.035em;margin:8px 0 10px}
.api-section-head>p:last-child{max-width:36em}
.api-cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.api-cap-grid article{border:1px solid #d8e5ec;border-top:3px solid #8fc3e1;border-radius:12px;padding:22px;background:#f6fbff;display:flex;flex-direction:column}
.api-cap-grid article:nth-child(2){background:#fef8f3;border-top-color:#f0ae88}
.api-cap-grid article:nth-child(3){background:#f8faef;border-top-color:#bacd91}
.api-cap-grid h3{font-size:1.35rem;margin:10px 0 8px}
.api-cap-grid p{margin:0 0 16px}
.api-cap-grid a{align-self:flex-start;margin-top:auto}
.api-delivery{background:var(--section-wash)}
.api-delivery-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,84px)}
.api-method-list{display:grid;gap:10px;margin:0}
.api-method-list>div{display:grid;grid-template-columns:8em minmax(0,1fr);align-items:start;gap:14px;padding:16px 20px;border-radius:12px;background:#ffffffd9}
.api-method-list dt{font-weight:750;color:#21586b}
.api-method-list dd{margin:0;color:#436573}
.api-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.api-steps li{padding:clamp(15px,2vw,24px);border-radius:14px;background:#edf5f8}
.api-steps li:nth-child(even){background:#edf5f0}
.api-steps span{display:grid;place-items:center;width:34px;height:34px;margin-bottom:12px;border-radius:50%;background:#fff;color:#24596c;font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.api-steps h3{font-size:1.08rem;margin:7px 0}
.api-steps p{margin:0}
.api-cta{margin-top:clamp(52px,7vw,94px);border:1px solid #d2e0e6;border-radius:16px;background:var(--hero-wash);padding:clamp(22px,4vw,42px);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.api-cta h2{margin:0 0 8px}
.api-cta p{margin:0}
.fun-detail .fun-detail-cover{justify-self:end;max-width:270px;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid #d6e5ee;border-radius:15px}
@media(max-width:760px){
  .api-hero{padding:24px 0 40px}
  .api-hero-grid,.api-delivery-grid{grid-template-columns:1fr}
  .api-hero-grid{margin-top:18px}
  .api-cap-grid{grid-template-columns:1fr}
  .api-delivery-grid .api-section-head{margin-bottom:0}
  .api-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
  .fun-detail .fun-detail-cover{justify-self:start;max-width:230px}
}
@media(max-width:460px){
  .api-map{padding:15px}
  .api-method-list>div{grid-template-columns:1fr;gap:4px}
}