/* Final composition for the Whole Process section.
   Loaded after the homepage styles so the visual surface follows the same
   centered panel rhythm as the Business Reality Check below it. */

#framework.section-muted {
  width: calc(100% - 48px);
  max-width: var(--max);
  margin: 28px auto 24px;
  padding: 88px 38px 96px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, #0d1218, #090c10);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.24);
}

#framework.section-muted > .eyebrow,
#framework.section-muted > h2,
#framework.section-muted > .four-grid {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

#framework.section-muted > h2 {
  max-width: 1080px;
}

#framework.section-muted > .four-grid {
  margin-top: 44px;
}

@media (max-width: 980px) {
  #framework.section-muted {
    width: calc(100% - 36px);
    margin-top: 22px;
    padding: 72px 28px 78px;
  }
}

@media (max-width: 620px) {
  #framework.section-muted {
    width: calc(100% - 28px);
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 62px 20px 68px;
    border-radius: 18px;
  }

  #framework.section-muted > .four-grid {
    margin-top: 34px;
  }
}