/* PPE Detection page only. Shared styles.css and solution-pages.css remain untouched. */
.solution-ppe-page .ppe-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(270px, .88fr);
  align-items: center;
  gap: clamp(1.4rem, 3.6vw, 2.8rem);
}
.solution-ppe-page .ppe-overview-copy,
.solution-ppe-page .ppe-example-figure { min-width: 0; }
.solution-ppe-page .ppe-section-kicker {
  margin-bottom: .55rem;
  color: #52647A;
  letter-spacing: .08em;
}
.solution-ppe-page .ppe-example-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  margin: 0;
  padding: .85rem;
  border: 1px solid rgba(74,98,138,.22);
  border-radius: 1rem;
  background: linear-gradient(145deg, #071A2B, #102C43);
  box-shadow: 0 12px 30px rgba(23,32,51,.12);
  min-width: 0;
}
.solution-ppe-page .ppe-example-figure img {
  display: block;
  width: 100%;
  max-width: 370px;
  height: clamp(350px, 38vw, 455px);
  object-fit: contain;
  object-position: center;
  border-radius: .65rem;
  background: #071A2B;
}
.solution-ppe-page .ppe-example-figure figcaption {
  width: 100%;
  box-sizing: border-box;
  padding: .15rem .2rem .1rem;
  color: #D3DFE9;
  font-size: .84rem;
  line-height: 1.5;
}
.solution-ppe-page .ppe-focus-grid {
  margin-top: 1.45rem;
}
.solution-ppe-page .ppe-integration-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.solution-ppe-page .ppe-focus-card,
.solution-ppe-page .ppe-integration-card,
.solution-ppe-page .solution-related-card {
  min-width: 0;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.solution-ppe-page .ppe-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-bottom: .8rem;
  border-radius: .7rem;
  color: #087CA1;
  background: #E6F4F8;
  font-size: 1.08rem;
}
.solution-ppe-page .ppe-focus-card:hover,
.solution-ppe-page .ppe-focus-card:focus-within,
.solution-ppe-page .ppe-integration-card:hover,
.solution-ppe-page .ppe-integration-card:focus-within,
.solution-ppe-page .solution-related-card:hover,
.solution-ppe-page .solution-related-card:focus-visible {
  transform: translateY(-3px);
  border-color: #78BFD2;
  box-shadow: 0 12px 26px rgba(8,126,172,.12);
  background: rgba(255,255,255,.9);
}
.solution-ppe-page .solution-related-card { display: block; text-decoration: none; color: inherit; }
.solution-ppe-page .solution-related-card p { color: #41536B; }
.solution-ppe-page .ppe-validation-block {
  max-width: 1000px;
  padding-left: 1.15rem;
  border-left: 3px solid #8DA4B8;
}
@media (max-width: 900px) {
  .solution-ppe-page .ppe-overview-grid { grid-template-columns: minmax(0, 1fr); }
  .solution-ppe-page .ppe-integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solution-ppe-page .ppe-example-figure { max-width: 480px; width: 100%; margin-inline: auto; }
  .solution-ppe-page .ppe-example-figure img { height: min(78vw, 455px); min-height: 350px; }
}
@media (max-width: 700px) {
  .solution-ppe-page .ppe-example-figure { padding: .65rem; }
  .solution-ppe-page .ppe-integration-grid { grid-template-columns: minmax(0, 1fr); }
  .solution-ppe-page .ppe-example-figure img { height: min(105vw, 430px); min-height: 310px; }
  .solution-ppe-page .ppe-validation-block { padding-left: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .solution-ppe-page .ppe-focus-card,
  .solution-ppe-page .ppe-integration-card,
  .solution-ppe-page .solution-related-card { transition: none; }
  .solution-ppe-page .ppe-focus-card:hover,
  .solution-ppe-page .ppe-integration-card:hover,
  .solution-ppe-page .solution-related-card:hover { transform: none; }
}