/* HE Supply wide-canvas ecosystem accents
   Quiet editorial columns that belong to the same black canvas as Client Home.
   Wide-screen enhancement only. Core content always wins at smaller widths. */

.client-ecosystem-edge{display:none}

@media(min-width:1760px){
  .home-signed-in .client-pane[data-client-pane="home"]{position:relative}

  .client-ecosystem-edge{
    display:block;
    position:absolute;
    z-index:8;
    width:clamp(220px,13vw,286px);
    color:#87939b;
    background:transparent;
    border:0;
    pointer-events:auto;
  }

  .client-ecosystem-edge.left{
    top:48px;
    left:max(22px,calc((100vw - var(--client-max))/2 - 250px));
    padding-right:30px;
    text-align:right;
  }

  .client-ecosystem-edge.right{
    top:176px;
    right:max(22px,calc((100vw - var(--client-max))/2 - 250px));
    padding-left:30px;
    text-align:left;
  }

  .client-ecosystem-edge:after{
    content:"";
    position:absolute;
    top:31px;
    width:72px;
    height:1px;
    pointer-events:none;
  }
  .client-ecosystem-edge.left:after{
    right:-22px;
    background:linear-gradient(90deg,rgba(226,198,111,.42),rgba(51,65,72,.22),transparent);
  }
  .client-ecosystem-edge.right:after{
    left:-22px;
    background:linear-gradient(270deg,rgba(226,198,111,.42),rgba(51,65,72,.22),transparent);
  }

  .client-edge-label{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:20px;
    margin-bottom:22px;
    color:#818d95;
    font:800 10px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    letter-spacing:.17em;
    text-transform:uppercase;
  }
  .client-ecosystem-edge.left .client-edge-label{justify-content:flex-end}
  .client-edge-label:before{
    content:"";
    width:28px;
    height:1px;
    background:linear-gradient(90deg,#75653c,transparent);
  }
  .client-ecosystem-edge.left .client-edge-label:before{order:2;transform:scaleX(-1)}

  .client-edge-signal,.client-edge-pulse{position:relative;padding-top:5px;border:0}
  .client-edge-signal:before,.client-edge-pulse:before{
    content:"";
    display:block;
    width:72%;
    height:1px;
    margin-bottom:18px;
    opacity:.82;
  }
  .client-ecosystem-edge.left .client-edge-signal:before{margin-left:auto;background:linear-gradient(90deg,transparent,#263238)}
  .client-ecosystem-edge.right .client-edge-pulse:before{background:linear-gradient(90deg,#263238,transparent)}

  .client-edge-signal small,.client-edge-pulse small{
    display:block;
    color:#7c8991;
    font:800 9px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    letter-spacing:.13em;
    text-transform:uppercase;
  }

  .client-edge-signal strong{
    display:block;
    margin-top:11px;
    color:#e7e5df;
    font-size:17px;
    line-height:1.22;
    font-weight:820;
    letter-spacing:-.018em;
  }
  .client-edge-signal span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:11px;
    color:#e2c66f;
    font-size:11px;
    line-height:1.35;
    font-weight:780;
  }
  .client-edge-signal span:before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#e2c66f;
    box-shadow:0 0 0 4px rgba(226,198,111,.08);
  }

  .client-edge-stack{display:grid;gap:26px;margin-top:2px}
  .client-edge-item{
    position:relative;
    display:block;
    padding:0 0 25px;
    color:inherit;
    text-decoration:none;
    border:0;
  }
  .client-edge-item:after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:78%;
    height:1px;
    background:linear-gradient(90deg,#202a30 0%,#182126 62%,transparent 100%);
  }
  .client-edge-item:last-child:after{width:58%;opacity:.78}
  .client-edge-item b{
    display:block;
    margin-top:10px;
    color:#e0e2e2;
    font-size:16px;
    line-height:1.26;
    font-weight:810;
    letter-spacing:-.015em;
  }
  .client-edge-item span{
    display:block;
    margin-top:8px;
    color:#77848c;
    font-size:11px;
    line-height:1.5;
  }
  .client-edge-item:hover b{color:#e2c66f}

  .client-edge-footer{
    margin-top:28px;
    padding-top:18px;
    border:0;
    color:#657179;
    font-size:10px;
    line-height:1.65;
    opacity:.82;
    background:linear-gradient(90deg,transparent,#192329 46%,#263238 100%) top/70% 1px no-repeat;
    background-position:right top;
  }
}

@media(min-width:2100px){
  .client-ecosystem-edge{width:300px}
  .client-ecosystem-edge.left{left:calc((100vw - var(--client-max))/2 - 292px)}
  .client-ecosystem-edge.right{right:calc((100vw - var(--client-max))/2 - 292px)}
  .client-edge-signal strong,.client-edge-item b{font-size:18px}
}

/* Standard / laptop / compact / mobile keep the core Client Home only. */
@media(max-width:1759px){
  .client-ecosystem-edge{display:none!important}
}