/* ===== HERO FLOW (homepage only) ===== */

.heroFlowCard{
  display:flex;
  justify-content:center;
  margin:24px auto 18px;
  
}

.heroFlow{
  width:100%;
  max-width:460px;
   padding:0 12px;
  text-align:center;
  padding:18px 20px 16px;

  border:1px solid rgba(16,32,24,.12);
  border-radius:20px;

  background:rgba(255,255,255,.55);

  box-shadow:
    0 8px 24px rgba(16,32,24,.06),
    0 1px 0 rgba(255,255,255,.6) inset;
}

.flowTop{
  font-size:16px;
  font-weight:700;
  color:var(--muted);
  line-height:1.4;
  letter-spacing:.2px;
}

.flowPlusDivider{
  width:34px;
  height:34px;

  margin:8px auto;

  display:flex;                 /* 👈 key */
  align-items:center;           /* 👈 vertical center */
  justify-content:center;       /* 👈 horizontal center */

  font-size:16px;               /* 👈 slightly bigger */
  font-weight:700;

  color:var(--btn);

  background:rgba(16,32,24,.05);
  border-radius:50%;
}

.flowBottom{
  font-size:18px;
  font-weight:900;
  color:var(--btn);
  line-height:1.2;
}

.flowSub{
  margin-top:8px;
  font-size:15px;
  line-height:1.35;
  color:var(--muted);
}

.flowSubIntro{
  margin-bottom:8px;
  font-size:15px;
  line-height:1.35;
  color:var(--muted);
}

.flowRow{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}

.flowItem{
  font-size:14px;
  font-weight:600;
  color:var(--muted);
}

.flowItemStrong{
  font-size:16px;
  font-weight:800;
  color:var(--btn);
}

.flowPlus{
  font-size:14px;
  color:var(--muted);
  opacity:.6;
}

.heroPrimaryCta{
  display:flex;
  justify-content:center;
  margin-top:22px;
}

@media (max-width:640px){
  .heroFlowCard{
    margin:20px auto 16px;
  }

  .heroFlow{
    max-width:100%;
    padding:16px 14px 14px;
    border-radius:18px;
  }

  .flowTop{
    font-size:15px;
  }

  .flowDivider{
    height:22px;
    margin:10px auto;
  }

  .flowBottom{
    font-size:17px;
  }

  .flowSub{
    font-size:14px;
    margin-top:6px;
  }

  .heroPrimaryCta{
  margin-top:10px;   /* was ~22px */
  margin-bottom:8px; /* tighten the drop into next section */
}
}