/* Two card states with an electric-green marker; readable before enhancement. */
.process-section { padding-block:40px 160px; }
.process-section h2 { margin:0 0 48px; line-height:1.2; letter-spacing:-.01em; }
.process-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.process-step { position:relative; min-width:0; overflow:clip; border:0; border-radius:20px; color:var(--ink); background:var(--neutral); }
.process-step.is-current { color:var(--neutral); background:var(--ink); }
.process-header { position:relative; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:20px 16px; width:100%; margin:0; padding:30px; border:0; border-radius:inherit; background:transparent; color:inherit; font:inherit; text-align:left; }
button.process-header { appearance:none; cursor:pointer; }
button.process-header:focus-visible { outline:3px solid var(--purple); outline-offset:-6px; }
.process-step.is-current button.process-header:focus-visible { outline-color:var(--lime); }
.has-process-controls .process-step { cursor:pointer; }
.has-process-controls .process-copy { cursor:inherit; }
.process-number { font-size:64px; font-weight:500; line-height:1.1; letter-spacing:-.02em; }
.process-label { order:3; flex-basis:100%; font-size:20px; font-weight:500; line-height:1.25; letter-spacing:-.01em; }
.process-toggle { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border-radius:50%; color:var(--lime); background:var(--ink); font-size:28px; font-weight:500; line-height:1; transition:transform var(--motion-hover) var(--motion-ease); }
.process-step.is-current .process-toggle { transform:rotate(45deg); }
.process-copy { padding:0 30px 40px; }
.process-copy h3 { margin:0 0 20px; font-size:40px; font-weight:600; line-height:1.15; letter-spacing:-.01em; }
.process-copy p { max-width:43ch; margin:0; color:inherit; font-size:18px; font-weight:450; line-height:1.5; letter-spacing:-.01em; }
.has-process-scroll .process-stage { position:sticky; top:var(--process-top); }
.has-process-scroll .process-grid { grid-template-columns:3.5fr 1fr 1fr; transition:grid-template-columns 650ms var(--motion-ease); }
.has-process-scroll .process-grid[data-current="1"] { grid-template-columns:1fr 3.5fr 1fr; }
.has-process-scroll .process-grid[data-current="2"] { grid-template-columns:1fr 1fr 3.5fr; }
.has-process-scroll .process-step { min-height:var(--process-card-height,436px); transition:background-color var(--motion-hover) var(--motion-ease),color var(--motion-hover) var(--motion-ease); }
.has-process-scroll .process-header { position:static; height:108px; flex-wrap:nowrap; }
.has-process-scroll .process-label { position:absolute; inset:auto 30px 28px; transition:opacity 180ms var(--motion-ease); }
.has-process-scroll .is-current .process-label { opacity:0; }
.has-process-scroll .process-copy { width:var(--process-copy-width); padding:20px 30px 40px; opacity:0; transition:opacity 180ms var(--motion-ease); }
.has-process-scroll .is-current .process-copy { opacity:1; transition-delay:220ms; transition-duration:var(--motion-hover); }
@media (max-width:1100px) {
  .process-header { padding:24px; }
  .process-copy { padding-inline:24px; }
  .has-process-scroll .process-label { right:24px; left:24px; font-size:18px; }
}
@media (max-width:760px) {
  .process-section { padding-block:24px 88px; }
  .process-section h2 { margin-bottom:36px; }
  .process-grid { grid-template-columns:1fr; gap:16px; }
  .process-header { align-items:center; flex-wrap:nowrap; gap:16px; padding:24px; }
  .process-number { font-size:36px; }
  .process-label { position:static; order:0; flex:1; font-size:18px; }
  .process-copy { width:auto; padding:8px 24px 32px; }
  .process-copy h3 { font-size:30px; }
  .process-copy p { max-width:49ch; }
}
@media (prefers-reduced-motion:reduce) { .process-toggle { transition:none; } }