.flow-context { margin: -4px 0 25px; padding: 19px 22px; border: 1px solid #e3daf5; border-radius: 19px; background: #fff; box-shadow: 0 8px 25px #3927780a; }
.flow-context-heading { display: flex; align-items: center; gap: 12px; }
.flow-context-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 11px; background: #eee7ff; color: #5940ad; font-weight: 800; }
.flow-context-kicker, .workflow-kicker, .workflow-section-head span, .workflow-decisions span { color: #ad5e64; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; }
.flow-context h2 { margin-top: 3px; color: #32245d; font-size: 15px; }
.flow-context-heading a { margin-left: auto; color: #6042c6; font-size: 11px; font-weight: 700; white-space: nowrap; }
.flow-context-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.flow-context-grid > div { min-width: 0; padding: 12px 14px; border-radius: 12px; background: #f8f5ff; }
.flow-context-grid > div:nth-child(2) { background: #eaf8f5; }
.flow-context-grid > div:nth-child(3) { background: #fff4e7; }
.flow-context-grid b { color: #392778; font-size: 10px; }
.flow-context-grid p { margin-top: 5px; color: #6e6883; font-size: 10px; line-height: 1.55; }
.flow-next { margin-top: 13px; border: 0; padding: 7px 0; background: transparent; color: #6042c6; font-size: 10px; box-shadow: none; }
.flow-next:hover { background: transparent; text-decoration: underline; }
.workflow-intro { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 32px; padding: 35px; border-radius: 25px; background: #e9ddff; }
.workflow-intro h2 { margin-top: 10px; color: #372575; font: 800 clamp(28px, 3vw, 43px)/1.14 Manrope, sans-serif; letter-spacing: -1.2px; }
.workflow-intro p { max-width: 480px; margin-top: 15px; color: #655a87; font-size: 12px; line-height: 1.7; }
.workflow-pipeline { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; max-width: 460px; }
.workflow-pipeline span { padding: 10px 13px; border-radius: 999px; background: #fff; color: #483184; font-size: 10px; font-weight: 800; }
.workflow-pipeline b { color: #8e6ec9; }
.workflow-section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 30px 0 17px; }
.workflow-section-head h2 { margin-top: 5px; color: #31235b; font-size: 23px; }
.workflow-section-head p { max-width: 290px; color: #77708f; font-size: 11px; line-height: 1.6; }
.workflow-step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.workflow-step { display: flex; flex-direction: column; min-width: 0; padding: 21px; border: 1px solid #e5def2; border-radius: 19px; background: #fff; box-shadow: 0 8px 25px #3927780a; }
.workflow-step-number { color: #ef755f; font-size: 11px; font-weight: 800; }
.workflow-step h3 { margin: 10px 0 16px; color: #33255e; font: 800 17px Manrope, sans-serif; }
.workflow-step dl { margin: 0 0 17px; }
.workflow-step dl div { padding: 9px 0; border-top: 1px solid #f0ebf7; }
.workflow-step dt { color: #a06e75; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; }
.workflow-step dd { margin: 4px 0 0; color: #655e80; font-size: 11px; line-height: 1.5; }
.workflow-step button { align-self: start; margin-top: auto; border: 0; padding: 7px 0; color: #6042c6; background: transparent; font-size: 10px; box-shadow: none; }
.workflow-step button:hover { background: transparent; text-decoration: underline; }
.workflow-integrations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.workflow-integrations > div { min-width: 0; padding: 20px; border: 1px solid #e9e3f5; border-radius: 17px; background: #fff; }
.workflow-integrations strong { color: #34255d; font-size: 13px; }
.workflow-integrations p { margin-top: 10px; color: #706987; font-size: 11px; line-height: 1.6; }
.workflow-status { float: right; padding: 6px 9px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.workflow-status.local { background: #e2f5ed; color: #1c7562; }
.workflow-status.offline { background: #fff1df; color: #9a5d2a; }
.workflow-status.demo { background: #eee8ff; color: #6648bb; }
.workflow-decisions { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-top: 28px; padding: 25px; border-radius: 19px; background: #fff1e7; }
.workflow-decisions h2 { margin-top: 6px; color: #3d2b62; font-size: 19px; }
.workflow-decisions p { max-width: 650px; margin-top: 7px; color: #766b83; font-size: 11px; line-height: 1.6; }
.workflow-decisions button { flex: none; }
@media (max-width: 980px) { .workflow-intro { display: block; } .workflow-pipeline { margin-top: 22px; } .workflow-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .flow-context { padding: 16px; } .flow-context-grid { grid-template-columns: 1fr; gap: 7px; } .flow-context-grid > div { padding: 10px 12px; } .workflow-intro { padding: 25px; } .workflow-step-grid, .workflow-integrations { grid-template-columns: 1fr; } .workflow-section-head, .workflow-decisions { align-items: start; flex-direction: column; } .workflow-section-head p { max-width: none; } }