/* KONAI v12 — targeted audience-section geometry + interaction repair */

/* --------------------------------------------------------------------------
   THE PROBLEM — one shared grid for heading + visual + cards
   -------------------------------------------------------------------------- */
@media (min-width: 961px){
  .lustro-inspired .risk-section{
    --v12-risk-left:minmax(410px,.88fr);
    --v12-risk-right:minmax(0,1.12fr);
    --v12-risk-gap:clamp(34px,4.2vw,64px);
    --v12-risk-height:clamp(430px,44vw,520px);
  }
  .lustro-inspired .risk-section>.section-heading,
  .lustro-inspired .risk-section .risk-layout{
    grid-template-columns:var(--v12-risk-left) var(--v12-risk-right)!important;
    column-gap:var(--v12-risk-gap)!important;
  }
  .lustro-inspired .risk-section>.section-heading{
    align-items:end!important;
  }
  .lustro-inspired .risk-section>.section-heading h2{
    grid-column:2!important;
    width:100%!important;
    max-width:760px!important;
  }
  .lustro-inspired .risk-layout{
    align-items:start!important;
  }
  .lustro-inspired .risk-scene{
    align-self:start!important;
    height:var(--v12-risk-height)!important;
    min-height:var(--v12-risk-height)!important;
  }
  .lustro-inspired .risk-list{
    height:var(--v12-risk-height)!important;
    min-height:var(--v12-risk-height)!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    align-content:stretch!important;
  }
  .lustro-inspired .risk-card{
    min-height:0!important;
    height:100%!important;
  }
}

