/* Extend the existing native selector button across each use-case card.
   Its events, keyboard operation and preview controller remain unchanged. */
body.aos-clean article.aos-use-case-card {
  position:relative;
  isolation:isolate;
  cursor:pointer;
}
body.aos-clean button.aos-use-case-card,
body.aos-clean article.aos-use-case-card > button.aos-use-case-trigger {
  cursor:pointer;
  touch-action:manipulation;
}
body.aos-clean article.aos-use-case-card > button.aos-use-case-trigger {
  position:static;
  z-index:auto;
  overflow:visible;
  border-radius:inherit;
  transform:none;
  translate:none;
  scale:none;
  rotate:none;
  filter:none;
  perspective:none;
  contain:none;
  will-change:auto;
}
body.aos-clean article.aos-use-case-card > button.aos-use-case-trigger::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  cursor:pointer;
  pointer-events:auto;
}
/* Keep the selected state intact; make the entire unselected card feel actionable. */
@media(hover:hover) and (pointer:fine) {
  body.aos-clean :is(article,button).aos-use-case-card:not(.is-active):hover {
    border-color:#d8795a;
    background:#fffaf7;
    box-shadow:0 6px 18px #102a330a;
  }
}
body.aos-clean :is(article,button).aos-use-case-card:focus-within {
  outline:3px solid #102a33;
  outline-offset:3px;
}
/* The outer card supplies the visible focus ring for the stretched button. */
body.aos-clean article.aos-use-case-card > button.aos-use-case-trigger:focus-visible {
  outline:none;
  box-shadow:none;
}
@media(prefers-reduced-motion:reduce) {
  body.aos-clean :is(article,button).aos-use-case-card,
  body.aos-clean article.aos-use-case-card > button.aos-use-case-trigger,
  body.aos-clean article.aos-use-case-card > button.aos-use-case-trigger span {
    transition:none!important;
    animation:none!important;
  }
}