/* Product / service payment flow diagram.

   Four stages joined by connectors. The row becomes a single column below
   992px and the connector arrows rotate to point down, so the same markup
   reads correctly on a phone without a second copy of the diagram. */

.pf-hero{padding-top:2.5rem}
.pf-hero .pf-eyebrow{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#f70e88;
}
.pf-hero h1{font-weight:700;color:#1f262e}
.pf-hero .lead{color:#6a747b;max-width:44rem;margin-inline:auto}

/* ---- the flow ---------------------------------------------------------- */

.pf-flow{
  display:flex;
  align-items:stretch;
  gap:0;
  margin-top:3rem;
}

.pf-stage{
  flex:1 1 0;
  min-width:0;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:28px 18px 24px;
  background:#fff;
  border:1px solid #eef1f4;
  border-radius:18px;
  box-shadow:0 2px 14px rgba(31,38,46,0.05);
  transition:transform 0.25s ease,box-shadow 0.25s ease,border-color 0.25s ease;
}
.pf-stage:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(31,38,46,0.10);
  border-color:#f9d3e7;
}

.pf-step{
  position:absolute;
  top:14px;
  left:16px;
  font-size:0.72rem;
  font-weight:700;
  color:#c2cad2;
  letter-spacing:0.06em;
}

.pf-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:50%;
  margin-bottom:16px;
  font-size:1.5rem;
  color:#f70e88;
  background:linear-gradient(135deg,#fde5f2 0%,#fdf1f8 100%);
}
.pf-stage:last-child .pf-icon{
  color:#fff;
  background:linear-gradient(135deg,#f70e88 0%,#ff5fae 100%);
}

.pf-stage h2{
  font-size:0.95rem;
  font-weight:700;
  color:#1f262e;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin:0 0 6px;
}
.pf-stage p{font-size:0.83rem;color:#6a747b;margin:0 0 14px}

/* margin-top:auto pins the chips to the foot of each card, so stages of
   unequal text length still line their chips up across the row. */
.pf-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  margin:auto 0 0;
  padding:0;
  list-style:none;
  width:100%;
}
.pf-chips li{
  font-size:0.76rem;
  font-weight:600;
  color:#4a535c;
  background:#f6f8fa;
  border:1px solid #eaeef2;
  border-radius:999px;
  padding:5px 11px;
  white-space:nowrap;
}

/* ---- connectors -------------------------------------------------------- */

.pf-link{
  flex:0 0 122px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 8px;
}
.pf-arrow{
  display:block;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,#f9d3e7 0%,#f70e88 100%);
  position:relative;
}
.pf-arrow::after{
  content:"";
  position:absolute;
  right:-1px;
  top:50%;
  width:9px;
  height:9px;
  border-top:2px solid #f70e88;
  border-right:2px solid #f70e88;
  transform:translateY(-50%) rotate(45deg);
}
.pf-link span:not(.pf-arrow){
  font-size:0.76rem;
  line-height:1.35;
  color:#6a747b;
  text-align:center;
}

/* ---- supporting notes -------------------------------------------------- */

.pf-note{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#f9fafb;
  border:1px solid #eef1f4;
  border-left:3px solid #f70e88;
  border-radius:12px;
  padding:16px 18px;
}
.pf-note i{color:#f70e88;margin-top:2px}
.pf-note p{margin:0;font-size:0.86rem;color:#4a535c}

.pf-facts{display:flex;flex-wrap:wrap;gap:16px;margin-top:2.5rem}
.pf-fact{
  flex:1 1 220px;
  background:#fff;
  border:1px solid #eef1f4;
  border-radius:14px;
  padding:20px;
}
.pf-fact i{color:#f70e88;font-size:1.1rem;margin-bottom:10px;display:block}
.pf-fact h3{font-size:0.9rem;font-weight:700;color:#1f262e;margin:0 0 5px}
.pf-fact p{font-size:0.83rem;color:#6a747b;margin:0}

/* ---- stacked layout ---------------------------------------------------- */

@media (max-width:991.98px){
  .pf-flow{flex-direction:column;align-items:stretch}
  .pf-link{
    flex:0 0 auto;
    flex-direction:row;
    gap:12px;
    padding:14px 0;
  }
  .pf-arrow{
    width:2px;
    height:40px;
    flex:0 0 2px;
    margin-left:34px;
    background:linear-gradient(180deg,#f9d3e7 0%,#f70e88 100%);
  }
  .pf-arrow::after{
    right:auto;
    top:auto;
    bottom:-1px;
    left:50%;
    transform:translateX(-50%) rotate(135deg);
  }
  .pf-link span:not(.pf-arrow){text-align:left;flex:1}
}

@media (min-width:992px) and (max-width:1199.98px){
  .pf-link{flex-basis:92px}
  .pf-stage{padding:24px 12px 20px}
  .pf-chips li{font-size:0.72rem;padding:4px 9px}
}