@media screen {
  .process-visual{grid-column:1/-1;min-width:0;margin:0 0 20px;padding:20px;border:1px solid #ffffffdc;border-radius:24px;background:linear-gradient(115deg,#edf5f0bc,#f4eef8b8 60%,#fbeef3b0);box-shadow:0 8px 32px #39335d04;overflow:hidden}
  .landing-bento>.process-visual,.overview-bento>.process-visual{margin:0}
  .process-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
  .process-step{--process-accent:#315f57;--process-tint:#cde9df;--process-delay:0s;position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;padding:12px 8px 14px;border:1px solid #ffffffb8;border-radius:18px;background:#ffffff75;color:var(--process-accent);isolation:isolate}
  .process-step:nth-child(2){--process-accent:#655786;--process-tint:#ddd1f0;--process-delay:1.2s}
  .process-step:nth-child(3){--process-accent:#8d5577;--process-tint:#f0d0e5;--process-delay:2.4s}
  .process-step:nth-child(4){--process-accent:#416b83;--process-tint:#c9e4f1;--process-delay:3.6s}
  .process-step::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 50% 30%,var(--process-tint),transparent 80%);opacity:0;z-index:-1;animation:process-highlight 1.2s cubic-bezier(.45,0,.55,1) var(--process-delay) both}
  .process-step:not(:last-child)::after{content:"";position:absolute;right:-15px;top:52px;width:7px;height:7px;border-top:1.5px solid #92999d;border-right:1.5px solid #92999d;transform:rotate(45deg)}
  .process-art{width:120px;max-width:100%;height:88px;display:grid;place-items:center;animation:process-rise 1.2s cubic-bezier(.23,1,.32,1) var(--process-delay) both}
  .process-art svg{display:block;width:100%;height:100%;overflow:visible}
  .process-caption{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;margin-top:8px;color:var(--ink,#293c38);font-size:14px;line-height:1.4;font-weight:600;text-align:center;overflow-wrap:anywhere}
  .process-number{display:grid;place-items:center;flex:none;width:24px;height:24px;border:1px solid #ffffffcc;border-radius:8px;background:var(--process-tint);color:var(--process-accent);font-size:12px;font-variant-numeric:tabular-nums}
  .process-draw path,.process-draw:is(path){stroke-dasharray:1;stroke-dashoffset:0;animation:process-ink .95s cubic-bezier(.23,1,.32,1) calc(var(--process-delay) + .12s) both}
  .process-pencil{animation:process-pencil 1.2s cubic-bezier(.45,0,.55,1) both}
  .process-paper{animation:process-paper 1.2s cubic-bezier(.23,1,.32,1) var(--process-delay) both}
  .process-scan-line{stroke:#bd75a4;stroke-width:3;opacity:0;animation:process-scan 1.2s cubic-bezier(.45,0,.55,1) var(--process-delay) both}
  .process-bar{stroke-width:7;transform-box:fill-box;transform-origin:center bottom;animation:process-bar .95s cubic-bezier(.23,1,.32,1) calc(var(--process-delay) + .12s) both}
  .process-check{stroke:#315f57;stroke-width:3}
  @keyframes process-highlight{0%,100%{opacity:0}25%,75%{opacity:1}}
  @keyframes process-rise{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px)}}
  @keyframes process-ink{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes process-pencil{0%{transform:translate(3px,-4px);opacity:0}25%,75%{opacity:1}100%{transform:translate(0,0);opacity:1}}
  @keyframes process-paper{from{transform:translateY(-8px);opacity:.35}to{transform:translateY(0);opacity:1}}
  @keyframes process-scan{0%{transform:translateY(-20px);opacity:0}18%{opacity:1}80%{opacity:1}100%{transform:translateY(22px);opacity:0}}
  @keyframes process-bar{from{transform:scaleY(.15);opacity:.4}to{transform:scaleY(1);opacity:1}}
  @media(max-width:700px){.process-visual{padding:16px}.process-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.process-step:nth-child(2)::after{display:none}.process-step:nth-child(3)::after{right:-12px}.process-caption{font-size:13px}}
  @media(max-width:360px){.process-steps{gap:10px}.process-step{padding:10px 5px 12px}.process-caption{flex-direction:column;gap:5px}.process-art{width:100px;height:74px}.process-step:not(:last-child)::after{top:46px;right:-9px;width:5px;height:5px}}
  @media(prefers-reduced-motion:reduce){.process-visual *,.process-visual *::before{animation:none!important}.process-step::before,.process-scan-line{opacity:0}.process-draw path,.process-draw:is(path){stroke-dashoffset:0}.process-art,.process-paper,.process-pencil,.process-bar{transform:none;opacity:1}}
}
@media print{.process-visual{display:none}}