/* =========================================================
   Process: vertical timeline, steps alternate sides (Kong-style)
   Uses .vx-head / .vx-pill from problem.css for the headline.
   ========================================================= */
.pr-line { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; position: relative; display: grid; gap: 26px; }
.pr-line::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 40px; width: 3px; margin-left: -1.5px; border-radius: 3px;
  background: linear-gradient(180deg, var(--bronze-hi), var(--bronze) 70%, var(--limestone)); transform-origin: top; }

.pr-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: center; }
.pr-node { grid-column: 2; justify-self: center; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; z-index: 1;
  background: var(--limestone); color: #1a1816; font: 600 22px/1 var(--display); box-shadow: 0 0 0 8px var(--basalt), 0 0 36px rgba(194, 156, 106, .45); }
.pr-card { grid-row: 1; padding: 22px 24px; border-radius: 22px; background: linear-gradient(180deg, #34302c, var(--charcoal));
  border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 16px 36px rgba(0, 0, 0, .26); display: grid; gap: 8px; }
.pr-step:nth-child(odd) .pr-card { grid-column: 1; }
.pr-step:nth-child(even) .pr-card { grid-column: 3; }
.pr-card h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; }
.pr-card p { color: var(--stone); font-size: 16px; line-height: 1.5; }
.pr-you { justify-self: start; margin-top: 4px; font: 500 12px/1 var(--mono); letter-spacing: .06em; padding: 8px 12px; border-radius: 999px;
  color: #8FE3AE; background: rgba(79, 201, 122, .12); border: 1px solid rgba(79, 201, 122, .4); }

.pr-end { display: grid; justify-items: center; padding-top: 10px; }
.pr-end-pill { font: 600 clamp(20px, 2.4vw, 30px)/1.1 var(--display); padding: 16px 28px; border-radius: 18px; background: var(--limestone); color: #1a1816;
  transform: rotate(-1.5deg); box-shadow: 0 0 60px rgba(194, 156, 106, .4), 0 12px 30px rgba(0, 0, 0, .35); position: relative; z-index: 1; }

/* line draws down, steps pop in as it reaches them */
.js .reveal-sec .pr-line::before { transform: scaleY(0); }
.js .reveal-sec.in .pr-line::before { transform: scaleY(1); transition: transform 1.9s cubic-bezier(.45, 0, .2, 1) .2s; }
.js .reveal-sec .pr-step .pr-node, .js .reveal-sec .pr-end { opacity: 0; transform: scale(.6); }
.js .reveal-sec .pr-step:nth-child(odd) .pr-card { opacity: 0; transform: translateX(-26px); }
.js .reveal-sec .pr-step:nth-child(even) .pr-card { opacity: 0; transform: translateX(26px); }
.js .reveal-sec.in .pr-step .pr-node, .js .reveal-sec.in .pr-end, .js .reveal-sec.in .pr-step .pr-card {
  opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .6s cubic-bezier(.2, 1.3, .4, 1); transition-delay: calc(.35s + var(--i) * .3s); }
.js .reveal-sec.in .pr-end { transform: none; }
.js .reveal-sec:not(.pre):not(.in) .pr-line::before { transform: none; }
.js .reveal-sec:not(.pre):not(.in) .pr-step .pr-node, .js .reveal-sec:not(.pre):not(.in) .pr-step .pr-card, .js .reveal-sec:not(.pre):not(.in) .pr-end { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .pr-line::before { left: 26px; }
  .pr-step { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
  .pr-node { grid-column: 1; }
  .pr-step:nth-child(odd) .pr-card, .pr-step:nth-child(even) .pr-card { grid-column: 2; }
  .pr-end { justify-items: start; padding-left: 0; }
  .js .reveal-sec .pr-step:nth-child(odd) .pr-card { transform: translateX(26px); }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal-sec .pr-line::before, .js .reveal-sec .pr-step .pr-node, .js .reveal-sec .pr-step .pr-card, .js .reveal-sec .pr-end { opacity: 1; transform: none; }
}