/* begin of new Hex process */
  
  :root {
    --hex-height: 88px;
    --dot-1: #FF54C2;
    --dot-2: #E543C6;
    --dot-3: #CA32CA;
    --dot-4: #B022CF;
    --dot-5: #9511D3;
    --dot-6: #7B00D7;
  }

  /* ---- container ---- */
  .hex-flow {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 3.5rem;
  }

  /* Each hex "slot" just holds the label now — the border lives in the
     shared SVG overlay behind it, so the gradient can run continuously
     across every slot instead of resetting inside each one. */
  .hex {
    position: relative;
    z-index: 1;               /* sits above the overlay so text is legible */
    flex: 1 1 0;
    min-width: 0;
    height: var(--hex-height);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 14px;
  }

  .hex-label {
    position: relative;
    /*color: #4b4b4b;*/
    font-size: clamp(0.7rem, 1.4vw, 0.95rem);
    line-height: 1.2;
    letter-spacing: .0225rem;
    font-weight: 600;
    word-break: break-word;
    max-width: 100%;
  }

  /* ---- shared border overlay ---- */
  .hex-flow-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
  }
  .hex-flow-overlay polygon {
/*    fill: transparent;
    stroke: url(#hexGradientH);
    stroke-width: 1;
    vector-effect: non-scaling-stroke; */
    /* keeps a true 1px stroke at any size */
  }
.hex-flow-overlay polygon {
  fill: transparent;
  stroke: url(#hexGradientH);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

  /* Vertical (stacked) overlay is hidden until the mobile breakpoint */
  .hex-flow-overlay--v { display: none; }

  @media (max-width: 760px) {
    .hex-flow { flex-direction: column; }
    .hex { width: 100%; min-height:180px}
    .hex-label {font-size: clamp(1.15rem, 1.4vw, 0.95rem);}
    .hex-flow-overlay { width:80% margin-left:10%}
    .hex-flow-overlay--h { display: none; }
    .hex-flow-overlay--v { display: block; }

    .hex-flow-overlay--v polygon {
      stroke: url(#hexGradientV);
    }
  }

/* end of new Hex process */