/* Keep the approved process layout; add only a native scroll runway. */
.process-scroll-track { position: relative; }
.process-scroll-stage { position: sticky; top: var(--process-pin-top, 74px); }
.process-scroll-stage .process-panel { min-height: 280px; }
.process-scroll-stage .process-tabs { position: relative; }
.process-scroll-stage .process-tabs::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px;
  background: var(--red, #ec123b); transform-origin: left;
  transform: scaleX(var(--process-progress, 0)); pointer-events: none;
}
@media (max-width: 600px) {
  .process-scroll-stage .process-panel { min-height: 280px; }
  /* All seven labels stay visible instead of sliding out of the viewport. */
  #process .process-tabs {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding-bottom: 14px;
  }
  #process .process-tabs button {
    grid-column: span 3;
    min-width: 0;
    min-height: 64px;
    padding: 10px 9px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
    font-size: 11px;
    line-height: 1.4;
    transition: border-color .2s, background-color .2s, color .2s;
  }
  #process .process-tabs button:nth-child(n+5) { grid-column: span 4; }
  #process .process-tabs button span { margin-bottom: 9px; font-size: 9px; }
  #process .process-tabs .process-icon { top: 9px; right: 8px; width: 14px; height: 14px; }
  #process .process-tabs button::after { display: none; }
  #process .process-tabs button[aria-selected=true] {
    border-color: var(--red);
    background: linear-gradient(135deg, #ec123b18, var(--panel));
  }
  #process .process-tabs button:focus-visible { outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .process-scroll-track { height: auto !important; }
  .process-scroll-stage { position: relative; top: auto; }
}