body.page-process {
  background-color: var(--bg);
  background-image: linear-gradient(color-mix(in srgb, var(--page-accent) 3.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 3.5%, transparent) 1px, transparent 1px);
  background-size: 30px 30px;
}
.page-process .kicker { color: var(--page-accent); }
.process-note { max-width: 700px; margin-bottom: 44px; padding: 18px 20px; border-left: 3px solid var(--page-accent); background: color-mix(in srgb, var(--page-accent) 4%, transparent); color: var(--muted); }
.process-path { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 12px; }
.process-step { position: relative; padding: 24px 18px; min-height: 170px; border: 1px solid var(--line); background: rgba(10,12,26,.78); }
.process-step:nth-child(odd){border-radius:20px 5px}.process-step:nth-child(even){border-radius:5px 20px}
.process-step .num { color: var(--page-accent); font: 800 .7rem ui-monospace, monospace; }
.process-step h2 { margin: 44px 0 8px; font-size: 1.25rem; }
.process-step p { margin:0; color:var(--muted); font-size:.85rem; }
.process-examples { margin-top: 72px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; }
.process-examples figure { margin: 0; border: 1px solid var(--line); background:#0b0e1c; overflow:hidden; }
.process-examples figure:first-child{border-radius:24px 7px}.process-examples figure:last-child{border-radius:7px 24px}
.process-examples img { width: 100%; height: auto; }
.process-examples figcaption { padding: 12px 14px; color: var(--muted); font-size: .78rem; }
.future-process { margin-top: 48px; padding: 28px; border: 1px dashed color-mix(in srgb, var(--page-accent) 30%, transparent); border-radius: 18px; color: var(--muted); }
@media(max-width:900px){.process-path{grid-template-columns:1fr 1fr}.process-examples{grid-template-columns:1fr}}
@media(max-width:560px){.process-path{grid-template-columns:1fr}}