/* How It Works (how-it-works.html). Reuses about.css layout; only adds the step numbers.
   Scoped to .how so About and Home are untouched. */
.how-steps{list-style:none;margin:0;padding:0}
.how .ab-side{position:sticky;top:40px;align-self:start}
.how .ab-side h2{position:static}
.how .ab-side h2::before{display:none}
.how .how-num{margin:0 0 clamp(14px,1.4vw,20px);font:800 clamp(18px,1.4vw,22px)/1 var(--display);letter-spacing:-.01em;color:var(--pink);font-variant-numeric:tabular-nums}
@media (min-width:761px) and (orientation:portrait){.how .ab-side{position:static}}
@media (max-width:760px){.how .ab-side{position:static}.how .how-num{margin-bottom:12px;font-size:18px}}

/* founder, Oct 26: on desktop (1024px+) both big headings sit on one line */
@media (min-width:1024px){
  .how .ab-hero h1{white-space:nowrap;text-wrap:nowrap}
  .how .ab-hero h1 span{display:inline}
  .how .ab-final{max-width:none;white-space:nowrap;font-size:clamp(40px,5vw,88px)}
  .how .ab-final span{display:inline}
  .how .ab-final span + span{margin-top:0}
}