/* These rules enhance the existing tabs; the original layout is the fallback. */
.process-scroll-track { position:relative; }
.process-paper-stack { position:relative; min-width:0; }
.process-paper-stack > .process-paper-copy,
.process-scroll-note { display:none; }

.process-motion-active .process-scroll-track { height:var(--process-track-height,230vh); }
.process-motion-active .process-layout {
  position:sticky;
  top:var(--process-pin-top,120px);
  align-items:center;
  padding-block:22px 42px;
}
.process-motion-active .stage-list { position:relative; z-index:5; }
.process-motion-active .stage {
  position:relative;
  transition:padding .25s ease,color .25s ease;
}
.process-motion-active .stage::after {
  content:'';
  position:absolute;
  left:0; bottom:-1px;
  width:100%; height:2px;
  background:var(--red);
  transform:scaleX(var(--stage-progress,0));
  transform-origin:left;
}
.process-motion-active .process-paper-stack { isolation:isolate; }
.process-motion-active .process-paper-stack::before,
.process-motion-active .process-paper-stack::after {
  content:'';
  position:absolute;
  inset:0;
  border:1px solid #a1b6b780;
  background:#f3eee2;
  box-shadow:3px 4px 0 #a2bec020;
  pointer-events:none;
  z-index:-1;
}
.process-motion-active .process-paper-stack::before { transform:translate(12px,13px) rotate(2.6deg); }
.process-motion-active .process-paper-stack::after { transform:translate(-6px,7px) rotate(-1.4deg); }
.process-motion-active .process-paper-stack > .stage-panel {
  position:absolute;
  inset:0;
  width:100%; height:100%;
  min-height:0;
  margin:0;
  transform-origin:38% 82%;
  will-change:transform;
  box-shadow:5px 8px 0 #a2bec022,0 16px 25px #273c4509;
  transition:none;
}
.process-motion-active .process-paper-stack > .process-paper-copy { display:block; pointer-events:none; }
.process-motion-active .process-paper-stack > #stage-panel:focus-visible { outline-offset:7px; }
.process-motion-active .paper-scribble path {
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - var(--paper-ink,1));
}
.process-motion-active .process-scroll-note {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  position:absolute;
  left:0; bottom:0; width:calc(48% - 30px);
  font-size:10px;
  letter-spacing:.035em;
  color:var(--muted);
}
.process-scroll-note > span:first-child { display:flex; align-items:center; gap:10px; }
.process-scroll-note svg { width:12px; height:17px; stroke-width:1.6; }
.process-page-count { font-size:10px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.process-page-count span { color:var(--red); font-weight:600; }
.process-tab-change { animation:process-tab-settle .25s ease-out both; }
@keyframes process-tab-settle {
  from { opacity:.45; translate:0 7px; }
  to { opacity:1; translate:0 0; }
}
@media (min-width:901px) and (max-height:800px) {
  .process-motion-active .process-layout { padding-block:10px 34px; }
  .process-motion-active .stage-panel { padding:25px 28px; }
  .process-motion-active .stage-panel h3 { font-size:32px; margin-bottom:16px; }
  .process-motion-active .panel-top { margin-bottom:20px; }
  .process-motion-active .stage-description { font-size:13px; line-height:1.6; margin-bottom:20px; }
  .process-motion-active .panel-paper p { font-size:12px; }
  .process-motion-active .process-scroll-note { bottom:-36px; }
}
@media (prefers-reduced-motion:reduce) {
  .process-tab-change { animation:none; }
}