/* Flow / Flow Phone: shared chrome is provided by the root style.css. */
.flow-content {
  width:calc(100% - 80px);
  max-width:1200px;
  margin-inline:auto;
  padding-block:80px 60px;
}
.flow-list {display:grid;list-style:none;margin:0;padding:0}
.flow-list>li {min-width:0}
.flow-step {
  display:grid;
  grid-template-columns:40px 40px minmax(0,1fr);
  align-items:center;
}
.flow-card {
  grid-column:2 / -1;
  grid-row:1;
  display:grid;
  align-content:center;
  gap:12px;
  min-width:0;
  min-height:152px;
  padding:32px 32px 32px 80px;
  background:#f4f4f4;
  overflow-wrap:anywhere;
}
.flow-card h2 {font:700 24px/34px Inter,sans-serif;color:#333}
.flow-card p {font-size:16px;line-height:28px;color:#555}
.flow-badge {
  grid-column:1 / 3;
  grid-row:1;
  z-index:1;
  display:grid;
  align-content:center;
  gap:2px;
  width:80px;
  height:80px;
  border-radius:50%;
  background:#2f2f2f;
  color:#fff;
  text-align:center;
  font:700 11px/16px Inter,sans-serif;
}
.flow-number {font-size:26px;line-height:32px}
.flow-connector {display:grid;justify-items:center;padding-block:16px}
.flow-connector::before {
  content:"\f107";
  display:block;
  width:24px;
  height:24px;
  font-family:"Font Awesome 5 Free";
  font-size:24px;
  font-weight:900;
  font-style:normal;
  font-variant:normal;
  line-height:24px;
  text-align:center;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:#555;
}
@media(max-width:1099px) {
  .flow-page .menu-overlay {top:56px}
}
@media(max-width:767px) {
  .flow-content {width:calc(100% - 16px)}
  .flow-step {grid-template-columns:28px 28px minmax(0,1fr)}
  .flow-card {min-height:160px;padding:24px 20px 24px 48px}
  .flow-card h2 {font-size:20px;line-height:28px}
  .flow-badge {width:56px;height:56px;font-size:9px;line-height:12px}
  .flow-number {font-size:20px;line-height:26px}
}