#processing-flow{width:min(1180px,87.3%);margin:80px auto 96px;scroll-margin-top:110px;color:#282333}
#processing-flow .pf-heading{text-align:center;margin-bottom:34px}
#processing-flow .pf-heading>span{font-size:11px;letter-spacing:.18em;font-weight:600;color:#9678bc}
#processing-flow h2{font-size:clamp(28px,3vw,42px);font-weight:500;letter-spacing:-.045em;margin:14px 0}
#processing-flow .pf-heading p{font-size:16px;color:#797182}
#processing-flow .pf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
#processing-flow .pf-card{position:relative;padding:25px 21px 22px;border:1px solid #e8dff3;border-radius:22px;background:linear-gradient(150deg,#fff 20%,#f8f4fd);box-shadow:0 10px 30px #5e397608;transition:transform .25s,box-shadow .25s}
#processing-flow .pf-card:hover{transform:translateY(-5px);box-shadow:0 16px 35px #78509c14}
#processing-flow .pf-card:not(:last-child):after{content:'→';position:absolute;right:-20px;top:48%;color:#b59acc;font-size:22px;z-index:1}
#processing-flow .pf-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;color:#9678bc}
#processing-flow .pf-top svg{width:30px;height:30px;padding:10px;background:#f0e9f9;border-radius:14px;box-sizing:content-box}
#processing-flow .pf-top>span{font-size:12px;letter-spacing:.08em;color:#ad9cbe}
#processing-flow h3{font-size:21px;font-weight:600;letter-spacing:-.03em;margin:0 0 13px}
#processing-flow .pf-card>p{font-size:14px;line-height:1.65;color:#797182;min-height:116px;margin:0 0 20px}
#processing-flow .pf-items{display:grid;gap:9px}
#processing-flow .pf-items>div{background:#ffffffb3;border:1px solid #eee7f5;border-radius:10px;padding:11px 9px;font-size:12px;display:flex;gap:9px;align-items:center}
#processing-flow .pf-items span{color:#ac8bc8}
@media(max-width:950px){#processing-flow .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#processing-flow .pf-card:nth-child(2):after{display:none}#processing-flow .pf-card>p{min-height:75px}}
@media(max-width:550px){#processing-flow{margin:50px auto}#processing-flow .pf-grid{grid-template-columns:1fr}#processing-flow .pf-card:not(:last-child):after{content:'↓';top:auto;bottom:-23px;right:50%}#processing-flow .pf-card:nth-child(2):after{display:block}#processing-flow .pf-card>p{min-height:0}}
@media(prefers-reduced-motion:reduce){#processing-flow .pf-card{transition:none}#processing-flow .pf-card:hover{transform:none}}

#processing-flow .pf-art{display:block;width:100%;height:180px;margin:0 0 22px;color:#9874c7;overflow:visible}
#processing-flow .pf-wire{fill:none;stroke:#cbb8e4;stroke-width:1.5;stroke-dasharray:4 4}
#processing-flow .pf-node{fill:#fff;stroke:#d7c4ec;stroke-width:1.2;filter:drop-shadow(0 4px 5px #7752980c)}
#processing-flow .pf-art g:has(>rect[width="60"])>.pf-node{fill:#eee3fa;stroke:#b792dc;stroke-width:1.7}
#processing-flow .pf-boundary{fill:#f4eefb;stroke:#d8c6eb;stroke-width:1;stroke-dasharray:5 4}
#processing-flow .pf-core{fill:#e2d2f4}
#processing-flow .pf-card>p{min-height:116px;margin-bottom:10px}
#processing-flow .pf-card:hover .pf-wire{stroke:#a886d1;animation:pf-flow 3s linear infinite}
@keyframes pf-flow{to{stroke-dashoffset:-32}}
@media(prefers-reduced-motion:reduce){#processing-flow .pf-card:hover .pf-wire{animation:none}}
@media(max-width:950px){#processing-flow .pf-card>p{min-height:75px}}
@media(max-width:550px){#processing-flow .pf-card>p{min-height:0}}
/* Original visual sizes with the empty text-to-illustration band removed. */
#processing-flow .pf-card{display:grid;grid-template-rows:auto auto auto 180px auto;align-content:start}
#processing-flow .pf-card>p{min-height:0;margin:0;line-height:1.5}
#processing-flow .pf-art{height:180px;margin:0}
#processing-flow .pf-top{margin-bottom:16px}
#processing-flow .pf-items{margin-top:8px}
@media(min-width:951px){#processing-flow .pf-grid{grid-template-rows:auto auto auto 180px auto;row-gap:0}#processing-flow .pf-card{grid-row:span 5;grid-template-rows:subgrid}#processing-flow .pf-card>p{padding-bottom:0}}
@media(max-width:950px){#processing-flow .pf-card>p{min-height:0}}

#processing-flow .pf-heading{text-align:center}
#processing-flow .pf-heading p{font-size:15px;font-weight:400;line-height:1.5;color:#797182;margin:0 0 14px}

/* Colorful process symbols and stronger illustration interiors. */
#processing-flow .pf-card:nth-child(1){--pf-accent:#2563cf;--pf-tint:#dceaff;--pf-line:#709ee5}
#processing-flow .pf-card:nth-child(2){--pf-accent:#098b99;--pf-tint:#ccf1f1;--pf-line:#51b6bf}
#processing-flow .pf-card:nth-child(3){--pf-accent:#ce7913;--pf-tint:#ffebc9;--pf-line:#dea04b}
#processing-flow .pf-card:nth-child(4){--pf-accent:#239065;--pf-tint:#d4f1e3;--pf-line:#65b994}
#processing-flow .pf-top svg{color:#7850bd;background:#eee7fa}
#processing-flow .pf-art{color:var(--pf-accent)}
#processing-flow .pf-wire{stroke:var(--pf-line);stroke-width:1.8}
#processing-flow .pf-node{fill:var(--pf-tint);stroke:var(--pf-line);stroke-width:1.5}
#processing-flow .pf-art g:has(>rect[width="60"])>.pf-node{fill:var(--pf-accent);stroke:var(--pf-accent)}
#processing-flow .pf-art g:has(>rect[width="60"]){color:#fff}
#processing-flow .pf-boundary{fill:#fff0d8;stroke:#dca34d;stroke-width:1.5}
#processing-flow .pf-core{fill:#f3ca83}
#processing-flow .pf-items span{color:#8b65c4}
#processing-flow .pf-card:hover .pf-wire{stroke:var(--pf-accent)}

/* Tinted card interiors and clearly visible connecting arrows. */
#processing-flow .pf-card{background:linear-gradient(150deg,#f8f4ff 0%,#e8ddf8 100%);border:2px solid #b99cde;box-shadow:0 10px 28px #68439b14}
#processing-flow .pf-items>div{background:#ffffffdb;border-color:#e4daf1}
#processing-flow .pf-card:not(:last-child):after{color:#6436ad;font-weight:800;font-size:28px;line-height:1;text-shadow:0 1px 0 #fff;z-index:2}

/* Shared hierarchy for the process and solution sections; card copy stays left-aligned. */
#processing-flow .pf-heading h2,#agent-products>h2{font-size:clamp(28px,3vw,42px);font-weight:600;line-height:1.2;letter-spacing:-.04em;color:#282333;text-align:center;margin:14px auto 22px;max-width:900px;text-wrap:balance}
#processing-flow .pf-heading>span,#agent-products>.products-label{display:block;font-size:11px;font-weight:600;line-height:1.5;letter-spacing:.18em;color:#9678bc;text-align:center;margin:0 0 14px;text-transform:uppercase}
#processing-flow .pf-heading p{font-size:16px;line-height:1.55;margin:0 auto 34px;max-width:680px}
#processing-flow h3,#agent-products .restored-case-title{font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.03em;margin:0 0 13px}
#processing-flow .pf-card>p,#agent-products .restored-case-desc{font-size:16px;font-weight:400;line-height:1.55;color:#797182}
#agent-products .restored-agent-front{justify-content:flex-start}

/* Reveal each process card when it enters the viewport. */
#processing-flow .pf-card.pf-waiting{opacity:0;translate:0 38px}
#processing-flow .pf-card.pf-entered{animation:pfEnter .75s cubic-bezier(.2,.7,.2,1) var(--pf-delay,0ms) both}
@keyframes pfEnter{from{opacity:0;translate:0 38px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){#processing-flow .pf-card.pf-waiting,#processing-flow .pf-card.pf-entered{opacity:1;translate:none;animation:none}}