/* Separate fading rules, with gaps at junctions and no enclosing border. */
.showcase{padding:110px 7vw 85px}
.showcase-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:45px;margin-bottom:55px}
.showcase-heading h2{font-size:clamp(46px,5.5vw,82px);margin-top:24px}
.showcase-heading>p{max-width:31ch;font-size:15px;color:var(--muted);padding-bottom:6px}
.app-matrix{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:0;margin:0;list-style:none}
.app-matrix>li{position:relative;min-width:0}
.app-matrix>li::before,.app-matrix>li::after{content:'';position:absolute;pointer-events:none}
.app-matrix>li::before{left:0;top:20px;bottom:20px;width:1px;background:linear-gradient(to bottom,transparent,var(--line) 30%,var(--line) 70%,transparent)}
.app-matrix>li::after{top:0;left:20px;right:20px;height:1px;background:linear-gradient(to right,transparent,var(--line) 25%,var(--line) 75%,transparent)}
.app-matrix>li:nth-child(5n+1)::before,.app-matrix>li:nth-child(-n+5)::after{display:none}
.app-matrix a,.app-matrix .app-unavailable{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:30px 24px;min-height:156px;height:100%;transition:color .25s}
.app-matrix h3{font-family:Arial,Helvetica,sans-serif;font-size:clamp(18px,1.55vw,23px);font-weight:500;line-height:1.25;letter-spacing:-.035em;margin:0;overflow-wrap:anywhere}
.app-domain{font-size:11px;line-height:1.5;color:var(--muted);padding-right:23px;overflow-wrap:anywhere}
.app-arrow{position:absolute;right:24px;bottom:29px;font-size:18px;color:var(--accent);transition:transform .25s}
.app-matrix a:hover{color:var(--accent)}
.app-matrix a:hover .app-arrow{transform:translate(3px,-3px)}
.app-matrix a:focus-visible{outline:2px solid var(--accent);outline-offset:-8px;border-radius:0}
html[data-energy=bold] .showcase-heading h2{font-size:clamp(46px,6.5vw,96px)}
html[data-energy=bold] .app-matrix h3{font-weight:700}
html[data-energy=futuristic] .app-matrix>li::before{background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--accent),transparent 60%),transparent)}
html[data-energy=futuristic] .app-matrix>li::after{background:linear-gradient(to right,transparent,color-mix(in srgb,var(--accent),transparent 60%),transparent)}
@media(max-width:1199px){
  .app-matrix{grid-template-columns:repeat(3,minmax(0,1fr))}
  .app-matrix>li:nth-child(5n+1)::before,.app-matrix>li:nth-child(-n+5)::after{display:block}
  .app-matrix>li:nth-child(3n+1)::before,.app-matrix>li:nth-child(-n+3)::after{display:none}
}
@media(max-width:760px){
  .showcase{padding:75px 7vw 55px}
  .showcase-heading{align-items:flex-start;flex-direction:column;gap:25px;margin-bottom:32px}
  .showcase-heading h2,html[data-energy=bold] .showcase-heading h2{font-size:50px}
  .showcase-heading>p{font-size:14px;max-width:34ch}
  .app-matrix{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-matrix>li:nth-child(3n+1)::before,.app-matrix>li:nth-child(-n+3)::after{display:block}
  .app-matrix>li:nth-child(2n+1)::before,.app-matrix>li:nth-child(-n+2)::after{display:none}
  .app-matrix a,.app-matrix .app-unavailable{padding:25px 16px;min-height:145px;gap:22px}
  .app-matrix h3{font-size:18px}
  .app-domain{font-size:10px;padding-right:17px}
  .app-arrow{right:16px;bottom:24px;font-size:16px}
  .app-matrix>li::before{top:16px;bottom:16px}
  .app-matrix>li::after{left:16px;right:16px}
}
@media(max-width:359px){
  .app-matrix{grid-template-columns:minmax(0,1fr)}
  .app-matrix>li::before{display:none!important}
  .app-matrix>li:nth-child(n+2)::after{display:block}
  .app-matrix a,.app-matrix .app-unavailable{min-height:116px;padding-block:23px;gap:18px}
  .app-matrix h3{font-size:21px}
  .app-domain{font-size:11px}
}