.workflow-section{padding-block:72px}
.workflow-section .workflow-top{gap:24px 48px;margin-bottom:32px}
.workflow-section .workflow-top>p:last-child{max-width:36ch;justify-self:start;font-size:18px;line-height:1.7}
.workflow-section .workflow-list{gap:28px}
.workflow-section .workflow-step{position:relative;min-width:0}
.workflow-section .workflow-step:not(:last-child)::after{content:"";position:absolute;width:28px;height:1px;right:-28px;top:122px;background:var(--control-border)}
.flow-preview{height:244px;border:1px solid var(--line);border-radius:7px;background:#101d23;overflow:hidden;display:flex;flex-direction:column}
.flow-window-bar{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);min-height:48px}
.flow-lr{display:grid;place-items:center;width:25px;height:25px;flex-shrink:0;background:#192e3c;border:1px solid #537b8e;border-radius:4px;color:#b8dcec;font-size:15px}
.flow-thumbnails{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px;flex:1;min-height:0}
.flow-thumb{position:relative;min-height:0;overflow:hidden;background:#22343b;border:1px solid #a4ceca80;border-radius:2px}
.flow-thumb img{width:100%;height:100%;object-fit:cover;object-position:67% center;display:block}
.flow-thumb>svg:not(.icon){display:block;width:100%;height:100%;overflow:hidden}
.flow-thumb:nth-child(2n) img{object-position:75% center}
.flow-thumb>.icon{position:absolute;width:16px;height:16px;right:3px;bottom:3px;background:#12834a;color:white;border-radius:50%;padding:2px}
.flow-processing{position:relative;flex:1;overflow:hidden}
.flow-processing>img{width:100%;height:100%;object-fit:cover;display:block;opacity:.7}
.flow-crop-frame{position:absolute;top:7%;bottom:7%;left:42%;width:37%;border:1px solid var(--accent)}
.flow-processing-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;background:#101d23ed;border:1px solid var(--line);border-radius:4px;padding:10px;font-size:12px}
.flow-processing-label .icon{width:17px;height:17px;color:var(--accent)}
.flow-review{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 12px 12px;padding:8px;border-radius:3px;background:var(--accent);color:var(--canvas);font-size:12px}
.flow-review .icon{width:14px;height:14px}
.workflow-section .step-text{padding-top:18px}
.workflow-section .step-text h3{font-size:22px;line-height:1.3;margin:8px 0}
.workflow-section .step-text p{font-size:17px;line-height:1.7}
@media(max-width:1000px) and (min-width:701px){.flow-window-bar{font-size:10px;padding:8px;gap:6px}.flow-preview{height:215px}.workflow-section .workflow-list{gap:20px}.workflow-section .workflow-step:not(:last-child)::after{right:-20px;width:20px;top:108px}.workflow-section .step-text h3{font-size:20px}.workflow-section .step-text p{font-size:16px}}
@media(max-width:700px){
 .workflow-section{padding-block:48px}
 .workflow-section .workflow-top{margin-bottom:28px}
 .workflow-section .workflow-top>p:last-child{margin-top:16px;font-size:16px}
 .workflow-section .workflow-list{display:flex;gap:28px;margin-left:8px;padding-left:20px;border-left:1px solid var(--control-border)}
 .workflow-section .workflow-step{display:flex;flex-direction:column;align-items:stretch;gap:14px}
 .workflow-section .workflow-step:not(:last-child)::after{display:none}
 .workflow-section .workflow-step::before{content:"";position:absolute;left:-26px;top:21px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #14262d}
 .flow-preview{height:210px}
 .workflow-section .step-text{padding:0}
 .workflow-section .step-text h3{font-size:21px;margin:6px 0}
 .workflow-section .step-text p{font-size:16px;max-width:34ch}
}