.no-uppercase {
    text-transform: none !important;
}

.silver-border {
    border: 7px solid silver;
    border-radius: 10px;
    /*box-shadow: 0 0 10px rgba(192, 192, 192, 0.5);*/
}

:root {
    --card-bg:      #233026;
    --line-clr:     #37433b;
    --accent-green: #5fbf6d;
    --accent-blue:  #4f7dff;
    --text-primary: #e8e8e8;
}

/* 1-row layout ---------------------------------------------------- */
.flow{
    display:inline-flex;        /* shrink to content instead of full width */
    align-items:center;
    gap:120px;
    margin-inline:auto;         /* centers within a block parent */
}

/* reusable arrow block ------------------------------------------ */
.arrow-wrap{
    position:relative;        /* creates the positioning context */
    display:flex;             /* keeps arrow’s intrinsic size */
    align-items:center;
}

/* the label itself --------------------------------------------- */
.arrow-label{
    position:absolute;
    top:-1.4em;               /* move above the arrow line */
    left:50%;
    transform:translateX(-50%);   /* true horizontal centering */
    font-size:1em;
    font-weight:500;
    color:var(--text-primary);
    white-space:nowrap;       /* keep one-word labels from wrapping */
    pointer-events:none;      /* clicks pass through to arrow/card */
}

/* arrow styling --------------------------------------------------- */
.arrow{
    width:250px;        /* matches viewBox width */
    height:12px;       /* matches viewBox height */
    flex:0 0 auto;     /* don’t let flexbox stretch it */
    stroke:var(--accent-green);  /* same green as the card */
    stroke-width:3;
    fill:none;
}