/* Axis Cross process composition. Geometry uses the existing 720-unit SVG. */
.process-axis-layout{--axis-space:clamp(24px,4vw,64px);--axis-small:12px;--axis-body:14px;--axis-label:clamp(24px,2.5vw,38px);--axis-line:1px;--axis-weight:700;--axis-leading:1.6;--axis-tight:1.1;--axis-duration:240ms;--axis-ease:cubic-bezier(.22,.7,.2,1);--axis-rule:color-mix(in srgb,var(--ink) 26%,transparent);--axis-soft:color-mix(in srgb,var(--ink) 65%,var(--green));--axis-x:var(--paper);--axis-y:var(--ink);--axis-z:color-mix(in srgb,var(--paper) 55%,var(--green));position:relative;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:var(--axis-space);margin-top:var(--axis-space)}
.process-axis-visual{min-width:0;position:relative;isolation:isolate}
.process-axis-stage{cursor:grab;touch-action:pan-y;aspect-ratio:1;position:relative}
.process-axis-stage:active{cursor:grabbing}
.process-axis-stage>svg{width:100%;height:100%;display:block;overflow:visible}
.process-axis-stage:focus-visible{outline:var(--axis-line) dashed currentColor;outline-offset:var(--axis-small)}
.process-axis-stage .axis-sphere{stroke:var(--ink);stroke-width:.7;fill:none;opacity:.16}
.process-axis-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.process-axis-links path{fill:none;stroke:var(--ink);stroke-width:1;opacity:.2;vector-effect:non-scaling-stroke}
.process-axis-links path.is-active{opacity:.65;stroke-width:1.5}
.process-axis-steps{position:relative;display:grid;gap:0}
.process-axis-step{--axis-tone:var(--axis-x);position:relative;border-top:var(--axis-line) solid var(--axis-rule);padding:var(--axis-space) 0;transition:opacity var(--axis-duration) var(--axis-ease)}
.process-axis-step[data-step="1"]{--axis-tone:var(--axis-y)}
.process-axis-step[data-step="2"]{--axis-tone:var(--axis-z)}
.process-axis-step:last-child{border-bottom:var(--axis-line) solid var(--axis-rule)}
.process-axis-step button{display:flex;align-items:center;gap:var(--axis-small);width:100%;padding:0;border:0;text-align:left;font-size:var(--axis-label);font-weight:var(--axis-weight);line-height:var(--axis-tight);letter-spacing:inherit}
.process-axis-step button:focus-visible{outline:var(--axis-line) solid currentColor;outline-offset:var(--axis-small)}
.process-axis-step button:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:3px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--axis-duration) var(--axis-ease)}
.process-axis-step.is-active button:after,.process-axis-step button:hover:after{transform:scaleX(1)}
.process-axis-step p{margin-top:var(--axis-small);font-size:var(--axis-body);line-height:var(--axis-leading);max-width:42ch;color:var(--axis-soft)}
.process-axis-dot{width:18px;height:18px;flex:none;display:block;background:var(--axis-tone);border:var(--axis-line) solid var(--ink);transform:rotate(45deg);transition:transform var(--axis-duration) var(--axis-ease)}
.process-axis-step.is-active .process-axis-dot{transform:rotate(135deg) scale(1.2)}
.process-axis-visual .axis-hint{text-align:center;color:var(--axis-soft)}
.process-axis-visual .axis-controls{justify-content:center}
@media(min-width:901px){.process-axis-layout{margin-top:0}.process-axis-visual{margin-left:-8%;width:108%}}
@media(max-width:900px){.process-axis-layout{grid-template-columns:1fr;gap:0;--axis-space:24px}.process-axis-visual{width:min(100%,520px);justify-self:center}.process-axis-links{display:none}.process-axis-steps{margin-top:var(--axis-space)}.process-axis-step{padding:var(--axis-space) 0}.process-axis-step p{max-width:none}}
@media(prefers-reduced-motion:reduce){.process-axis-step,.process-axis-step button:after,.process-axis-dot{transition:none}}