.workflow-timeline { padding: 80px 32px; background: #fff; color: #0e2220; }
.workflow-heading,.workflow-track { max-width: 1180px; margin-inline: auto; }
.workflow-heading { padding: 0 0 64px; text-align: center; }
.workflow-heading h2 { margin: 18px 0 0; font-size: clamp(28px,3vw,40px); line-height: 1.25; letter-spacing: -.045em; font-weight: 600; padding-bottom: .1em; }
.workflow-track { position: relative; }
.workflow-line { position: absolute; left: 20px; top: 30px; bottom: 220px; width: 2px; background: #e6ebe8; overflow: hidden; }
.workflow-line span { display: block; height: 100%; background: linear-gradient(#f2470c88,#f2470c); transform: scaleY(0); transform-origin: top; }
.workflow-step { position: relative; display: grid; grid-template-columns: .85fr 1.35fr; gap: 48px; align-items: start; padding: 32px 0 110px 70px; }
.workflow-copy { position: sticky; top: 140px; padding-top: 16px; }
.workflow-marker { position: absolute; left: -70px; top: 12px; width: 42px; height: 42px; display: grid; place-items: center; background: #fff; color: #f2470c; border: 1px solid #f2470c66; border-radius: 50%; box-shadow: 0 0 0 8px #fff; font-size: 14px; font-weight: 700; }
.workflow-kicker { color: #b83b10; font-size: 11px; letter-spacing: .16em; font-weight: 600; margin: 0 0 18px; }
.workflow-copy h3,.workflow-finish h3 { font-size: clamp(28px,3vw,40px); font-weight: 600; line-height: 1.25; letter-spacing: -.04em; margin: 0 0 22px; padding-bottom: .1em; }
.workflow-copy > p:last-child,.workflow-finish > p:not(.eyebrow) { max-width: 340px; color: #65716c; font-size: 15px; line-height: 1.8; margin: 0; }
.workflow-demo { min-width: 0; margin: 0; border: 1px solid #e0e7e2; border-radius: 20px; background: #fff; overflow: hidden; box-shadow: 0 5px 0 #eaf0eb,0 22px 44px -30px #0e222044; }
.workflow-demo-bar { height: 62px; padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e8ece9; }
.workflow-demo-bar img { width: 85px; height: auto; }
.workflow-demo-bar > span { font-size: 10px; color: #65716c; text-align: right; }
.workflow-demo-stage { position: relative; height: 390px; padding: 25px; background: #fafcfb; overflow: hidden; }
.workflow-demo-content { height: 100%; }
.workflow-demo figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; font-size: 10px; color: #65716c; min-height: 50px; }
.workflow-demo-toggle { background: none; border: 0; color: #0e2220; font: inherit; min-width: 44px; min-height: 32px; cursor: pointer; }
.workflow-demo-toggle:focus-visible { outline: 2px solid #f2470c; border-radius: 4px; }
.workflow-cursor { position: absolute; left: 78%; top: 78%; color: #0e2220; font-size: 24px; transform: rotate(-100deg); filter: drop-shadow(1px 1px 0 white); transition: left .65s ease,top .65s ease; z-index: 3; pointer-events: none; }
.workflow-cursor.is-clicking { color: #f2470c; }
.wd-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 12px; }
.wd-title { font-size: 17px; font-weight: 600; margin: 0 0 16px; }
.wd-tag { padding: 5px 9px; border-radius: 6px; background: #e8f4ed; color: #257647; font-size: 10px; }
.wd-recording { color: #d1420c; background: #fff0e8; }
.wd-field { background: white; border: 1px solid #dce4df; border-radius: 9px; padding: 10px 12px; font-size: 12px; margin: 8px 0; min-height: 39px; }
.wd-label { font-size: 10px; color: #65716c; margin: 10px 0 4px; }
.wd-button { display: inline-block; background: #f2470c; color: white; border-radius: 9px; padding: 9px 13px; font-size: 11px; font-weight: 600; margin-top: 10px; }
.wd-button.secondary { background: white; border: 1px solid #dce4df; color: #0e2220; }
.wd-actions { display: flex; gap: 9px; align-items: center; }
.wd-modal { position: absolute; right: 20px; top: 92px; width: 230px; padding: 18px; background: white; border: 1px solid #e1e6e3; border-radius: 15px; box-shadow: 0 12px 36px #0e22201c; }
.wd-modal .wd-title { color: #f2470c; font-size: 13px; }
.wd-item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; margin: 8px 0; border: 1px solid #e1e7e3; background: white; border-radius: 9px; font-size: 11px; min-height: 39px; }
.wd-item b { color: #c4400d; font-weight: 600; }
.wd-item .wd-tag { margin-left: auto; }
.wd-success { text-align: center; padding-top: 42px; }
.wd-success > span { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #e7f4eb; color: #257647; font-size: 25px; margin-bottom: 18px; }
.wd-success p { font-size: 12px; color: #65716c; }
.wd-resource { border-style: dashed; }
.wd-text { height: 65px; }
.wd-progress { height: 5px; border-radius: 5px; background: #e5ece7; margin: 14px 0; }
.wd-progress span { display: block; width: 50%; height: 100%; background: #26865b; }
.workflow-finish { position: relative; padding: 0 0 0 70px; }
.workflow-finish .workflow-marker { left: 0; top: 0; background: #f2470c; color: white; }
.workflow-finish .eyebrow { margin-bottom: 20px; }
.workflow-finish .btn { margin-top: 24px; }
@media(max-width: 900px) { .workflow-step { gap: 28px; grid-template-columns: .8fr 1.2fr; } .workflow-demo-stage { padding: 18px; } .workflow-copy h3 { font-size: 28px; } }
@media(max-width: 700px) { .workflow-timeline { padding: 48px 20px; } .workflow-heading { padding: 0 0 30px; } .workflow-heading h2 { font-size: clamp(21px, 5.6vw, 28px); } .workflow-line { left: 12px; bottom: 255px; } .workflow-step { grid-template-columns: minmax(0,1fr); padding: 22px 0 70px 42px; gap: 25px; } .workflow-copy { position: relative; top: auto; padding-top: 0; } .workflow-marker { left: -42px; top: 0; width: 26px; height: 26px; font-size: 10px; box-shadow: 0 0 0 5px white; } .workflow-demo-bar { padding: 12px; gap: 8px; } .workflow-demo-bar img { width: 66px; } .workflow-demo-bar span { font-size: 9px; } .workflow-demo-stage { height: 390px; padding: 14px; } .workflow-demo figcaption { padding: 8px 12px; } .wd-modal { right: 10px; width: min(230px, calc(100% - 20px)); top: 70px; } .wd-top { font-size: 10px; } .wd-title { font-size: 15px; } .workflow-finish { padding-left: 42px; } .workflow-finish h3 { font-size: 28px; } }
@media(prefers-reduced-motion: reduce) { .workflow-cursor { display: none; } .workflow-line span { transform: none; } }

/* Each complete step settles beneath the next, like the supplied card stack. */
@media(min-width: 901px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  .workflow-stack { position: relative; isolation: isolate; padding-bottom: 80px; }
  .workflow-stack .workflow-step { position: sticky; top: 108px; z-index: 1; background: #fff; padding: 26px 24px 32px 70px; margin-bottom: 100px; border-radius: 22px; box-shadow: 0 -1px 0 #e8ece9, 0 -16px 32px -28px #0e222044; }
  .workflow-stack .workflow-step:nth-child(2) { top: 122px; z-index: 2; }
  .workflow-stack .workflow-step:nth-child(3) { top: 136px; z-index: 3; }
  .workflow-stack .workflow-step:nth-child(4) { top: 150px; z-index: 4; margin-bottom: 0; }
  .workflow-stack .workflow-copy { position: relative; top: auto; }
}

/* A matching closing card for the completed workflow. */
.workflow-finish { padding: 48px; text-align: center; border: 1px solid #e0e7e2; border-radius: 22px; background: #fff; box-shadow: 0 5px 0 #eaf0eb, 0 22px 44px -30px #0e222044; }
.workflow-finish .workflow-marker { position: static; margin: 0 auto 22px; box-shadow: none; }
.workflow-finish > p:not(.eyebrow) { max-width: 600px; margin-inline: auto; }
@media(max-width: 700px) {
  .workflow-finish { padding: 28px; }
  .workflow-finish .workflow-marker { position: static; width: 38px; height: 38px; font-size: 18px; margin-bottom: 22px; box-shadow: none; }
}

/* Short, centered step introductions beside each demo. */
.workflow-stack .workflow-copy { position: relative; top: auto; align-self: center; text-align: center; padding-top: 0; }
.workflow-copy h3 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 18px; }
.workflow-copy > p:last-child { max-width: 300px; margin-inline: auto; }
@media(max-width: 700px) { .workflow-copy h3 { font-size: 26px; } }

/* Clean side-by-side process rows, matching the supplied reference. */
.workflow-heading { padding-bottom: 44px; }
.workflow-heading h2 { font-size: clamp(30px,4vw,48px); margin-top: 14px; }
.workflow-line { display: none; }
.workflow-stack { padding: 0; isolation: auto; }
.workflow-stack .workflow-step { position: relative; top: auto; z-index: auto; display: grid; grid-template-columns: .82fr 1.18fr; gap: 42px; align-items: center; padding: 30px 0; margin: 0; border-radius: 0; background: transparent; box-shadow: none; }
.workflow-stack .workflow-step:nth-child(n) { top: auto; z-index: auto; margin-bottom: 0; }
.workflow-stack .workflow-step + .workflow-step { border-top: 1px solid #e4e9e6; }
.workflow-stack .workflow-copy { text-align: left; padding: 0; }
.workflow-copy h3 { display: flex; align-items: baseline; gap: 20px; margin-bottom: 18px; font-size: clamp(25px,2.6vw,36px); letter-spacing: -.04em; }
.workflow-number { color: #f2470c; font-weight: 600; flex: 0 0 auto; }
.workflow-copy > p:last-child { max-width: 390px; margin: 0; font-size: 17px; line-height: 1.55; }
.workflow-demo { border-radius: 18px; box-shadow: 0 12px 24px -16px #0e222030; }
.workflow-demo-bar { height: 66px; padding: 18px 24px; }
.workflow-demo-bar img { width: 105px; }
.workflow-demo-bar > span { font-size: 11px; }
.workflow-demo-stage { height: auto; min-height: 270px; padding: 22px 26px; }
.workflow-demo-content { height: auto; }
.workflow-demo figcaption,.workflow-cursor { display: none; }
.workflow-demo .wd-top { margin-bottom: 10px; font-size: 13px; }
.workflow-demo .wd-title { font-size: 23px; margin-bottom: 16px; }
.workflow-demo .wd-label { font-size: 12px; }
.workflow-demo .wd-field,.workflow-demo .wd-item { font-size: 13px; padding: 12px 14px; min-height: 44px; }
.wd-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.wd-save-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.workflow-demo .wd-button { font-size: 12px; margin-top: 0; }
.workflow-demo .wd-tag { font-size: 11px; }
.wd-recorder { width: fit-content; margin: 18px auto -6px; padding: 10px 14px; display: flex; align-items: center; gap: 20px; border: 1px solid #e1e6e3; border-radius: 14px; box-shadow: 0 8px 22px #0e22200d; background: #fff; }
.wd-recorder-status { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #e22228; }
.wd-recorder-status i { width: 13px; height: 13px; border-radius: 50%; background: #e22228; animation: recorder-breathe 2s ease-in-out infinite; }
.wd-recorder button { font: inherit; font-size: 12px; cursor: pointer; }
.wd-recorder [data-recorder-pause] { width: 32px; height: 32px; border: 1px solid #dde5e0; border-radius: 50%; background: #fff; color: #0e2220; }
.wd-recorder [data-recorder-finish],.workflow-demo .wd-green { background: #153e30; color: #fff; border: 0; border-radius: 7px; padding: 9px 26px; }
.wd-recorder-divider { width: 1px; height: 22px; background: #e2e8e4; }
.wd-builder-heading { display: flex; align-items: center; gap: 22px; }
.wd-builder-heading > div { flex: 1; }
.wd-builder-heading .wd-title { margin-bottom: 16px; }
.wd-drag { margin-left: auto; color: #88928d; }
.workflow-demo .wd-text { height: auto; min-height: 52px; }
.workflow-demo .wd-resource { color: #76847c; }
.workflow-demo .wd-item .wd-tag { margin-left: auto; }
.workflow-finish { margin-top: 40px; }
.recorder-paused .wd-recorder-status i { animation-play-state: paused; }
.wd-recorder button:focus-visible { outline: 2px solid #f2470c; outline-offset: 3px; }
@keyframes recorder-breathe { 50% { opacity: .5; } }
@media(max-width: 800px) { .workflow-stack .workflow-step { grid-template-columns: 1fr; gap: 24px; } .workflow-copy h3 { font-size: 28px; gap: 16px; } .workflow-copy > p:last-child { font-size: 15px; } }
@media(max-width: 450px) { .workflow-demo-bar { padding: 14px; gap: 10px; } .workflow-demo-bar img { width: 85px; } .workflow-demo-bar > span { font-size: 9px; } .workflow-demo-stage { padding: 18px 14px; } .wd-field-pair { gap: 12px; } .workflow-demo .wd-field,.workflow-demo .wd-item { font-size: 11px; padding: 10px; } .wd-recorder { gap: 12px; padding: 9px; } .wd-builder-heading { gap: 10px; flex-wrap: wrap; } .wd-builder-heading .wd-title { font-size: 19px; } .workflow-demo .wd-green { padding: 8px 15px; } }
@media(prefers-reduced-motion: reduce) { .wd-recorder-status i { animation: none; } }