.api-guide { max-width: 690px; padding-block: 76px 130px; }
.api-guide .eyebrow { margin-bottom: 18px; }
.api-guide h1 { font-size: clamp(44px, 5vw, 62px); margin-bottom: 18px; }
.api-guide h2 { font-size: 27px; letter-spacing: -.03em; line-height: 1.25; margin: 72px 0 18px; }
.api-guide p, .api-guide li { font-size: 16px; line-height: 1.65; }
.api-guide a { color: var(--ms-green); text-decoration: underline; text-underline-offset: 3px; }
.api-guide code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84em; overflow-wrap: anywhere; }
.api-guide pre { margin: 16px 0 0; padding: 18px 20px; background: var(--ms-porcelain); border: 1px solid var(--ms-border); border-radius: var(--ms-radius-card); box-shadow: var(--ms-shadow-card); overflow-x: auto; }
.api-guide pre code { display: block; font-size: 13px; line-height: 1.75; white-space: pre; overflow-wrap: normal; }
.api-intro { font-size: 17px !important; line-height: 1.6; color: var(--ms-secondary); margin: 0; }

.api-steps { list-style: none; counter-reset: step; padding: 0; margin: 62px 0 0; }
.api-steps > li { counter-increment: step; position: relative; padding: 24px 0 26px 58px; border-top: 1px solid var(--ms-border); }
.api-steps > li:last-child { border-bottom: 1px solid var(--ms-border); }
.api-steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; top: 27px; left: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--ms-green); }
.api-steps p { margin: 0; }
.api-steps strong { color: var(--ms-ink); font-weight: 600; }
.api-note { margin-top: 12px !important; font-size: 14px !important; color: var(--ms-secondary); }

.api-endpoints { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ms-border); }
.api-endpoints li { display: grid; grid-template-columns: 62px 11.5em minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--ms-border); font-size: 15px; color: var(--ms-secondary); }
.api-endpoints li > code { color: var(--ms-ink); }
.api-endpoints code { white-space: nowrap; }
.api-method { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--ms-green); }

.api-notes { padding-left: 20px; margin: 0; color: var(--ms-secondary); }
.api-notes li + li { margin-top: 8px; }
.api-help { margin-top: 56px; font-size: 13px !important; color: var(--ms-secondary); }

@media (max-width: 760px) {
  .api-guide { padding-block: 54px 90px; }
  .api-guide h2 { font-size: 24px; margin-top: 56px; }
  .api-guide p, .api-guide li { font-size: 15px; }
  .api-intro { font-size: 16px !important; }
  .api-steps { margin-top: 52px; }
  .api-steps > li { padding: 23px 0 24px 40px; }
  .api-steps > li::before { top: 26px; }
  .api-endpoints li { grid-template-columns: 56px minmax(0, 1fr); }
  .api-endpoints li > span:last-child { grid-column: 2; }
}