/* Reuse homepage photo cards, with three configurations instead of four. */
@media(width >= 992px){
  .tools-configurations{grid-template-columns: repeat(3, minmax(0, 1fr));}
}
.tools-configurations .feature-icon{filter: brightness(0) invert(1);}
.tools-control-photo img{display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover;}

/* Two tool families: dedicated (1/3) and standard (2/3), with A/B side by side. */
.tools-integration-grid{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; gap: var(--gutter); --tools-panel-padding: clamp(2rem, 2.2vw, 4rem);}
.tools-integration-group{min-width: 0; background-color: #151515; border-radius: var(--border-radius); overflow: hidden;}
.tools-integration-category{padding: var(--tools-panel-padding); border-bottom: .1rem solid #383838;}
.tools-integration-category h2{margin-bottom: var(--gutter-half);}
.tools-integration-status{font-family: var(--font-medium); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--grey-color);}
.tools-integration-panel{display: grid; gap: var(--md-space); min-width: 0; padding: var(--tools-panel-padding);}
.tools-integration-panel + .tools-integration-panel{border-top: .1rem solid #383838;}
.tools-integration-panel > :not(:last-child){margin-bottom: 0;}
.tools-integration-heading h3{font-family: var(--font-medium); font-size: var(--fs-xl); line-height: 1.2; text-wrap: pretty;}
.tools-integration-letter{color: #ef343b;}
.tools-integration-configuration{margin-top: var(--gutter-half); font-style: italic; color: var(--grey-color); text-wrap: pretty;}
.tools-integration-body{min-width: 0; color: var(--grey-color);}
.tools-integration-result{padding: 2rem; border-left: .2rem solid #666; background-color: rgb(255 255 255 / 4%);}
.tools-integration-dedicated .tools-integration-result,
.tools-integration-standard-a .tools-integration-result{border-left-color: #48b878; background-color: rgb(72 184 120 / 14%);}
.tools-integration-result-warning{border-left-color: #ef343b; background-color: rgb(239 52 59 / 7%);}
.tools-integration-references{margin-top: var(--md-space); font-size: var(--fs-sm); color: var(--grey-color);}
@media(width >= 992px){
  .tools-integration-options{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--md-space);}
  .tools-integration-options .tools-integration-panel{grid-template-rows: subgrid; grid-row: 1 / span 3;}
  .tools-integration-standard-a{grid-column: 1;}
  .tools-integration-standard-b{grid-column: 2;}
  .tools-integration-options .tools-integration-panel + .tools-integration-panel{border-top: 0; border-left: .1rem solid #383838;}
}
@media(width < 992px){
  .tools-integration-grid{grid-template-columns: 1fr;}
  .tools-integration-result{padding: 1.6rem;}
}