/* Keep each risk card internally stable. No legacy preview/absolute-state leftovers. */
.lustro-inspired .risk-card{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  padding:20px!important;
}
.lustro-inspired .risk-card .risk-index{
  position:absolute!important;
  top:17px!important;
  right:18px!important;
  margin:0!important;
  font:700 8px/1 var(--k-mono)!important;
  color:rgba(112,226,255,.82)!important;
}
.lustro-inspired .risk-card h4{
  margin:10px 34px 8px 0!important;
  max-width:none!important;
}
.lustro-inspired .risk-card>strong{
  margin:0 0 9px!important;
  color:var(--k-gold)!important;
}
.lustro-inspired .risk-card .progressive-content{
  position:static!important;
  inset:auto!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  opacity:1!important;
  background:none!important;
  background-image:none!important;
  pointer-events:none!important;
}
.lustro-inspired .risk-card .progressive-inner{
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
.lustro-inspired .risk-card .progressive-inner p{
  display:block!important;
  -webkit-line-clamp:unset!important;
  -webkit-box-orient:initial!important;
  overflow:visible!important;
  margin:0!important;
}
.lustro-inspired .risk-card:hover,
.lustro-inspired .risk-card:focus-visible,
.lustro-inspired .risk-card.is-active{
  background:linear-gradient(145deg,rgba(97,220,255,.10),rgba(111,140,255,.055))!important;
  border-color:rgba(97,220,255,.38)!important;
  box-shadow:inset 0 0 0 1px rgba(97,220,255,.035),0 18px 50px rgba(0,0,0,.14)!important;
}

/* --------------------------------------------------------------------------
   KONAI INFRASTRUCTURE — readable symbols and a footer that belongs to the UI
   -------------------------------------------------------------------------- */
.lustro-inspired .solution-column .solution-symbol{
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  border-radius:14px!important;
  border:1px solid rgba(120,228,255,.46)!important;
  background:linear-gradient(145deg,rgba(120,228,255,.19),rgba(91,133,255,.10))!important;
  color:#a9efff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 24px rgba(97,220,255,.10)!important;
}
.lustro-inspired .solution-column .solution-symbol svg{
  display:block!important;
  width:21px!important;
  height:21px!important;
  margin:auto!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  vector-effect:non-scaling-stroke!important;
}
.lustro-inspired .solution-column:hover .solution-symbol{
  color:#e8fbff!important;
  border-color:rgba(120,228,255,.72)!important;
  background:linear-gradient(145deg,rgba(120,228,255,.27),rgba(111,140,255,.15))!important;
  box-shadow:0 0 30px rgba(97,220,255,.15),inset 0 1px 0 rgba(255,255,255,.16)!important;
}
.lustro-inspired .solution-footer{
  margin:0 16px 16px!important;
  padding:14px 16px!important;
  min-height:58px!important;
  border:1px solid rgba(126,205,238,.16)!important;
  border-radius:18px!important;
  background:linear-gradient(100deg,rgba(97,220,255,.055),rgba(111,140,255,.045),rgba(255,213,74,.035))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  color:#91a9bd!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:18px!important;
  align-items:center!important;
}
.lustro-inspired .solution-footer span{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  line-height:1.45!important;
}
.lustro-inspired .solution-footer span::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:var(--k-cyan);
  box-shadow:0 0 14px rgba(97,220,255,.42);
}
.lustro-inspired .solution-footer span:last-child::before{
  background:var(--k-gold);
  box-shadow:0 0 14px rgba(255,213,74,.32);
}
.lustro-inspired .solution-footer b{color:#eaf8ff!important}

/* --------------------------------------------------------------------------
   HOW KONAI WORKS — stable orbit + naturally flowing card descriptions
   -------------------------------------------------------------------------- */
.lustro-inspired .workflow-stage-core{
  --v12-orbit-size:216px;
  --v12-orbit-y:42%;
  position:relative!important;
  display:block!important;
  height:330px!important;
  padding:0!important;
  text-align:center!important;
}
.lustro-inspired .workflow-ring{
  position:absolute!important;
  width:var(--v12-orbit-size)!important;
  height:var(--v12-orbit-size)!important;
  left:50%!important;
  top:var(--v12-orbit-y)!important;
  margin-left:calc(var(--v12-orbit-size) / -2)!important;
  margin-top:calc(var(--v12-orbit-size) / -2)!important;
  transform:rotate(0deg)!important;
  transform-origin:50% 50%!important;
  animation:v12WorkflowOrbit 13s linear infinite!important;
  border-color:rgba(97,220,255,.30)!important;
  will-change:transform;
}
.lustro-inspired .workflow-ring::before,
.lustro-inspired .workflow-ring::after{
  box-shadow:0 0 18px rgba(255,213,74,.38)!important;
}
.lustro-inspired .workflow-icon{
  position:absolute!important;
  z-index:2!important;
  left:50%!important;
  top:var(--v12-orbit-y)!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
}
.lustro-inspired .workflow-stage-core h3{
  position:absolute!important;
  z-index:2!important;
  left:18px!important;
  right:18px!important;
  bottom:18px!important;
  margin:0!important;
  max-width:none!important;
  min-height:0!important;
  display:block!important;
  text-align:center!important;
}
@keyframes v12WorkflowOrbit{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

.lustro-inspired .workflow-step,
.lustro-inspired .workflow-step>.progressive-card{
  height:auto!important;
}
.lustro-inspired .workflow-step>.progressive-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  padding:20px!important;
}
.lustro-inspired .workflow-step .result-line{
  margin:0!important;
  min-height:0!important;
}
.lustro-inspired .workflow-step .progressive-content{
  position:static!important;
  inset:auto!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:16px 0 0!important;
  padding:14px 0 0!important;
  border-top:1px solid rgba(159,199,235,.12)!important;
  opacity:1!important;
  overflow:visible!important;
  background:transparent!important;
  pointer-events:none!important;
}
.lustro-inspired .workflow-step .progressive-inner{
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
}
.lustro-inspired .workflow-step .progressive-content p{
  display:block!important;
  -webkit-line-clamp:unset!important;
  -webkit-box-orient:initial!important;
  overflow:visible!important;
  margin:0!important;
  color:#93a9bd!important;
  line-height:1.52!important;
}

@media (prefers-reduced-motion:reduce){
  .lustro-inspired .workflow-ring{animation:none!important}
}

@media (max-width:960px){
  .lustro-inspired .risk-section>.section-heading h2{grid-column:auto!important}
  .lustro-inspired .risk-list{height:auto!important;min-height:0!important}
  .lustro-inspired .risk-scene{height:430px!important;min-height:390px!important}
  .lustro-inspired .solution-footer{grid-template-columns:1fr!important}
  .lustro-inspired .workflow-stage-core{height:300px!important;--v12-orbit-size:196px}
}
@media (max-width:640px){
  .lustro-inspired .solution-footer{margin:0 8px 8px!important;padding:13px!important}
  .lustro-inspired .workflow-stage-core{height:275px!important;--v12-orbit-size:176px;--v12-orbit-y:40%}
  .lustro-inspired .workflow-stage-core h3{font-size:24px!important;bottom:8px!important}
}

/* v13 content-alignment patch: keep the live risk visual on the same top rail as its card grid. */
@media (min-width:961px){
  .lustro-inspired .risk-section .risk-sticky.risk-scene{
    top:0!important;
  }
}