/* A visual entry to ABDS's own case study, scoped to the website service page. */
.website-proof .section-head > div { max-width: 760px; }
.website-proof .section-lede { max-width: 650px; }
.website-proof-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}
.website-proof-figure {
  margin: 0;
  padding: clamp(14px, 2vw, 24px);
  border: 1px solid #cdd5e1;
  border-radius: 18px;
  background: #e5eaf2;
}
.website-proof-figure picture { display: block; }
.website-proof-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  border: 1px solid #17203726;
  border-radius: 9px;
  box-shadow: 0 8px 24px #17203712;
}
.website-proof-figure figcaption {
  margin-top: 14px;
  color: #4d586b;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
.website-proof-mobile-caption { display: none; }
.website-proof-points article + article {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid #17203726;
}
.website-proof-points h3 {
  margin: 0 0 9px;
  color: #111927;
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.3;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.website-proof-points p {
  margin: 0;
  color: #485367;
  font-size: 16px;
  line-height: 1.7;
}
.website-proof-details > .button { margin-top: 28px; }
@media (max-width: 900px) {
  .website-proof-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .website-proof-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .website-proof-points article + article { margin: 0; padding: 0; border: 0; }
  .website-proof-details > .button { display: flex; width: fit-content; margin-inline: auto; }
}
@media (max-width: 600px) {
  .website-proof-figure { padding: 20px 16px 16px; }
  .website-proof-figure picture { width: min(100%, 260px); margin-inline: auto; }
  .website-proof-figure img { aspect-ratio: 195 / 367; }
  .website-proof-desktop-caption { display: none; }
  .website-proof-mobile-caption { display: inline; }
  .website-proof-points { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .website-proof-points article + article { margin-top: 20px; padding-top: 20px; border-top: 1px solid #17203726; }
  .website-proof-details > .button { width: 100%; text-align: center; }
}