.process-flow{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;max-width:850px;margin:28px auto 0;overflow:hidden}
.process-graph{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative}
.process-graph::before{content:'';position:absolute;height:2px;background:var(--line);top:25px;left:16%;right:16%;pointer-events:none}
.process-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;border:0;background:transparent;color:var(--muted);padding:0 6px 12px;font:600 1rem/1.3 Arial,sans-serif;min-width:0;cursor:pointer;text-align:center}
.process-number{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--paper);font-size:1rem;transition:background .35s,color .35s,box-shadow .35s}
.process-node[aria-selected="true"]{color:var(--brand)}
.process-node[aria-selected="true"] .process-number{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 5px var(--accent-soft)}
.process-stage{margin-top:18px;border-radius:18px;background:var(--accent-soft);padding:28px;min-height:190px}
.process-panel:not([hidden]){animation:process-enter .4s ease both}
.process-panel .eyebrow{color:var(--accent);margin:0 0 12px;font-size:.875rem;letter-spacing:.06em}
.process-panel h3{font-size:clamp(24px,3vw,32px);margin:0 0 12px;font-weight:600;line-height:1.2}
.process-panel p:not(.eyebrow){font-size:1rem;line-height:1.6;margin:0;max-width:58ch;color:var(--muted)}
.process-timeline{height:4px;background:var(--line);margin:20px 0 12px;border-radius:99px;overflow:hidden}
.process-timeline span{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.process-flow.is-playing .process-timeline span{animation:process-time 5s linear forwards}
.process-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.875rem;color:var(--muted)}
.process-controls>div{display:flex;gap:8px;flex-wrap:wrap}
.process-controls button{background:var(--paper);border:1px solid var(--line);border-radius:99px;color:var(--brand);min-height:44px;padding:10px 16px;font:600 .875rem/1.3 Arial,sans-serif;cursor:pointer}
.process-flow [hidden]{display:none!important}
.calculation-notes{border-top:1px solid var(--line);padding:28px 0 24px;color:var(--muted);max-width:900px}
.calculation-notes h2{font-size:1.125rem;line-height:1.3;margin:0 0 12px;letter-spacing:0}
.calculation-notes p{font-size:.875rem;line-height:1.65;margin:0 0 12px}
@keyframes process-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes process-time{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:650px){.process-flow{padding:18px;margin-top:22px;border-radius:20px}.process-graph{gap:8px}.process-node{font-size:.875rem;padding:0 0 10px}.process-number{width:44px;height:44px}.process-graph::before{top:21px}.process-stage{padding:20px;min-height:200px}.process-controls>div{gap:6px}.process-controls button{padding:10px 12px}.calculation-notes{padding-top:24px}}
@media(prefers-reduced-motion:reduce){.process-panel:not([hidden]),.process-flow.is-playing .process-timeline span{animation:none}.process-number{transition:none}}