/* Add after V4 styles.css. All new rules are scoped to this ecosystem only. */
.ds-eco .ds-eco__logo { display: block; width: 170px; max-width: 100%; height: 42px; object-fit: contain; filter: grayscale(1) brightness(0); }
.ds-eco .ds-eco__names li { flex-direction: column; gap: 7px; }
.ds-eco .ds-eco__logo--sap { width: 88px; height: 70px; }
.ds-eco .ds-eco__logo--woo { width: 130px; }
.ds-eco .ds-eco__logo--dynamics, .ds-eco .ds-eco__logo--chatgpt { width: 38px; height: 38px; }
.ds-eco .ds-eco__logo--adobe { width: 115px; height: 34px; }
.ds-eco .ds-eco__logo-caption { color: #000; font: 600 14px/1.3 Arial, sans-serif; letter-spacing: 0; }
.ds-eco .ds-eco__foundation-label { align-items: center; }
@media (max-width: 700px) {
 .ds-eco .ds-eco__logo { max-width: 100%; height: 34px; }
 .ds-eco .ds-eco__logo--sap { width: 75px; height: 60px; }
 .ds-eco .ds-eco__logo--woo { width: 110px; }
 .ds-eco .ds-eco__names--ai .ds-eco__logo { height: 28px; }
 .ds-eco .ds-eco__logo-caption { font-size: 13px; }
}
.ds-eco { --ds-eco-line: #7eabb2; --ds-eco-ink: #061321; --ds-eco-muted: #425764; }
.ds-eco .section-heading { max-width: 880px; }
.ds-eco__flow { max-width: 1200px; margin: 48px auto 0; }
.ds-eco__group, .ds-eco__foundation, .ds-eco__ai { min-width: 0; text-align: center; }
.ds-eco h3 { color: var(--ds-eco-ink); font: 650 16px/1.4 Montserrat, Arial, sans-serif; margin: 0; letter-spacing: 0; }
.ds-eco__context { margin: 6px 0 20px; color: var(--ds-eco-muted); font-size: 14px; }
.ds-eco__names { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 16px 28px; }
.ds-eco__names--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-eco__names li { min-width: 0; min-height: 70px; display: flex; align-items: center; justify-content: center; color: #000; font: 700 clamp(20px, 2.1vw, 28px)/1.2 Arial, sans-serif; letter-spacing: -.035em; overflow-wrap: normal; }
.ds-eco__connector { position: relative; display: block; width: 100%; height: 80px; overflow: visible; fill: none; stroke: var(--ds-eco-line); stroke-width: 1.5; }
.ds-eco__connector path { vector-effect: non-scaling-stroke; }
.ds-eco__trunk { display: none; }
.ds-eco__foundation { padding: 16px 0 0; }
.ds-eco__foundation-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px 12px; margin: 10px 0 24px; }
.ds-eco__foundation-label strong { color: #000; font: 700 25px/1.25 Arial, sans-serif; letter-spacing: -.035em; }
.ds-eco__foundation-label span { color: var(--ds-eco-muted); font-size: 14px; }
/* Slot stays light and borderless. The child component owns its responsive art, not its own outer section. */
.ds-eco__complexity-slot { width: 100%; min-width: 0; position: relative; background: transparent; }
.ds-eco__complexity-slot > * { max-width: 100%; min-width: 0; }
.ds-eco__placeholder { padding: 36px 16px; background: radial-gradient(ellipse, #d2eaed 0%, transparent 70%); }
.ds-eco__placeholder h4 { margin: 0 0 20px; font-size: clamp(24px, 3vw, 36px); line-height: 1.15; letter-spacing: -.035em; }
.ds-eco__placeholder p { margin: 0; font-size: 16px; line-height: 1.5; }
.ds-eco__placeholder p span { display: block; color: #285d6b; margin: 10px 0; }
.ds-eco__placeholder-status { display: block; font-size: 12px; color: var(--ds-eco-muted); margin-top: 24px; }
.ds-eco__ai { margin: 40px auto 0; padding-top: 24px; border-top: 1px solid #c5dadd; max-width: 620px; }
.ds-eco__names--ai { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.ds-eco__names--ai li { min-height: 44px; font-size: 22px; }
.ds-eco__note { margin: 36px auto 0; text-align: center; max-width: 750px; }
@media (max-width: 700px) {
  .ds-eco__flow { margin-top: 32px; }
  .ds-eco__names--four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .ds-eco__names li { font-size: 21px; min-height: 66px; }
  .ds-eco__connector { height: 64px; }
  .ds-eco__branches { display: none; }
  .ds-eco__trunk { display: block; }
  .ds-eco__foundation { padding-top: 10px; }
  .ds-eco__placeholder { padding: 26px 0; }
  .ds-eco__ai { margin-top: 32px; }
  .ds-eco__names--ai { gap: 10px; }
  .ds-eco__names--ai li { font-size: 19px; min-height: 44px; }
  .ds-eco__note { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-eco__complexity-slot *, .ds-eco__complexity-slot *::before, .ds-eco__complexity-slot *::after { animation: none !important; transition: none !important; }
}