/* Homepage five-area solution detail layout: capabilities in one column left, product view right. */
#solutionAreaDetail .solution-area-layout{
  display:grid;
  grid-template-columns:minmax(300px,.72fr) minmax(520px,1.28fr);
  gap:34px;
  align-items:start;
  margin-top:18px;
}

#solutionAreaDetail .solution-area-capabilities{
  min-width:0;
}

#solutionAreaDetail .solution-area-capabilities .feature-label{
  margin:0 0 10px;
}

#solutionAreaDetail .solution-area-capabilities .feature-label span{
  display:none;
}

/* Force all five capabilities into one clean vertical column. */
#solutionAreaDetail .solution-area-capabilities .solution-feature-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
}

#solutionAreaDetail .solution-area-capabilities .solution-feature-card,
#solutionAreaDetail .solution-area-capabilities .solution-feature-card:last-child:nth-child(odd){
  grid-column:span 1!important;
  width:100%!important;
  min-height:88px!important;
  padding:14px 42px 14px 16px!important;
}

#solutionAreaDetail .solution-area-capabilities .feature-index{
  margin-bottom:5px!important;
}

#solutionAreaDetail .solution-area-capabilities .feature-card-desc{
  -webkit-line-clamp:2;
  line-height:1.45!important;
}

/* Large product image panel on the right. */
#solutionAreaDetail .solution-area-visual{
  position:relative;
  min-width:0;
  width:100%;
  padding:18px 18px 32px;
  border:1px solid rgba(210,220,230,.16);
  border-radius:16px;
  background:linear-gradient(150deg,rgba(14,34,50,.82),rgba(7,15,24,.94));
  box-shadow:0 34px 80px -48px rgba(0,0,0,.92);
  overflow:visible;
}

#solutionAreaDetail .solution-area-visual:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 78% 18%,color-mix(in srgb,var(--area-accent,var(--blue)) 12%,transparent),transparent 38%);
  pointer-events:none;
}

#solutionAreaDetail .solution-area-visual-head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:15px;
}

#solutionAreaDetail .solution-area-visual-head>div{
  display:grid;
  gap:4px;
}

#solutionAreaDetail .solution-area-visual-head small{
  color:var(--area-accent,var(--blue));
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

#solutionAreaDetail .solution-area-visual-head strong{
  font-family:'Space Grotesk',sans-serif;
  font-size:17px;
  line-height:1.25;
  color:var(--white);
}

#solutionAreaDetail .solution-area-visual-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:6px 9px;
  border:1px solid color-mix(in srgb,var(--area-accent,var(--blue)) 36%,transparent);
  border-radius:999px;
  color:var(--area-accent,var(--blue));
  background:rgba(8,21,32,.74);
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.08em;
  white-space:nowrap;
}

#solutionAreaDetail .solution-area-laptop{
  position:relative;
  z-index:2;
  width:100%;
  margin:8px 0 0;
  padding:10px 10px 12px;
  border:1px solid rgba(210,220,230,.3);
  border-radius:18px 18px 11px 11px;
  background:linear-gradient(145deg,#182b3b,#07131f 68%);
  box-shadow:0 30px 58px -34px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.025);
}

#solutionAreaDetail .solution-area-laptop:before{
  content:"";
  position:absolute;
  top:4px;
  left:50%;
  transform:translateX(-50%);
  width:5px;
  height:5px;
  border-radius:50%;
  background:#24455a;
}

#solutionAreaDetail .solution-area-laptop:after{
  content:"";
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:-15px;
  height:15px;
  border-top:1px solid rgba(255,255,255,.15);
  border-radius:0 0 50% 50%;
  background:linear-gradient(180deg,#273b49,#0a1720 62%);
  box-shadow:0 7px 12px rgba(0,0,0,.35);
}

#solutionAreaDetail .solution-area-laptop-screen{
  position:relative;
  aspect-ratio:16/9;
  border-radius:10px;
  overflow:hidden;
  background:#06131e;
}

#solutionAreaDetail .solution-area-laptop-screen img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  background:#06131e;
}

#solutionAreaDetail .solution-area-visual-copy{
  position:relative;
  z-index:2;
  margin:28px 4px 0;
  color:var(--text-dim);
  font-size:13px;
  line-height:1.6;
}

@media(max-width:1100px){
  #solutionAreaDetail .solution-area-layout{
    grid-template-columns:minmax(280px,.8fr) minmax(430px,1.2fr);
    gap:24px;
  }
}

@media(max-width:900px){
  #solutionAreaDetail .solution-area-layout{
    grid-template-columns:1fr;
    gap:24px;
  }
  #solutionAreaDetail .solution-area-visual{
    min-height:0;
  }
  #solutionAreaDetail .solution-area-capabilities .solution-feature-card{
    min-height:92px!important;
  }
}

@media(max-width:640px){
  #solutionAreaDetail .solution-area-layout{
    margin-top:14px;
  }
  #solutionAreaDetail .solution-area-visual{
    padding:14px 14px 28px;
  }
  #solutionAreaDetail .solution-area-visual-head{
    align-items:flex-start;
    flex-direction:column;
  }
  #solutionAreaDetail .solution-area-laptop{
    padding:7px 7px 9px;
  }
}