.rh-por-how-intro {
  font-size: 16px; font-weight: 600; color: #585858; line-height: 1.7;
  max-width: 640px; margin: 0; padding: 0;
}

/* ============================================================
   9. HOW IT WORKS
   ============================================================ */
.rh-por-how { background: #ffffff; width: 100%; }
.rh-por-how-pad { padding: 80px 0; }
.rh-por-tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; margin: 40px 0 0; }
.rh-por-tl::before { content:''; position:absolute; top:20px; left:10%; right:10%; height:2px; background: linear-gradient(to right, #BFD8B3, #DFECD9); z-index: 0; }
.rh-por-tl-item { padding: 0 20px; position: relative; z-index: 1; text-align: center; }
.rh-por-tl-dot {
  width: 40px; height: 40px; border-radius: 50%; background: #262626;
  border: 3px solid #ffffff; box-shadow: 0 0 0 2px #BFD8B3; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: #BFD8B3;
  transition: background 0.3s, transform 0.3s, color 0.3s;
}
.rh-por-tl-item:hover .rh-por-tl-dot { background: #BFD8B3; color: #262626; transform: scale(1.15); }
.rh-por-tl-title { font-size: 14px; font-weight: 600; color: #262626; display: block; margin: 0 0 8px 0; }
.rh-por-tl-text { font-size: 12px; font-weight: 600; color: #808080; line-height: 1.55; display: block; }

/* ── entrance animation ── */
@keyframes rh-fadeup { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.rh-anim { opacity: 0; }
.rh-anim.visible { animation: rh-fadeup 0.55s ease forwards; }
.rh-anim-delay-1.visible { animation-delay: 0.05s; }
.rh-anim-delay-2.visible { animation-delay: 0.15s; }
.rh-anim-delay-3.visible { animation-delay: 0.25s; }
.rh-anim-delay-4.visible { animation-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .rh-anim { opacity: 1; }
  .rh-anim.visible { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .rh-por-tl { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .rh-por-tl::before { display: none; }
}
@media (max-width: 600px) {
  .rh-por-how-pad { padding: 48px 0; }
  .rh-por-tl { grid-template-columns: 1fr; row-gap: 32px; }
}