/* Shared stages block — Figma 2217:4491 / 2453:8785 / 2458:10081. */
.es-stages, .es-stages * { box-sizing: border-box; }
.es-stages {
  display: grid;
  grid-template-columns: minmax(0,1fr) 641px;
  gap: 20px;
  width: 100%;
  --es-stages-top: 0px;
  height: auto;
  min-height: calc(100svh - var(--es-stages-top));
  margin: 0;
  padding: 0;
  overflow: visible;
  position: relative;
  isolation: isolate;
  color: #fff;
  background: #111215;
}
body.admin-bar .es-stages { --es-stages-top: 32px; }
.es-stages__backdrop {
  position: sticky;
  top: var(--es-stages-top);
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0,1fr) 641px;
  gap: 20px;
  height: calc(100svh - var(--es-stages-top));
  z-index: 0;
  background: linear-gradient(rgba(17,18,21,.69),rgba(17,18,21,.69)), var(--es-stages-image) center / cover no-repeat;
}
.es-stages__intro { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 80px; }
.es-stages .es-stages__intro > h2 { max-width: 590px; margin: 0; padding: 0; color: #fff; font: 600 38px/44px var(--es-headers-font),Arial,sans-serif; letter-spacing: -1px; text-transform: none; }
.es-stages .es-stages__intro > p { position: static; max-width: 590px; margin: 0; color: #fff; font: 400 16px/22px var(--es-regular-font),Arial,sans-serif; }
.es-stages__viewport { position: relative; z-index: 1; grid-column: 2; grid-row: 1; min-width: 0; height: auto; padding: 96px 80px 96px 16px; overflow: visible; scrollbar-width: none; }
.es-stages__viewport::-webkit-scrollbar { display: none; }
.es-stages__viewport:focus-visible { outline: 2px solid #a5f50f; outline-offset: -4px; }
.es-stages__list { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding: 0 0 90px; list-style: none; }
.es-stages__card { display: flex; align-items: flex-start; flex: 0 0 auto; gap: 24px; width: 100%; min-height: 275px; margin: 0; padding: 50px 63px 50px 24px; border-radius: 8px; background: #f6f6f5; color: #212121; }
.es-stages__card:nth-child(2) { background: #a5f50f; }
.es-stages__number { display: block; flex: 0 0 auto; margin: 0; color: #afd060; font: 500 30px/34px "TikTok Sans 18pt SemiExpanded",Arial,sans-serif; letter-spacing: -.6px; }
.es-stages__card:nth-child(2) .es-stages__number { color: #fff; }
.es-stages__copy { display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; gap: 33px; }
.es-stages .es-stages__copy > h3 { margin: 0; padding: 0; color: rgba(33,33,33,.95); font: 600 23px/27px var(--es-headers-font),Arial,sans-serif; letter-spacing: 0; text-transform: uppercase; overflow-wrap: break-word; }
.es-stages .es-stages__copy > p { position: static; max-width: none; margin: 0; color: rgba(0,0,0,.7); font: 400 16px/22px var(--es-regular-font),Arial,sans-serif; letter-spacing: 0; }
.es-stages__cta-item { flex: 0 0 auto; min-width: 0; margin: 0; padding: 0; list-style: none; }
.es-stages__cta { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; width: 100%; height: 157px; padding: 30px; border-radius: 8px; background: #a5f50f; color: rgba(33,33,33,.8); text-decoration: none; }
.es-stages__cta > img { display: block; flex: 0 0 auto; width: 49px; height: 49px; max-width: none; }
.es-stages__cta > span { width: 100%; font: 600 20px/24px var(--es-headers-font),Arial,sans-serif; letter-spacing: -.6px; }
.es-stages__cta:hover { background: #b0ff1c; }
.es-stages__cta:active { background: #82cf00; }
.es-stages__cta:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
@media (max-width: 1200px) {
  .es-stages { display: flex; flex-direction: column; gap: 20px; height: auto; min-height: 721px; overflow: hidden; background: linear-gradient(rgba(17,18,21,.69),rgba(17,18,21,.69)), var(--es-stages-image) center / cover no-repeat; }
  .es-stages__backdrop { display: contents; }
  .es-stages__intro { flex: 0 0 auto; gap: 34px; width: 100%; padding: 64px 30px 31px; }
  .es-stages .es-stages__intro > h2 { font-size: 36px; line-height: 41px; }
  .es-stages__viewport { flex: 0 0 auto; width: 100%; height: auto; padding: 0 30px 64px 16px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-left: 16px; }
  .es-stages__list { flex-direction: row; align-items: flex-start; gap: 8px; width: max-content; min-width: 100%; padding: 0; }
  .es-stages__card, .es-stages__cta-item { flex: 0 0 526px; width: 526px; scroll-snap-align: start; }
  .es-stages__cta { height: 263px; min-height: 263px; }
}
@media (max-width: 639px) {
  .es-stages { min-height: 855px; }
  .es-stages__intro { padding: 64px 20px 31px; }
  .es-stages .es-stages__intro > h2 { font-size: 30px; line-height: 34px; }
  .es-stages .es-stages__intro > p { font-size: 15px; line-height: 21px; }
  .es-stages__viewport { padding-right: 20px; }
  .es-stages__list { align-items: stretch; }
  .es-stages__card, .es-stages__cta-item { flex-basis: 300px; width: 300px; min-height: 346px; }
  .es-stages__card { flex-direction: column; gap: 10px; padding: 19px 63px 19px 24px; background: #fff; }
  .es-stages__copy { flex: 0 0 auto; width: 100%; }
  .es-stages .es-stages__copy > h3 { font-size: 18px; line-height: 21px; }
  .es-stages .es-stages__copy > p { font-size: 15px; line-height: 21px; }
  .es-stages__cta { height: 100%; min-height: 346px; }
}