.si-framework-steps {
  --si-framework-steps-bg: var(--si-negative, #050607);
  --si-framework-steps-text: var(--si-paper, #f7f3ed);
  --si-framework-steps-muted: #b8bdbe;
  --si-framework-steps-line: #535b60;
  --si-framework-steps-accent: var(--si-primary, #cff106);
  --si-framework-steps-on-accent: var(--si-ink, #101316);
  --si-framework-steps-edge: transparent;
  --si-framework-steps-gap: clamp(24px, 4vw, 64px);
  box-sizing: border-box;
  width: 100%; max-width: none; margin-block: 0;
  padding: clamp(28px, 5vw, 72px);
  background: var(--si-framework-steps-bg); color: var(--si-framework-steps-text);
  font-family: var(--si-font, Inter, ui-sans-serif, system-ui, sans-serif);
  overflow-wrap: anywhere;
}
.si-framework-steps *, .si-framework-steps *::before, .si-framework-steps *::after { box-sizing: border-box; }
.entry-content > .si-framework-steps,
.services-content > .si-framework-steps,
.single-insight__content > .si-framework-steps { width: 100%; max-width: none; }
.entry-content > .si-framework-steps.alignfull:not(.si-framework-steps--editor),
.services-content > .si-framework-steps.alignfull:not(.si-framework-steps--editor),
.single-insight__content > .si-framework-steps.alignfull:not(.si-framework-steps--editor) {
  width: 100vw; max-width: none; margin-inline: calc(50% - 50vw);
}
.entry-content > .si-framework-steps.alignwide,
.services-content > .si-framework-steps.alignwide,
.single-insight__content > .si-framework-steps.alignwide { width: 100%; max-width: var(--si-content, 1180px); margin-inline: auto; }
.si-framework-steps.si-framework-steps--editor { width: 100%; max-width: none; margin-inline: 0; }
.si-framework-steps--bg-white,
.si-framework-steps--bg-light,
.si-framework-steps--bg-pale-green,
.si-framework-steps--bg-green,
.si-framework-steps--bg-orange {
  --si-framework-steps-text: var(--si-ink, #101316);
  --si-framework-steps-muted: #555e63;
  --si-framework-steps-line: #b7bfbd;
}
.si-framework-steps--bg-white { --si-framework-steps-bg: #fff; }
.si-framework-steps--bg-light { --si-framework-steps-bg: var(--si-paper, #f7f3ed); }
.si-framework-steps--bg-pale-green { --si-framework-steps-bg: #f4f8e8; }
.si-framework-steps--bg-green {
  --si-framework-steps-bg: var(--si-primary, #cff106);
  --si-framework-steps-muted: #3f4b13; --si-framework-steps-line: #859630;
}
.si-framework-steps--bg-orange {
  --si-framework-steps-bg: var(--si-secondary, #f9b007);
  --si-framework-steps-muted: #534009; --si-framework-steps-line: #9b7300;
}
.si-framework-steps--accent-orange { --si-framework-steps-accent: var(--si-secondary, #f9b007); }
.si-framework-steps--accent-black { --si-framework-steps-accent: var(--si-negative, #050607); --si-framework-steps-on-accent: #fff; }
.si-framework-steps--accent-white { --si-framework-steps-accent: #fff; }
.si-framework-steps--bg-white.si-framework-steps--accent-white,
.si-framework-steps--bg-light.si-framework-steps--accent-white,
.si-framework-steps--bg-pale-green.si-framework-steps--accent-white,
.si-framework-steps--bg-green.si-framework-steps--accent-green,
.si-framework-steps--bg-orange.si-framework-steps--accent-orange { --si-framework-steps-edge: #85898a; }
.si-framework-steps--bg-black.si-framework-steps--accent-black { --si-framework-steps-edge: #8a8e90; }

.si-framework-steps__inner { max-width: 1480px; margin-inline: auto; container: si-framework-steps / inline-size; }
.si-framework-steps__header { margin-bottom: clamp(32px, 4vw, 56px); }
.si-framework-steps .si-framework-steps__title { margin: 0; color: var(--si-framework-steps-text); }
.si-framework-steps .si-framework-steps__eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  color: var(--si-framework-steps-muted); font-size: 11px; font-weight: 750;
  line-height: 1.5; letter-spacing: .12em; text-transform: uppercase;
}
.si-framework-steps__eyebrow::before {
  content: ""; flex: 0 0 25px; height: 3px;
  background: var(--si-framework-steps-accent); box-shadow: 0 0 0 1px var(--si-framework-steps-edge);
}
.si-framework-steps .si-framework-steps__intro { max-width: 65ch; margin: 18px 0 0; color: var(--si-framework-steps-muted); font-size: clamp(14px, 1.5vw, 17px); font-weight: 400; line-height: 1.65; }
.si-framework-steps .si-framework-steps__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch;
  gap: var(--si-framework-steps-gap); margin: 0; padding: 0; list-style: none;
}
.si-framework-steps .si-framework-steps__step { min-width: 0; position: relative; margin: 0; padding: 26px 0 0; list-style: none; }
.si-framework-steps__step::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--si-framework-steps-accent); box-shadow: 0 0 0 1px var(--si-framework-steps-edge);
}
.si-framework-steps__step-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 36px; margin-bottom: 26px; }
.si-framework-steps__label {
  display: inline-flex; align-items: center; min-height: 36px; padding: 9px 14px;
  background: var(--si-framework-steps-accent); color: var(--si-framework-steps-on-accent);
  box-shadow: 0 0 0 1px var(--si-framework-steps-edge);
  font-size: 12px; font-weight: 800; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase;
}
.si-framework-steps__connector { flex-shrink: 0; margin-left: auto; color: var(--si-framework-steps-text); font-size: 32px; font-weight: 400; line-height: 1; }
.si-framework-steps .si-framework-steps__step-title { margin: 0 0 20px; color: var(--si-framework-steps-text); }
.si-framework-steps .si-framework-steps__copy { color: var(--si-framework-steps-muted); }
.si-framework-steps .si-framework-steps__copy p { margin: 0 0 1em; }
.si-framework-steps .si-framework-steps__copy p:last-child { margin-bottom: 0; }

/* On narrow blocks the sequence reads downwards, without narrow text columns. */
@container si-framework-steps (max-width: 691px) {
  .si-framework-steps .si-framework-steps__list { grid-template-columns: 1fr; gap: 28px; }
  .si-framework-steps .si-framework-steps__step { padding-bottom: 0; }
  .si-framework-steps .si-framework-steps__step:not(:last-child) { padding-bottom: 44px; }
  .si-framework-steps__step-top { margin-bottom: 20px; }
  .si-framework-steps__connector { position: absolute; left: 0; bottom: 0; transform: rotate(90deg); transform-origin: center; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 767px) {
    .si-framework-steps .si-framework-steps__list { grid-template-columns: 1fr; gap: 28px; }
    .si-framework-steps .si-framework-steps__step:not(:last-child) { padding-bottom: 44px; }
    .si-framework-steps__step-top { margin-bottom: 20px; }
    .si-framework-steps__connector { position: absolute; left: 0; bottom: 0; transform: rotate(90deg); transform-origin: center; }
  }
}
@media (max-width: 480px) { .si-framework-steps { padding: 28px 18px; } }