/* Flow */

.flow-section {
  background:
    repeating-linear-gradient(45deg, rgba(var(--color-accent-rgb), 0.024) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(252, 248, 242, 0.92)),
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.78), transparent 24%);
}

.flow-section__header::before {
  content: "FLOW";
  left: -0.42em;
  top: -0.3em;
  color: rgba(244, 234, 214, 0.68);
  font-size: clamp(5.2rem, 12vw, 8.4rem);
}

.flow-section__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.flow-section__card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  padding: 26px 18px 22px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(230, 224, 216, 0.88);
  box-shadow: 0 16px 34px rgba(17, 17, 17, 0.04);
  text-align: center;
}

.flow-section__icon {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(230, 224, 216, 0.88);
  color: var(--color-gold-dark);
}

.flow-section__icon svg {
  width: 32px;
  height: 32px;
}

.flow-section__step {
  margin: 0;
  color: rgba(var(--color-accent-rgb), 0.82);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.flow-section__card h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.flow-section__card p:last-child {
  margin: 0;
  color: rgba(55, 43, 29, 0.76);
  font-size: 0.88rem;
  line-height: 1.8;
}

.flow-section__footer {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

.flow-list {
  display: grid;
  gap: 16px;
}

.flow-list__item strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
}