/* Built for developers: shared head and the code colours (the code windows stay dark in both themes). */
.developers { position: relative; --developers-bad: #d4382c; --developers-bad-fg: #a3231a; --developers-bad-bg: #fde9e6; }
.developers { --developers-bad: var(--bad); --developers-bad-fg: var(--bad-fg); --developers-bad-bg: var(--bad-bg); }
.developers__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; }
.developers__lead { font-size: var(--t-large); color: var(--text-2); max-width: 46ch; }
.developers__title > div { padding-bottom: .16em; margin-bottom: -.16em; }
.developers__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.developers__ctas .btn { flex: 1 1 auto; justify-content: center; }
.motion .developers__title { visibility: hidden; }

/* code tokens */
.developers__c { color: #f3f3f5; font-weight: 500; }
.developers__f { color: #afb1b4; }
.developers__m { color: #faad7b; font-weight: 500; }
.developers__u { color: #8494fc; }
.developers__s { color: var(--ok-fg); }
.developers__h { color: #c8d2fe; }
.developers__v { color: #7fd6e6; }
.developers__k { color: #8494fc; }
.developers__n { color: #f5a3c7; }
.developers__p { color: rgba(243, 243, 245, .5); }
.developers__x { color: #8b8c8f; }
.developers__caret { display: inline-block; width: 7px; height: 15px; margin-left: 1px; background: var(--accent-2); vertical-align: -3px; animation: developers-blink 1s steps(1) infinite; }
@keyframes developers-blink { 50% { opacity: 0; } }

/* status chips for API objects (mono, the API's own words) */
.developers__st { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; white-space: nowrap;
  font: 500 11.5px/1 var(--font); letter-spacing: .02em; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); transition: color .35s, background-color .35s, border-color .35s, box-shadow .35s; }
.developers__st.is-now { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.developers__st.is-ok { color: var(--ok-fg); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.developers__st.is-ok.is-now { color: var(--on-ok); background: var(--ok); border-color: var(--ok); }
.developers__st.is-past { color: var(--text); }

@media (max-width: 1180px) {
}
@media (max-width: 899.98px) {
  .developers__head { grid-template-columns: 1fr; gap: 18px; }
}

/* Built for developers, variant a: a code editor with four examples beside the object's status and its webhook events. */
.developers-a { padding: clamp(90px, 12vw, 160px) 0; }
.developers-a__stage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: clamp(44px, 5vw, 72px); perspective: 1600px; }

/* pinned on wide screens: a thin progress line between the head and the stage */
.developers-a__progress { display: none; height: 2px; margin-top: clamp(16px, 2.6vh, 32px); border-radius: 2px; background: var(--line); overflow: hidden; }
.developers-a__progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--ok)); transform-origin: left; transform: scaleX(0); }
.developers-a--pinned .developers-a__progress { display: block; }
.developers-a--pinned .developers-a__stage { margin-top: clamp(12px, 1.8vh, 22px); }

/* ---------- editor ---------- */
.developers-a__ide { position: relative; border-radius: 18px; overflow: hidden; background: var(--code-bg); color: var(--code-text);
  box-shadow: 0 50px 90px -45px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.developers-a__bar { display: flex; align-items: flex-end; gap: 14px; height: 48px; padding: 0 12px 0 16px; background: var(--code-bar); }
.developers-a__dots { display: flex; gap: 6px; align-self: center; flex: none; }
.developers-a__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.developers-a__tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.developers-a__tabs::-webkit-scrollbar { display: none; }
.developers-a__tab { position: relative; flex: none; height: 38px; padding: 0 15px; border: 0; border-radius: 10px 10px 0 0; background: transparent; cursor: pointer;
  font: 500 13px/1 var(--font); color: rgba(243, 243, 245, .58); white-space: nowrap; transition: color .25s, background-color .25s; }
.developers-a__tab:hover { color: #fff; }
.developers-a__tab.is-on { background: var(--code-bg); color: #fff; }
.developers-a__tab:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; border-radius: 10px 10px 0 0; }
.developers-a__timer { position: absolute; left: 10px; right: 10px; top: 0; height: 2px; border-radius: 2px; background: var(--accent-2); transform: scaleX(0); transform-origin: left; }
.developers-a__tab.is-on .developers-a__timer { transform: scaleX(1); }
.developers-a--js .developers-a__tab.is-on .developers-a__timer { transform: scaleX(0); }

.developers-a__panes { display: grid; }
.developers-a--js .developers-a__pane[hidden] { display: block; }
.developers-a--js .developers-a__pane { grid-area: 1 / 1; }
.developers-a--js .developers-a__pane:not(.is-on) { visibility: hidden; }
.developers-a__pane { min-width: 0; padding-bottom: 14px; }

.developers-a__req { display: flex; align-items: center; gap: 10px; padding: 16px 18px 6px; font: 500 13px/1 var(--code); }
.developers-a__req code { color: #f3f3f5; white-space: nowrap; }
.developers-a__send { flex: 1; min-width: 20px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.developers-a__send i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--ok-fg)); transform-origin: left; transform: scaleX(1); }
.developers-a__req em { font: 600 11px/1 var(--font); font-style: normal; letter-spacing: .02em; color: var(--ok-fg); background: color-mix(in srgb, var(--ok-fg) 12%, transparent); padding: 5px 8px; border-radius: 99px; white-space: nowrap; }

.developers-a__code { margin: 0; padding: 10px 18px 12px 0; white-space: normal; counter-reset: developers-ln; overflow-x: auto; scrollbar-width: thin;
  font: 400 13px/1.72 var(--code); color: var(--code-text); font-variant-ligatures: none; }
.developers-a__ln { position: relative; display: block; white-space: pre; min-height: 1.72em; padding-left: 50px; }
.developers-a__ln::before { counter-increment: developers-ln; content: counter(developers-ln); position: absolute; left: 0; width: 34px; text-align: right; color: rgba(243, 243, 245, .24); }
.developers-a__ln.is-typing { background: linear-gradient(90deg, rgba(255, 255, 255, .045), transparent 80%); }
.developers-a__ln.is-wait { visibility: hidden; }
.developers-a--pinned .developers-a__code { position: relative; }

.developers-a__res { margin: 4px 14px 0; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07); }
.developers-a__resh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px 2px; font: 500 12px/1 var(--code); color: rgba(243, 243, 245, .5); }
.developers-a__201 { color: var(--ok-fg); background: color-mix(in srgb, var(--ok) 16%, transparent); padding: 5px 8px; border-radius: 6px; }
.developers-a__code--res { padding: 8px 14px 12px 0; font-size: 12.5px; line-height: 1.65; }
.developers-a__code--res .developers-a__ln { padding-left: 14px; }
.developers-a__code--res .developers-a__ln::before { content: none; }

.developers-a__status { display: flex; align-items: center; gap: 18px; height: 38px; padding: 0 16px; border-top: 1px solid rgba(255, 255, 255, .07); background: var(--code-bar);
  font: 500 12px/1 var(--font); color: rgba(243, 243, 245, .6); }
.developers-a__status code { font: 400 11.5px/1 var(--code); color: rgba(243, 243, 245, .8); }
.developers-a__status a { margin-left: auto; color: var(--accent-2); }
.developers-a__status a:hover { text-decoration: underline; text-underline-offset: 3px; }
.developers-a__mode { display: inline-flex; align-items: center; gap: 7px; color: var(--ok-fg); }
.developers-a__mode i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* ---------- object and events ---------- */
.developers-a__side { display: grid; gap: 20px; min-width: 0; }
.developers-a__card { border-radius: 16px; overflow: hidden; background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.developers-a__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.developers-a__head b { font: 600 14px/1 var(--font); flex: none; }
.developers-a__head code { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/1 var(--code); color: var(--text-2); }
.developers-a__track { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 18px 16px 4px; }
.developers-a__track li { position: relative; }
.developers-a__track li + li::before { content: ""; position: absolute; left: -17px; top: 50%; width: 12px; height: 1.5px; background: var(--line-2); }
.developers-a__track li { transition: color .6s, background-color .6s, border-color .6s, opacity .6s; }
.developers-a__track li.is-next { opacity: .45; }
.developers-a__note { padding: 12px 16px 16px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); min-height: 4.6em; }
.developers-a__note code, .developers-a__sig code { font: 500 12px/1 var(--code); color: var(--text); }

.developers-a__list { min-height: 164px; }
.developers-a__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 16px; overflow: hidden; }
.developers-a__list li + li { border-top: 1px solid var(--line); }
.developers-a__list li { transition: background-color .6s, opacity .4s; }
.developers-a__list li.is-new { background: color-mix(in srgb, var(--text) 6%, transparent); }
.developers-a__list li.is-old { opacity: .42; }
.developers-a__list li.is-enter { animation: developers-a-enter .45s var(--ease-out); }
@keyframes developers-a-enter { from { opacity: 0; transform: translateY(-10px); } }
.developers-a__list li.developers-a__empty { display: block; font: 400 13px/1.4 var(--font); color: var(--text-2); }
.developers-a__evt { font: 500 13px/1.2 var(--code); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.developers-a__ok { font: 600 11px/1 var(--font); color: var(--ok-fg); background: var(--ok-bg); padding: 5px 7px; border-radius: 6px; }
.developers-a__list time { font: 400 11.5px/1 var(--font); color: var(--text-2); font-variant-numeric: tabular-nums; }
.developers-a__sig { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.developers-a__sig svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--ok); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- spec strip ---------- */
.developers-a__spec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: clamp(40px, 5vw, 64px) 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.developers-a__spec dt { font: 500 12px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.developers-a__spec dd { margin: 10px 0 0; font: 500 18px/1.3 var(--font); letter-spacing: -.015em; }

.motion .developers-a [data-dev-fade] { visibility: hidden; }

/* wide screens: compact enough for the head and the whole stage to stay on screen while pinned */
@media (min-width: 900px) {
  .developers-a__bar { height: 44px; }
  .developers-a__tab { height: 36px; }
  .developers-a__req { padding: 11px 18px 3px; }
  .developers-a__code { font-size: 12.5px; line-height: 1.5; padding-top: 7px; padding-bottom: 8px; }
  .developers-a__ln { min-height: 1.5em; }
  .developers-a__code--res { font-size: 12px; line-height: 1.45; padding: 5px 14px 9px 0; }
  .developers-a__resh { padding-top: 9px; }
  .developers-a__pane { padding-bottom: 8px; }
  .developers-a__status { height: 34px; }
  .developers-a--pinned .developers__ctas { margin-top: 20px; }
}
@media (min-width: 900px) and (max-width: 1180px) {
  .developers-a__stage { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
  .developers-a__code { font-size: 11.5px; }
  .developers-a__code--res { font-size: 11px; }
  .developers-a__dots { display: none; }
  .developers-a__tab { padding: 0 11px; font-size: 12.5px; }
  .developers-a__resh span:last-child { display: none; }
  .developers-a__track { gap: 8px 18px; }
  .developers-a__note { font-size: 12.5px; }
}
@media (max-width: 899.98px) {
  .developers-a__stage { grid-template-columns: 1fr; }
  .developers-a__side { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 760px) {
  .developers-a__side { grid-template-columns: 1fr; }
  .developers-a__spec { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
}
@media (max-width: 560px) {
  .developers-a__bar { padding: 0 8px 0 12px; gap: 10px; }
  .developers-a__dots { display: none; }
  .developers-a__tab { padding: 0 12px; font-size: 12.5px; }
  .developers-a__code { font-size: 11.5px; padding-right: 14px; }
  .developers-a__ln { padding-left: 38px; }
  .developers-a__ln::before { width: 26px; }
  .developers-a__code--res { font-size: 11.5px; }
  .developers-a__req { padding: 14px 14px 4px; font-size: 12px; }
  .developers-a__res { margin: 4px 10px 0; }
  .developers-a__resh span:last-child { display: none; }
  .developers-a__spec dd { font-size: 16px; }
}

/* short wide screens: the eyebrow gives its room to the pinned stage */
@media (min-width: 900px) and (max-height: 860px) {
  .developers-a--pinned .developers__head .pill { display: none; }
}