/* ==========================================================================
   How it works — 4-step process
   ========================================================================== */
.how{background:var(--ink); color:var(--paper);}
.how .eyebrow{color:var(--route-light);}
.how .eyebrow::before{background:var(--route-light);}
.how .section-head h2{color:var(--paper);}
.how .section-head p{color:#B6C1CC;}

.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:rgba(255,255,255,0.1);
}
@media(max-width:880px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.steps{grid-template-columns:1fr;}}

.step{
  background:var(--ink); padding:32px 26px 36px;
  position:relative;
}
.step .step-num{
  font-family:var(--mono); font-size:13px; color:var(--route-light);
  letter-spacing:0.06em;
}
.step h4{
  color:var(--paper); font-size:21px; text-transform:uppercase;
  margin:14px 0 10px;
}
.step p{color:#AEBAC5; font-size:14.5px;}
.step::after{
  content:"→";
  position:absolute; right:-11px; top:32px;
  color:var(--route-light); font-size:18px;
  display:none;
}
@media(min-width:521px){
  .step:not(:nth-child(4n))::after{display:block;}
}
@media(min-width:521px) and (max-width:880px){
  .step:nth-child(2n)::after{display:none;}
}