/* Text explains; the unframed artwork occupies the quiet right-hand space. */
.capability-panels { min-height: 590px; background-color: #fafdff; transition: background-color 240ms ease; }
.capability-panels:has(#panel-sales:not([hidden])) { background-color: #fafcff; }
.capability-panels:has(#panel-automation:not([hidden])) { background-color: #fbfaff; }
.capability-panels:has(#panel-integrations:not([hidden])) { background-color: #f9fcff; }
.capability-panels:has(#panel-analytics:not([hidden])) { background-color: #f9fdfb; }
.capability-panels:has(#panel-data:not([hidden])) { background-color: #fbfcfd; }
.capability-main { position: relative; align-items: flex-start; justify-content: center; padding: 28px 12px 28px 0; text-align: left; }
.capability-main h3, .capability-main .capability-copy { width: calc(100% - 296px); position: relative; z-index: 1; }
.capability-main h3 { margin-top: 0; }
.capability-main .capability-copy { margin-top: 18px; }
.capability-atmosphere { position: absolute; width: 300px; height: 250px; right: -4px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: .7; }
.capability-atmosphere img { display: block; width: 100%; height: 100%; object-fit: contain; }
.capability-panel.is-active .capability-main h3,
.capability-panel.is-active .capability-copy,
.capability-panel.is-active .capability-states { animation: capability-copy-in 220ms ease-out both; }
.capability-panel.is-active .capability-atmosphere img { animation: capability-art-in 260ms ease-out both; }
@keyframes capability-copy-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes capability-art-in { from { opacity: 0; transform: translateX(5px) scale(.985); } to { opacity: 1; transform: none; } }
@media (min-width: 901px) and (max-width: 1190px) {
  .capability-panels { min-height: 766px; }
  .capability-main h3, .capability-main .capability-copy { width: calc(100% - 196px); }
  .capability-atmosphere { width: 200px; height: 205px; }
}
@media (max-width: 900px) {
  .capability-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 12px 2px; scrollbar-width: thin; scrollbar-color: #bdcadb transparent; overscroll-behavior-inline: contain; scroll-padding-inline: 2px; }
  .capability-tab { flex: 0 0 218px; width: 218px; min-height: 78px; flex-direction: row; align-items: center; padding: 12px; font-size: 18px; }
  .capability-tab.is-active { font-weight: 600; box-shadow: inset 0 -3px #3766cc; }
  .capability-main { padding: 24px 12px 24px 0; }
  .capability-main h3, .capability-main .capability-copy { width: calc(100% - 260px); }
  .capability-atmosphere { width: 260px; height: 230px; }
  .capability-panels { min-height: 640px; padding-inline: 16px; }
}
@media (max-width: 560px) {
  .capability-tab { flex-basis: 208px; width: 208px; min-height: 78px; }
  .capability-panels { min-height: 0; padding: 24px 0; background-color: transparent !important; }
  .capability-main { padding: 0; align-items: center; text-align: center; }
  .capability-main h3, .capability-main .capability-copy { width: 100%; }
  .capability-main h3 { order: 0; }
  .capability-atmosphere { position: static; order: 1; transform: none; width: 244px; max-width: 100%; height: 150px; margin-top: 8px; opacity: .74; }
  .capability-main .capability-copy { order: 2; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .capability-panels { transition: none; }
  .capability-panel.is-active .capability-main h3,
  .capability-panel.is-active .capability-copy,
  .capability-panel.is-active .capability-states,
  .capability-panel.is-active .capability-atmosphere img { animation: none; }
}