/* ============================================================================
   p-how-it-works - "How It Works" page (MD §7). Six-phase sequence, full depth.
   REGENERATED (cycle 6) onto components.css: the hero wrap/title/deck/cta, the
   section heads, the prose blocks, the link row and the whole closing CTA are
   components now (c-hero/c-hero__*, c-center + c-head__title, c-prose,
   c-center-row, c-cta/c-cta__*, c-btn-row). What remains below is deltas plus
   the page's signature structures:
     - the breathing ring glyph behind the hero (.phw-hero__q)
     - the scroll-progress phase rail (.phw-rail/.phw-step*, JS-bound)
     - the rail's closing boundary line + outbound link row (.phw-foot*)
   CYCLE 10: .phw-frame__kicker/__line and .phw-boundary__line deleted with
   their sections (ledger: merge-into hero / kill).
   Everything scoped under .p-how-it-works.
   ========================================================================== */

/* ---- hero band: signature ring glyph + its own vertical rhythm ---- */
.p-how-it-works .phw-hero{
  position:relative; overflow:hidden; background:var(--ink-0);
  padding-top:clamp(120px,16vw,168px);
  padding-bottom:clamp(48px,6vw,72px);
}
.p-how-it-works .phw-hero__q{
  position:absolute; top:50%; right:clamp(-140px,-6vw,-60px); width:clamp(320px,42vw,560px); height:auto;
  color:var(--royal); opacity:.5; transform:translateY(-50%);
  animation:phw-breathe 9s var(--ease-flow) infinite;
  pointer-events:none;
}
@keyframes phw-breathe{
  0%,100%{ transform:translateY(-50%) scale(1); opacity:.42 }
  50%{ transform:translateY(-50%) scale(1.04); opacity:.56 }
}
/* delta: the component hero wrap must stack above the absolute glyph */
.p-how-it-works .phw-hero .c-hero{ position:relative; z-index:1; }

/* ---- the six-phase scroll-progress rail (signature motion moment;
       driven by assets/js/pages/how-it-works.js) ---- */
.p-how-it-works .phw-rail{
  margin-top:clamp(40px,5vw,64px);
  position:relative;
  padding-left:clamp(52px,6vw,72px);
  text-align:left;
}
.p-how-it-works .phw-rail::before{
  content:""; position:absolute; left:15px; top:6px; bottom:6px; width:2px;
  background:var(--ink-40); border-radius:var(--r-btn);
}
.p-how-it-works .phw-rail::after{
  content:""; position:absolute; left:15px; top:6px; width:2px; height:var(--phw-progress,0%);
  background:var(--lime); border-radius:var(--r-btn);
  transition:height .12s linear;
}
.p-how-it-works .phw-step{ position:relative; padding-bottom:clamp(36px,4.4vw,56px); }
.p-how-it-works .phw-step:last-child{ padding-bottom:0; }
.p-how-it-works .phw-step__marker{
  position:absolute; left:calc(-1 * clamp(52px,6vw,72px)); top:2px; width:32px; height:32px;
  border-radius:var(--r-btn); border:2px solid var(--ink-40); background:var(--ink-0);
  display:flex; align-items:center; justify-content:center;
  transition:border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.p-how-it-works .phw-step.is-active .phw-step__marker{ border-color:var(--lime); background:var(--lime); }
.p-how-it-works .phw-step__num{
  font-family:var(--f-mono); font-size:var(--t-label); font-weight:600; color:var(--ink-60);
  transition:color var(--dur-base) var(--ease-standard);
}
.p-how-it-works .phw-step.is-active .phw-step__num{ color:var(--lime-ink); }

.p-how-it-works .phw-step__tag{
  color:var(--lime); font-size:var(--t-eyebrow); letter-spacing:var(--track-eyebrow); text-transform:uppercase;
}
.p-how-it-works .phw-step__title{ margin-top:6px; font-size:var(--t-h3); max-width:22ch; }
.p-how-it-works .phw-step__desc{ margin-top:var(--s-3); max-width:66ch; color:var(--paper); font-size:var(--t-body); line-height:1.6; }
.p-how-it-works .phw-step__points{
  margin-top:var(--s-4); display:grid; gap:var(--s-2) 28px; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:70ch;
}
.p-how-it-works .phw-step__points li{
  position:relative; padding-left:18px; font-size:var(--t-small); line-height:1.5; color:var(--paper);
}
.p-how-it-works .phw-step__points li::before{
  content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:var(--r-btn); background:var(--lime);
}

/* ---- the rail's foot: boundary line + the two outbound links ---- */
.p-how-it-works .phw-foot{
  margin-top:clamp(40px,5vw,64px); padding-top:clamp(28px,3.4vw,40px);
  border-top:1.5px solid var(--ink-40); text-align:center;
}
/* centring comes from .c-center-row; this adds only the row's own rhythm/colour.
   the two links sit on one baseline with a visible separator between them. */
.p-how-it-works .phw-foot__links{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:baseline; gap:14px var(--s-4); }
.p-how-it-works .phw-foot__links .arrow-link{ color:var(--lime); }
.p-how-it-works .phw-foot__sep{ color:var(--ink-60); font-family:var(--f-mono); font-size:var(--t-small); }

/* ---- closing cta: the two buttons share a width so neither reads secondary-by-size ---- */
.p-how-it-works .phw-cta__btns .btn{ min-width:clamp(240px,26vw,320px); justify-content:center; }

/* ---- responsive ---- */
@media (max-width:767px){
  .p-how-it-works .phw-rail{ padding-left:44px; }
  .p-how-it-works .phw-rail::before,
  .p-how-it-works .phw-rail::after{ left:9px; }
  .p-how-it-works .phw-step__marker{ left:-44px; width:26px; height:26px; }
  .p-how-it-works .phw-step__points{ grid-template-columns:1fr; }
  .p-how-it-works .phw-hero__q{ right:-40vw; opacity:.32; }
  /* stacked: the separator has no baseline to share, and the buttons match by width */
  .p-how-it-works .phw-foot__links{ flex-direction:column; align-items:center; gap:14px; }
  .p-how-it-works .phw-foot__sep{ display:none; }
  .p-how-it-works .phw-cta__btns .btn{ min-width:0; width:100%; white-space:normal; }
}

/* motion stays on under reduced-motion (site rule); only large positional
   moves are already flattened by the shared token contract in tokens.css. */