/* =============================================================================
   PROCESS (How we work)  |  One-card-at-a-time steps.
   HTML: index.html -> <!-- SECTION: PROCESS -->     JS: js/process.js
   Edit only this file when you want to change how process looks.
   ============================================================================= */

.proc{margin-block:clamp(3rem,7vw,5rem)}
.pgrid{width:100%;display:grid;gap:1.4rem;align-items:center}
@media(min-width:900px){
  .pgrid{grid-template-columns:.9fr 1.1fr;gap:3rem}
}
.pl h2{font-size:clamp(1.7rem,4.4vw,3rem);margin-bottom:.9rem}
.pp{color:var(--muted);max-width:40ch;margin:0 0 1.4rem}
.chips{display:flex;gap:.5rem}
.pr{display:flex;gap:.8rem;align-items:center}
.stage{position:relative;flex:1;height:300px;overflow-x:clip}
.pc{position:absolute;inset:0;padding:clamp(1.3rem,3vw,2.2rem);display:flex;flex-direction:column;justify-content:center;gap:.5rem;opacity:0;transform:translateY(60px);pointer-events:none;transition:opacity .55s,transform .65s var(--ease)}
.pc.cur{opacity:1;transform:none;pointer-events:auto}
.pc.past{transform:translateY(-60px)}
.dot{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:linear-gradient(180deg,#fff,#eee);border:1px solid #fff;box-shadow:var(--g-shadow);transition:background .5s,color .5s}
.pc.cur .dot{background:linear-gradient(180deg,#2a2a2a,#0a0a0a);color:var(--green)}
.tagl{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-d);font-weight:600}
.pc h3{font-size:clamp(1.4rem,3.4vw,2.2rem)}
.pc p{margin:0;color:var(--muted);font-size:clamp(.9rem,1.6vw,1.02rem);max-width:44ch}
.pnav{display:flex;flex-direction:column;gap:.6rem}
@media(max-width:600px){
  .pl h2{margin-bottom:.7rem}
  .stage{height:320px}
}
[data-theme=dark] .dot{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border-color:rgba(255,255,255,.18)}
[data-theme=dark] .pc.cur .dot{background:linear-gradient(180deg,#fafaf6,#e4e4de);color:#0a0a0a}
@media(max-width:700px){
  .pr{flex-direction:column;align-items:stretch}
  .stage{flex:none;width:100%}
  .pnav{flex-direction:row;justify-content:center;gap:.8rem}
  .pnav .rb{font-size:0}
  .pnav .rb::before{font-size:1.15rem}
  #pu::before{content:"→"}
  #pd::before{content:"←"}
  #pd{order:-1}
  .pc{transform:translateX(50px)}
  .pc.past{transform:translateX(-50px)}
}