.process-symbol-defs { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.process-section-empty { display:none; }
.process-item-content p { white-space:pre-line; overflow-wrap:anywhere; }
.process-item-content h3,.process-stage > span { overflow-wrap:anywhere; }
.process-visual { padding:82px 24px 30px; gap:18px; }
.process-visual-heading { text-align:center; }
.process-visual-kicker { display:block; color:var(--color-orange-dark); font-size:9px; letter-spacing:2px; margin-bottom:10px; }
.process-visual-heading .process-visual-title { position:static; font-size:20px; letter-spacing:3px; color:var(--body-text); }
.process-svg-wrapper { width:min(100%,580px); flex-shrink:0; }
.process-main-symbol { fill:none; stroke:var(--color-orange); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.process-stage-nav { width:100%; max-width:560px; display:grid; grid-template-columns:repeat(var(--process-count,4),minmax(0,1fr)); gap:12px; }
.process-stage { position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; min-width:0; padding:8px 4px; background:transparent; border:0; color:var(--text-muted); font:inherit; cursor:pointer; }
.process-stage > span { position:relative; z-index:1; font-size:11px; letter-spacing:1px; }
.process-stage::after { content:""; position:absolute; height:1px; background:var(--surface-border); width:calc(100% + 12px); left:50%; top:64px; }
.process-stage:last-child::after { display:none; }
.process-stage:nth-child(4n)::after { display:none; }
.process-stage svg { position:relative; z-index:1; width:64px; height:64px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s ease,color .3s ease; }
.process-stage-frame { fill:var(--surface-bg); stroke:var(--surface-border); }
.process-stage-marker { fill:var(--surface-border); stroke:var(--surface-bg); stroke-width:2; }
.process-stage.active,.process-stage:hover { color:var(--color-orange-dark); }
.process-stage.active .process-stage-frame { stroke:var(--color-orange); fill:var(--surface-raised); }
.process-stage.active .process-stage-marker { fill:var(--color-orange); }
.process-stage.active svg { transform:translateY(-3px); }
.process-stage:focus-visible,.process-item:focus-visible { outline:2px solid var(--color-orange); outline-offset:-3px; }
.process-svg.active .process-main-symbol { animation:process-symbol-reveal .55s ease both; }
@keyframes process-symbol-reveal { from { opacity:0; } to { opacity:1; } }
@media(max-width:600px) {
 .process-visual { padding:72px 15px 25px; gap:14px; }
 .process-stage-nav { gap:4px; }
 .process-stage { padding:8px 0; gap:10px; }
 .process-stage > span { font-size:10px; letter-spacing:.3px; }
 .process-stage svg { width:52px; height:52px; }
 .process-stage::after { top:56px; width:calc(100% + 4px); }
 .process-visual-heading .process-visual-title { font-size:17px; }
}
@media(prefers-reduced-motion:reduce) { .process-stage svg,.process-svg { transition:none; } .process-svg.active .process-main-symbol { animation:none; } }
