/* CMS-authored, illustrative workflows. Shared brand tokens live in site.css. */
.process-diagram { grid-column: 1 / -1; min-width: 0; margin: 0 0 18px; padding: clamp(24px, 4vw, 48px); border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.process-diagram figcaption { max-width: 780px; }
.process-diagram h2 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.025em; }
.process-description { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.process-diagram-steps { display: flex; gap: 32px; margin: 32px 0 0; padding: 0; list-style: none; }
.process-diagram-steps li { position: relative; flex: 1 1 0; min-width: 0; }
.process-diagram-steps li:not(:last-child)::after { content: ""; position: absolute; top: 35px; left: 84px; right: -14px; height: 1px; background: var(--control-border); }
.process-diagram-steps li:not(:last-child)::before { content: ""; position: absolute; top: 32px; right: -14px; width: 7px; height: 7px; border-top: 1px solid var(--control-border); border-right: 1px solid var(--control-border); transform: rotate(45deg); }
.process-step-symbol { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--white); color: var(--brand-blue-dark); }
.process-step-symbol svg { display: block; width: 46px; height: 46px; }
.process-diagram-steps li:last-child .process-step-symbol { border-bottom: 3px solid var(--brand-orange); }
.process-step-copy { display: flex; gap: 10px; align-items: baseline; color: var(--ink); font-family: var(--font-display); font-size: 16px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.process-step-number { flex: 0 0 auto; color: var(--muted); font-family: var(--font-body); font-size: 14px; font-weight: 400; }
@media (min-width: 1024px) {
  .offering-flow .content-blocks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .offering-flow .vibeFeatureBlock { grid-column: span 2; }
  .offering-flow .content-blocks > .vibeFeatureBlock:nth-child(3n + 1 of .vibeFeatureBlock):has(+ .process-diagram) { grid-column: 1 / -1; }
  .offering-flow .vibeFeatureBlock:has(.text-link) { grid-column: span 3; }
  .offering-flow .vibeFeatureBlock:has(+ .decision-panel) { grid-column: 1 / span 3; }
  .offering-flow .decision-panel { grid-column: span 3; }
}
@media (max-width: 760px) {
  .process-diagram-steps { flex-direction: column; gap: 24px; }
  .process-diagram-steps li { display: flex; gap: 20px; align-items: center; }
  .process-step-symbol { flex: 0 0 56px; width: 56px; height: 56px; margin: 0; border-radius: 10px; }
  .process-step-symbol svg { width: 36px; height: 36px; }
  .process-step-copy { flex-direction: column; gap: 0; }
  .process-diagram-steps li:not(:last-child)::after { top: 61px; bottom: -18px; left: 27px; right: auto; width: 1px; height: auto; }
  .process-diagram-steps li:not(:last-child)::before { top: auto; bottom: -18px; left: 24px; right: auto; transform: rotate(135deg); }
}
@media (forced-colors: active) {
  .process-diagram-steps li:not(:last-child)::after { background: CanvasText; }
  .process-diagram-steps li:not(:last-child)::before, .process-step-symbol { border-color: CanvasText; }
}