/* Port only the CLAUDE branch's WHO / WHAT / WHEN / WHERE illustration.
   Keep the GPT-PANEL section copy, benefits, other sections and mobile route intact.
   Loaded after gpt-panel-impact.css to override that stylesheet's command-board. */
#practices .four {
  position:relative!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(165px,auto))!important;
  grid-auto-flow:row!important;
  gap:16px!important;
  align-content:stretch!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:20px!important;
  border:1px solid #e2e8f1!important;
  border-radius:28px!important;
  background:#f5f8fc!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#practices .four::before,
#practices .four::after {
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  opacity:.9;
  background-repeat:repeat;
}
#practices .four::before {
  left:50%;
  top:28px;
  bottom:28px;
  width:2px;
  margin-left:-1px;
  background-image:linear-gradient(180deg,#2156d9 50%,transparent 50%);
  background-size:2px 10px;
}
#practices .four::after {
  left:28px;
  right:28px;
  top:50%;
  height:2px;
  margin-top:-1px;
  background-image:linear-gradient(90deg,#2156d9 50%,transparent 50%);
  background-size:10px 2px;
}
#practices .four > .orbit {display:none!important;}
#practices .four > .four-item {
  position:relative!important;
  inset:auto!important;
  z-index:1!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:14px!important;
  order:0!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  min-height:165px!important;
  height:auto!important;
  margin:0!important;
  padding:22px!important;
  border:1px solid #e2e8f1!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 1px 2px rgba(14,25,48,.06),0 2px 8px rgba(14,25,48,.05)!important;
  transform:none!important;
  animation:none!important;
  text-align:left!important;
  transition:border-color .35s ease,box-shadow .35s ease;
}
#practices .four > .four-item.who {
  grid-column:1!important;
  grid-row:1!important;
  border:1px solid #e2e8f1!important;
  background:#fff!important;
}
#practices .four > .four-item.what {
  grid-column:2!important;
  grid-row:1!important;
  border:1px solid #e2e8f1!important;
  background:#fff!important;
}
#practices .four > .four-item.when {
  grid-column:1!important;
  grid-row:2!important;
  border:1px solid #e2e8f1!important;
  background:#fff!important;
}
#practices .four > .four-item.where {
  grid-column:2!important;
  grid-row:2!important;
  border:1px solid #e2e8f1!important;
  background:#fff!important;
}
#practices .four > .four-item .ico {
  display:block!important;
  flex:0 0 26px!important;
  width:26px!important;
  height:26px!important;
  padding:0!important;
  margin:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#2156d9!important;
  fill:none!important;
  stroke:currentColor!important;
}
#practices .four > .four-item.when .ico,
#practices .four > .four-item.where .ico {color:#11795b!important;}
#practices .four > .four-item > div {
  display:block!important;
  min-width:0!important;
  width:100%!important;
  text-align:left!important;
}
#practices .four > .four-item strong {
  display:block!important;
  margin:0!important;
  font-size:15px!important;
  font-weight:750!important;
  line-height:1.3!important;
  letter-spacing:.16em!important;
  color:#16388f!important;
}
#practices .four > .four-item.when strong,
#practices .four > .four-item.where strong {color:#11795b!important;}
#practices .four > .four-item small {
  display:block!important;
  margin:4px 0 0!important;
  font-size:15px!important;
  font-weight:400!important;
  line-height:1.45!important;
  letter-spacing:normal!important;
  color:#56647d!important;
  overflow-wrap:break-word!important;
  text-align:left!important;
}
#practices .four .four-sites {
  position:absolute!important;
  top:16px!important;
  right:16px!important;
  z-index:1;
  width:70px!important;
  height:40px!important;
  color:#11795b!important;
  opacity:.85;
  pointer-events:none;
}
#practices .four > .center.center-search {
  position:absolute!important;
  inset:auto!important;
  left:50%!important;
  top:50%!important;
  z-index:3!important;
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  grid-column:auto!important;
  grid-row:auto!important;
  order:0!important;
  width:max-content!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:12px 22px 12px 16px!important;
  transform:translate(-50%,-50%)!important;
  translate:none!important;
  border:0!important;
  border-radius:999px!important;
  background:#0e1930!important;
  box-shadow:0 14px 30px -12px rgba(14,25,48,.6)!important;
  color:#fff!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
#practices .four > .center.center-search .center-search-spacer {display:none!important;}
#practices .four > .center.center-search .ico {
  display:block!important;
  flex:0 0 18px!important;
  width:18px!important;
  height:18px!important;
  padding:0!important;
  margin:0!important;
  color:#9fc4ff!important;
  background:transparent!important;
  stroke:currentColor!important;
}
#practices .four > .center.center-search > span:not(.center-search-spacer) {
  font-size:14px!important;
  font-weight:850!important;
  line-height:1.3!important;
  letter-spacing:.18em!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
@media (max-width:600px) {
  #practices .four {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(148px,auto))!important;
    gap:12px!important;
    padding:13px!important;
    border-radius:21px!important;
  }
  #practices .four > .four-item {
    min-height:148px!important;
    padding:15px 12px!important;
    gap:10px!important;
    border-radius:14px!important;
  }
  #practices .four > .four-item .ico {
    flex-basis:24px!important;
    width:24px!important;
    height:24px!important;
  }
  #practices .four > .four-item strong {
    font-size:12px!important;
    letter-spacing:.12em!important;
  }
  #practices .four > .four-item small {
    font-size:12px!important;
    line-height:1.4!important;
  }
  #practices .four > .center.center-search {
    gap:7px!important;
    padding:9px 13px!important;
  }
  #practices .four > .center.center-search > span:not(.center-search-spacer) {
    font-size:11px!important;
    letter-spacing:.12em!important;
  }
  #practices .four > .center.center-search .ico {
    width:16px!important;
    height:16px!important;
    flex-basis:16px!important;
  }
  #practices .four .four-sites {display:none!important;}
}
@media (prefers-reduced-motion:reduce) {
  #practices .four > .four-item {transition:none!important;}
}