/* Astra-06 Developers first integration slice; all selectors stay within the runtime main. */
#main .dev-info-grid {
  --core-line: #d8dfe9;
  padding-inline: 0 !important;
  color: #171a20;
}
@media (min-width: 1200px) {
  #main .dev-info-grid { max-width: 1280px !important; }
}
#main .dev-info-band { background: #f3f5f8 !important; }
#main .dev-info-copy .headers-bordered {
  color: #1847ed !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.1px !important;
}
/* Developers hero: give the existing photograph a defined editorial panel. */
#main > .cr-developer-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr) !important;
  column-gap: clamp(36px, 5vw, 76px) !important;
  row-gap: 28px !important;
  align-items: center !important;
  overflow: hidden !important;
}
#main > .cr-developer-hero::before {
  display: block !important;
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0 !important;
}
#main > .cr-developer-hero::after {
  display: none !important;
}
#main > .cr-developer-hero .cr-hero-copy {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
#main > .cr-developer-hero h1 {
  max-width: 760px !important;
  font-size: clamp(46px, 4.5vw, 64px) !important;
  line-height: 1.055 !important;
}
#main > .cr-developer-hero .hero-sub {
  max-width: 690px !important;
  font-size: 16px !important;
  line-height: 1.68 !important;
}
#main > .cr-developer-hero .cr-photo-developer {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  position: relative;
  width: 100%;
  min-height: 0 !important;
  aspect-ratio: 5 / 4;
  margin: 0 !important;
  border: 1px solid #c7d1df;
  border-radius: 0 !important;
  background: #dce3ed;
  box-shadow: 14px 14px 0 #e1e7f0;
}
#main > .cr-developer-hero .cr-photo-developer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(24,71,237,.11), transparent 56%, rgba(7,31,56,.15));
}
#main > .cr-developer-hero .cr-photo-developer .cr-photo {
  position: static !important;
  inset: auto !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover;
  object-position: 58% 50%;
  filter: saturate(.6) contrast(1.04);
}
@media (max-width: 1000px) {
  #main > .cr-developer-hero {
    grid-template-columns: 1fr !important;
    row-gap: 0 !important;
  }
  #main > .cr-developer-hero::before {
    margin-bottom: 25px !important;
  }
  #main > .cr-developer-hero .cr-hero-copy {
    grid-column: 1;
    grid-row: 2;
  }
  #main > .cr-developer-hero .cr-photo-developer {
    grid-column: 1;
    grid-row: 3;
    width: min(100% - 14px, 620px);
    aspect-ratio: 16 / 9;
    margin-top: 34px !important;
  }
}
@media (max-width: 767px) {
  #main > .cr-developer-hero h1 {
    font-size: clamp(38px, 9.7vw, 49px) !important;
  }
  #main > .cr-developer-hero .cr-photo-developer {
    aspect-ratio: 3 / 2;
    margin-top: 28px !important;
    box-shadow: 10px 10px 0 #e1e7f0;
  }
}
#main > .cr-developer-hero + nav.container.cr-esdp-section-nav {
  padding-block: 27px 31px !important;
}

#main > .cr-developer-hero::before {
  content: '05  /  DEVELOPERS' !important;
}

/* Developers: four section-specific diagrams, alternating on desktop and linear on phones. */
#main > .container-fluid.dev-info-band {
  padding: 70px 0 !important;
}
#main > .container.dev-info-section {
  padding-block: 70px !important;
}
#main .dev-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(34px, 5vw, 74px);
  align-items: center;
}
#main .dev-info-grid.dev-info--reverse {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}
#main .dev-info-grid > * {
  min-width: 0;
}
#main .dev-info--reverse .dev-info-copy {
  grid-column: 2;
  grid-row: 1;
}
#main .dev-info--reverse .dev-info-figure {
  grid-column: 1;
  grid-row: 1;
}
#main .dev-info-copy .headers-bordered {
  margin-bottom: 19px !important;
}
#main .dev-info-copy h2 {
  max-width: 650px !important;
  margin-bottom: 22px !important;
  font-size: clamp(33px, 3vw, 44px) !important;
  line-height: 1.12 !important;
}
#main .dev-info-copy p {
  max-width: none;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
#main .dev-info-copy > p:last-child {
  margin-bottom: 0 !important;
}
#main .dev-info-figure {
  margin: 0;
  padding: 0;
  background: #fff;
  box-shadow: 14px 14px 0 #e5eaf2;
}
#main .dev-info-figure picture,
#main .dev-info-figure img {
  display: block;
  width: 100%;
}
#main .dev-info-figure img {
  max-width: none;
  height: auto;
}
#main .dev-info-start ol {
  counter-reset: dev-step;
  list-style: none;
  padding: 0 !important;
  margin: 12px 0 0 !important;
  border-top: 1px solid var(--core-line);
}
#main .dev-info-start li {
  counter-increment: dev-step;
  position: relative;
  margin: 0 !important;
  padding: 13px 0 13px 47px !important;
  border-bottom: 1px solid var(--core-line);
  font-size: 14px !important;
  line-height: 1.55 !important;
}
#main .dev-info-start li::before {
  content: counter(dev-step, decimal-leading-zero);
  position: absolute;
  top: 14px;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: #1847ed;
  color: #fff;
  font: 600 10px/1 'JetBrains Mono', monospace;
}
#main .dev-info-start li b,
#main .dev-info-data b,
#main .dev-info-agent li b {
  color: #171a20;
}
#main .dev-info-agent .dev-info-copy > p:first-of-type {
  font-size: 16px !important;
}
#main .dev-info-agent ul {
  list-style: none;
  padding: 0 !important;
  margin: 20px 0 !important;
  border-top: 1px solid var(--core-line);
}
#main .dev-info-agent li {
  position: relative;
  margin: 0 !important;
  padding: 10px 0 10px 20px !important;
  border-bottom: 1px solid var(--core-line);
  font-size: 13px !important;
  line-height: 1.55 !important;
}
#main .dev-info-agent li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 18px;
  width: 7px;
  height: 7px;
  background: #1847ed;
}
#main .dev-info-data .dev-info-copy p + p {
  padding-top: 17px;
  border-top: 1px solid var(--core-line);
}
#main .dev-info-delivery .dev-info-copy p > a {
  font-size: 14px;
  font-weight: 700;
}
@media (max-width: 850px) {
  #main .dev-info-grid,
  #main .dev-info-grid.dev-info--reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: 31px;
  }
  #main .dev-info-grid .dev-info-copy,
  #main .dev-info-grid .dev-info-figure {
    grid-column: 1;
  }
  #main .dev-info-grid .dev-info-copy {
    grid-row: 1;
  }
  #main .dev-info-grid .dev-info-figure {
    grid-row: 2;
    width: min(100% - 14px, 620px);
  }
}
@media (max-width: 767px) {
  #main > .container-fluid.dev-info-band,
  #main > .container.dev-info-section {
    padding-block: 52px !important;
  }
  #main .dev-info-grid {
    gap: 26px;
  }
  #main .dev-info-figure {
    box-shadow: 8px 8px 0 #e5eaf2;
  }
  #main .dev-info-copy h2 {
    font-size: 32px !important;
  }
  #main .dev-info-start li {
    font-size: 13px !important;
  }
}