/* DefenceXpress v0.18 R25 — visual balance / de-duplication pass
   Keeps the premium role mockups, removes repeated interface stacks from HTML,
   tightens AI Officer portraits and improves mobile/CTA resilience. */

/* Site-wide safety: never let long CTA copy or media create horizontal overflow. */
html,body{max-width:100%;overflow-x:hidden}
.btn,.dx22-action,.dx24-view-details a{white-space:normal;overflow-wrap:anywhere;text-align:center}

/* One strong role mockup per audience: feature-sized, not full-page poster-sized. */
#client-app-workflow .dx24-visual-showcase,
#officer-app-workflow .dx24-visual-showcase{
  width:min(100%,820px);
  margin:22px auto 14px;
}
#provider-app-workflow .dx24-provider-visual{
  width:min(100%,900px);
  margin:18px auto 12px;
}
.dx24-visual-showcase img,
.dx24-provider-visual img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
}
/* Generated role mockups already carry explanatory UI. Keep captions concise below rather than obscuring artwork. */
.dx24-visual-overlay{
  position:static;
  max-width:none;
  border:0;
  border-top:1px solid rgba(255,205,82,.24);
  border-radius:0;
  background:#041421;
  box-shadow:none;
  backdrop-filter:none;
  padding:10px 14px;
}
.dx24-visual-overlay strong{margin-bottom:2px}
.dx24-visual-overlay span{font-size:.84rem;line-height:1.35}
.dx24-visual-caption{text-align:center;max-width:860px;margin:8px auto 0}

/* Provider/STU section: two compact feature blocks, not two giant posters. */
#provider-app-workflow .dx22-provider-grid{gap:18px;align-items:start}
#provider-app-workflow .dx22-provider-block{padding:18px}
#provider-app-workflow .dx22-provider-block>p{max-width:760px}

/* AI Officers: retain all eight portraits and full descriptions, but reduce the wall-of-faces effect. */
.dx25-ai-page .officers{gap:14px;align-items:start}
.dx25-ai-page .officer{display:flex;flex-direction:column;min-width:0}
.dx25-ai-page .officer img{
  width:100%;
  height:330px;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center 23%;
}
.dx25-ai-page .officer-body{padding:14px 15px 16px}
.dx25-ai-page .officer-body p{font-size:.84rem;line-height:1.5}
.dx25-ai-page .officer-body p:last-child{margin-bottom:0}

/* Slightly tighter role-app sections now that the premium mockup carries the visual story. */
.dx22-app-section .dx22-app-shell{padding:24px}
.dx22-app-section .dx22-lifecycle{margin:18px 0 8px}
.dx22-app-section .dx22-role-note{margin-top:14px}

@media(max-width:1100px){
  #client-app-workflow .dx24-visual-showcase,
  #officer-app-workflow .dx24-visual-showcase,
  #provider-app-workflow .dx24-provider-visual{width:min(100%,760px)}
  .dx25-ai-page .officer img{height:350px}
}

@media(max-width:760px){
  .dx22-app-section .dx22-app-shell{padding:15px}
  #client-app-workflow .dx24-visual-showcase,
  #officer-app-workflow .dx24-visual-showcase,
  #provider-app-workflow .dx24-provider-visual{width:100%;margin:14px auto 10px;border-radius:14px}
  .dx24-visual-overlay{padding:9px 11px}
  .dx24-visual-overlay strong{font-size:.7rem}
  .dx24-visual-overlay span{font-size:.79rem}
  .dx25-ai-page .officers{grid-template-columns:1fr}
  .dx25-ai-page .officer img{height:390px;object-position:center 20%}
  .dx25-ai-page .officer-body{padding:14px}
}

@media(min-width:761px) and (max-width:1100px){
  .dx25-ai-page .officers{grid-template-columns:repeat(2,minmax(0,1fr))}
}