/* The central responsibility is the visual anchor; the other benefits stay
   fully readable in normal flow. This component adds no interactive controls. */
.developer-outcomes {
  padding: clamp(64px, 7.5vw, 112px) 0;
  background: #f2f0eb;
  color: var(--ink);
  scroll-margin-top: 68px;
}
.developer-outcomes__inner {
  width: calc(100% - 11.1vw);
  max-width: 1440px;
  margin: 0 auto;
}
.developer-outcomes__header { margin-bottom: 40px; }
.developer-outcomes__header h2 {
  max-width: 23ch;
  margin: 0 0 28px;
  color: var(--ink);
  font: var(--fw-bold) clamp(var(--fs-h3), 4vw, var(--fs-h1))/1.15 'Wix Madefor Display', sans-serif;
  letter-spacing: var(--ls-display);
}
.developer-outcomes__header p {
  max-width: 86ch;
  margin: 0;
  color: var(--body);
  font-size: clamp(var(--fs-body), 1.4vw, var(--fs-lead));
  line-height: 1.7;
}
.developer-outcomes__central {
  padding: clamp(28px, 3.6vw, 52px);
  background: #0b1010;
  color: var(--on-dark);
}
.developer-outcomes__central-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.developer-outcomes__central h3 {
  max-width: 20ch;
  margin: 0;
  color: var(--on-dark);
  font: var(--fw-bold) clamp(var(--fs-h3), 2.6vw, var(--fs-h2))/1.22 'Wix Madefor Display', sans-serif;
  letter-spacing: var(--ls-display);
}
.developer-outcomes__central p {
  max-width: 60ch;
  margin: 0;
  color: var(--disabled);
  font-size: var(--fs-lead);
  line-height: 1.7;
}
.developer-outcomes__areas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin: 36px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid #38403c;
  list-style: none;
}
.developer-outcomes__areas li {
  position: relative;
  min-width: 0;
  padding-left: 15px;
  color: var(--on-dark-2);
  font: var(--fw-normal) var(--fs-small)/1.45 'Wix Madefor Text', sans-serif;
}
.developer-outcomes__areas li::before {
  content: '';
  position: absolute;
  top: .52em;
  left: 0;
  width: 5px;
  height: 5px;
  background: #d2b366;
}
.developer-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.developer-outcome {
  min-width: 0;
  padding: clamp(28px, 3vw, 44px);
  background: #fff;
}
.developer-outcome h3 {
  max-width: 29ch;
  margin: 0 0 20px;
  color: var(--ink);
  font: var(--fw-bold) clamp(var(--fs-lead), 1.75vw, var(--fs-h4))/1.3 'Wix Madefor Display', sans-serif;
  letter-spacing: var(--ls-display);
}
.developer-outcome p {
  margin: 0;
  color: var(--body);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.developer-outcome strong { color: var(--ink); font-weight: var(--fw-bold); }
.developer-outcomes__long-term {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid #c7c4ba;
}
.developer-outcomes__long-term h3 {
  max-width: 22ch;
  margin: 0;
  color: var(--ink);
  font: var(--fw-bold) clamp(var(--fs-h4), 2vw, var(--fs-h3))/1.28 'Wix Madefor Display', sans-serif;
  letter-spacing: var(--ls-display);
}
.developer-outcomes__long-term p {
  margin: 0;
  color: var(--body);
  font-size: var(--fs-body);
  line-height: 1.7;
}
@media (max-width: 1000px) {
  .developer-outcomes__central-copy { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .developer-outcomes__central h3 { max-width: 26ch; }
  .developer-outcomes__central p { max-width: 76ch; }
  .developer-outcomes__areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .developer-outcomes__inner { width: calc(100% - 40px); }
  .developer-outcomes__header { margin-bottom: 28px; }
  .developer-outcomes__header h2 { margin-bottom: 24px; }
  .developer-outcomes__central { padding: 28px 24px; }
  .developer-outcomes__central p { font-size: var(--fs-body); }
  .developer-outcomes__areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; padding-top: 20px; }
  .developer-outcomes__areas li { font-size: var(--fs-small); }
  .developer-outcomes__areas li:last-child { grid-column: 1 / -1; }
  .developer-outcomes__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
  .developer-outcome { padding: 28px 24px; }
  .developer-outcome h3 { font-size: var(--fs-h4); margin-bottom: 16px; }
  .developer-outcomes__long-term { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px; padding-top: 28px; }
}
@media (max-width: 380px) {
  .developer-outcomes__header h2 { font-size: var(--fs-h3); }
  .developer-outcomes__central h3 { font-size: var(--fs-h4); }
  .developer-outcome h3 { font-size: var(--fs-lead); }
  .developer-outcomes__areas { column-gap: 12px; }
}