/* Reference content and layout, using the shared landing-page theme. */
.merchant-api-page .api-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 48px; }
.merchant-api-page .builders-hero { padding-block: 12px 48px; align-items: start; }
.merchant-api-page .api-image { display: block; width: 100%; height: auto; border-radius: 8px; }
.merchant-api-page .api-section-heading, .merchant-api-page .api-scale, .merchant-api-page .api-contact { text-align: center; }
.merchant-api-page .api-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 64px; list-style: none; padding: 0; margin: 32px 0; }
.merchant-api-page .api-flow li { position: relative; display: grid; place-content: center; min-height: 100px; padding: 18px; text-align: center; font-weight: 700; border: 1px solid var(--builders-border); border-radius: 8px; background: white; }
.merchant-api-page .api-flow li:not(:nth-child(3n))::after { content: '\2192'; position: absolute; right: -44px; top: 50%; transform: translateY(-50%); font-size: 28px; }
.design-page.service-page .merchant-api-page .api-flow .api-flow-connection { background: #1d1d1f; color: #fff; }
.merchant-api-page .api-flow .api-flow-connection::after { color: var(--builders-ink); }
.merchant-api-page .api-explainer { max-width: 900px; margin: 48px auto 0; }
.merchant-api-page .api-explainer > h3 { border-bottom: 1px solid var(--builders-border); padding-bottom: 20px; margin: 0 0 24px; }
.merchant-api-page .api-explainer .api-split { gap: 20px; }
.merchant-api-page .api-exchanges { display: grid; gap: 16px; }
.merchant-api-page .api-exchanges > div { border-left: 3px solid var(--builders-yellow); background: var(--builders-surface); padding: 16px; }
.merchant-api-page .api-exchanges h4 { font-size: 1rem; line-height: 1.5; margin: 0 0 6px; }
.merchant-api-page .api-exchanges p { font-size: 0.9rem; margin: 0; }
.merchant-api-page .api-explainer-caption { text-align: center; margin: 24px 0 0; }
.merchant-api-page .api-pricing { padding-block: 64px; }
.merchant-api-page figure { min-width: 0; margin: 0; }
.merchant-api-page .api-screen { border: 1px solid var(--builders-border); border-radius: 0; }
.merchant-api-page figcaption { font-size: 0.8rem; text-align: center; margin-top: 12px; }
.merchant-api-page .api-account-flow { grid-column:1 / -1; min-width:0; margin:0; font-size:0.9rem; white-space:nowrap; overflow-x:auto; }
.merchant-api-page .api-scale .builders-proof { margin: 32px 0 0; border: 0; padding-bottom: 0; }
.merchant-api-page .api-contact { padding-block: 64px; }
@media (max-width: 800px) {
  .merchant-api-page .api-split { gap: 28px; }
  .merchant-api-page .api-integration .builders-benefits { grid-template-columns: 1fr; }
  .merchant-api-page .api-explainer .api-split { grid-template-columns: 1fr; }
  .merchant-api-page .api-flow { column-gap: 32px; }
  .merchant-api-page .api-flow li:not(:nth-child(3n))::after { right: -26px; font-size: 22px; }
}
@media (max-width: 600px) {
  .merchant-api-page .api-split { grid-template-columns: 1fr; }
  .merchant-api-page .builders-hero { padding-block: 0 24px; }
  .merchant-api-page .api-pricing, .merchant-api-page .api-contact { padding-block: 36px; }
  .merchant-api-page .api-flow { grid-template-columns: 1fr; gap: 32px; }
  .merchant-api-page .api-flow li { min-height: 80px; }
  .merchant-api-page .api-flow li:not(:last-child)::after { content: '\2193'; top: auto; bottom: -31px; left: 50%; right: auto; transform: translateX(-50%); color: var(--builders-ink); font-size: 22px; }
  .merchant-api-page .api-explainer { margin-top: 28px; padding: 20px; }
}

/* Reuse the homepage tape artwork and animation above the API content. */
.api-tape { padding: 16px 0 8px; }
.api-tape .legacy-tape { --logo-width:60px; position:relative; display:block; width:calc(100% - 48px); max-width:940px; height:84px; margin:0 auto; }
@media (max-width:500px) {
  .api-tape .legacy-tape { --logo-width:45px; width:100%; height:76px; }
  .api-tape .measure-caption { max-width:100%; line-height:1.3; text-align:right; }
}

/* Reserve the tape layout while its page-specific CMS messages load. */
.api-tape .is-loading .measure-message,
.api-tape .is-loading .measure-caption {
  visibility: hidden;
}