/* Liquid-glass treatment shared by the three example flows and our working process. */
.example-grid article{display:flex;flex-direction:column;align-items:stretch}
.example-grid .example-tag{align-self:flex-start}
.mini-flow{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr);
  gap:5px;
  align-items:center;
  width:100%;
  margin-top:auto;
  padding:16px 10px;
  border:1px solid rgba(102,155,247,.23);
  border-radius:19px;
  background:radial-gradient(ellipse at 15% 0%,rgba(255,255,255,.97),transparent 64%),radial-gradient(ellipse at 90% 100%,rgba(80,147,255,.19),transparent 66%),linear-gradient(135deg,rgba(235,244,255,.82),rgba(255,255,255,.45));
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(127,174,245,.12),0 12px 27px rgba(37,88,160,.065);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  white-space:normal;
}
.mini-flow::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:15px;
  right:15px;
  top:calc(50% - 7px);
  height:14px;
  border-radius:50%;
  background:linear-gradient(100deg,rgba(7,87,255,.02),rgba(7,87,255,.21) 48%,rgba(87,162,255,.08));
  box-shadow:0 1px 0 rgba(255,255,255,.8);
  transform:rotate(-4deg);
  pointer-events:none;
}
.mini-flow span{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:48px;
  padding:10px 5px;
  border:1px solid rgba(255,255,255,.95);
  border-radius:11px;
  background:linear-gradient(150deg,rgba(255,255,255,.97),rgba(255,255,255,.38) 57%,rgba(173,205,255,.47));
  box-shadow:inset 0 1px 1px #fff,inset 0 -2px 4px rgba(84,137,220,.12),0 5px 12px rgba(34,86,168,.1),0 0 0 1px rgba(104,151,226,.1);
  color:#19396b;
  font-size:11px;
  font-weight:600;
  line-height:1.35;
  text-align:center;
  overflow-wrap:break-word;
}
.mini-flow span:last-child{
  border-color:rgba(180,213,255,.9);
  background:linear-gradient(145deg,rgba(128,183,255,.96),rgba(7,87,255,.94) 53%,rgba(9,62,176,.98));
  box-shadow:inset 0 1px 2px rgba(255,255,255,.78),inset 0 -2px 5px rgba(3,36,107,.17),0 6px 14px rgba(7,87,255,.2);
  color:#fff;
  text-shadow:0 1px 2px rgba(7,50,133,.25);
}
.mini-flow b{position:relative;color:#3875db;font-size:17px;font-weight:500;text-align:center;text-shadow:0 1px 0 #fff}
.steps span{
  width:56px;
  height:56px;
  border:1px solid rgba(255,255,255,.95);
  border-radius:18px;
  background:radial-gradient(ellipse at 25% 0%,#fff,transparent 65%),linear-gradient(145deg,rgba(234,244,255,.9),rgba(166,203,255,.42) 62%,rgba(84,150,255,.25));
  box-shadow:inset 0 1px 1px #fff,inset 0 -3px 6px rgba(64,129,222,.1),0 8px 18px rgba(42,101,192,.12),0 0 0 1px rgba(98,153,238,.2);
  color:#0757e8;
  font-size:14px;
  font-weight:750;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.steps span::after{content:"";position:absolute;top:3px;left:7px;right:7px;height:17px;border:1px solid rgba(255,255,255,.9);border-bottom:0;border-radius:12px 12px 5px 5px;pointer-events:none}
.steps li:not(:last-child)::after{
  top:24px;
  left:68px;
  width:calc(100% - 44px);
  height:8px;
  border:0;
  border-radius:99px;
  background:linear-gradient(90deg,rgba(42,115,246,.23),rgba(139,190,255,.25) 60%,rgba(7,87,255,.1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 5px rgba(71,128,210,.08);
}
@media(min-width:721px) and (max-width:1000px){
  .mini-flow{grid-template-columns:minmax(0,1fr) 11px minmax(0,1fr) 11px minmax(0,1fr);gap:3px;padding:14px 8px}
  .mini-flow span{padding:9px 4px;font-size:10px;min-height:47px}
  .mini-flow b{font-size:15px}
}
@media(max-width:720px){
  .mini-flow{max-width:470px;padding:16px 12px;gap:6px}
  .mini-flow span{font-size:12px;min-height:49px;padding:10px 5px}
  .steps span{margin-bottom:24px}
}
@media(max-width:360px){.mini-flow{padding:13px 8px;gap:3px}.mini-flow span{font-size:11px}}