/* ============================================================
   Homepage "How I work" section
   Additive. Load AFTER style.css. All classes prefixed pr-.
   ============================================================ */
.pr { border-bottom: 1px solid var(--rule); }
.pr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 2px solid var(--ink);
}
.pr-step {
  padding: 28px 28px 8px 0;
  display: flex;
  flex-direction: column;
}
.pr-step + .pr-step { padding-left: 28px; border-left: 1px solid var(--rule); }
.pr-n {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--blue);
}
.pr-step h3 {
  font-family: var(--disp);
  font-weight: 700;
  font-stretch: 105%;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 10px 0 12px;
}
.pr-step p { color: #3a3a46; margin: 0 0 18px; }
.pr-link {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--blue);
  text-decoration: none;
}
.pr-link:hover, .pr-link:focus-visible { color: var(--blue-deep); text-decoration: underline; }
@media (max-width: 900px) {
  .pr-grid { grid-template-columns: 1fr; }
  .pr-step { padding: 26px 0 18px; }
  .pr-step + .pr-step { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
}