:root {
  --sq-blue: #22b8e6;
  --sq-blue-dark: #0f8fbe;
}

.sq-solution-page {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);

  --s: 43px; /* control the size*/
  --c1: #ffffff;
  --c2: #caf0fe;
  --c3: #94e3fe;
  
  --b: calc(var(--s)/3.67); /* control the thickness of the curved lines */
  
  --_r: calc(1.28*var(--s) + var(--b)/2) at top 50%;
  --_f: calc(99.5% - var(--b)),var(--c1) calc(101% - var(--b)) 99.5%,#0000 101%;
  --_g0: calc(-.8*var(--s)), var(--c2) var(--_f);
  --_g1: calc(-.8*var(--s)), var(--c3) var(--_f);
  --_s: calc(1.8*var(--s) + var(--b));
  background: 
    radial-gradient(var(--_r) right var(--_g0)) calc(-1*var(--_s)) var(--s),
    radial-gradient(var(--_r) left  var(--_g1))         var(--_s)  calc(-1*var(--s)),
    radial-gradient(var(--_r) right var(--_g1)) calc(var(--_s)/-2) calc(-1*var(--s)),
    radial-gradient(var(--_r) left  var(--_g0)) calc(var(--_s)/ 2) var(--s),
    linear-gradient(90deg,var(--c2) 50%,var(--c3) 0);
  background-size: var(--_s) calc(4*var(--s));
}

.sq-eyebrow {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(34, 184, 230, 0.1);
  color: var(--sq-blue-dark);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.sq-metrics-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/img/solutions/metrics-bg.svg") center/cover no-repeat;
  opacity: 0.8;
  pointer-events: none;
}

.sq-proof-metric {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--sq-blue-dark);
}

.sq-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(34, 184, 230, 0.12);
  border: 1px solid rgba(34, 184, 230, 0.35);
}

.sq-step-number {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(34, 184, 230, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--sq-blue-dark);
  background-color: #ffffff;
}