.utility-proof {
  min-width: 0;
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid #dfd4e6;
  border-radius: 16px;
  color: #33243d;
  background: #f7f2fa;
  font-variant-numeric: tabular-nums;
}
.utility-proof > :first-child { margin-top: 0 }
.utility-proof > :last-child { margin-bottom: 0 }
.proof-meta, .proof-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  font: 600 13px/1.5 Manrope, sans-serif;
}
.proof-meta span, .proof-key { color: #66556f }
.proof-number { margin: 18px 0; font: 700 clamp(38px, 5vw, 62px)/1.1 Manrope, sans-serif; letter-spacing: -.055em }
.proof-number small { font: 550 17px/1.5 Manrope, sans-serif; letter-spacing: 0 }
.proof-budget { height: 22px; border-radius: 5px; overflow: hidden; background: #c9aadf }
.proof-budget i { display: block; width: 94.3%; height: 100%; background: #51395f }
.proof-key { margin-top: 10px }
.utility-proof blockquote { margin: 0; padding: 0 0 0 16px; border-inline-start: 3px solid #ad83c6; font: 600 clamp(18px, 2.1vw, 25px)/1.4 Manrope, sans-serif }
.proof-counter { margin-top: 20px; display: grid; gap: 12px }
.proof-counter label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px; font-size: 13px }
.proof-counter meter { width: 100%; height: 12px; accent-color: #75508b }
.proof-counter meter::-webkit-meter-optimum-value { background: #75508b }
.proof-swatch { display: grid; gap: 6px; border-radius: 10px; padding: clamp(17px, 3vw, 30px); background: #f5e4ec; color: #522643 }
.proof-swatch strong { font: 700 clamp(24px, 3.4vw, 42px)/1.1 Manrope, sans-serif; letter-spacing: -.05em }
.proof-swatch span { font-size: 15px }
.proof-measures { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 16px 0 0 }
.proof-measures dt, .proof-frames small, .proof-table caption, .proof-credit { color: #65536e; font-size: 12px }
.proof-measures dd { font-size: 15px; font-weight: 700; margin: 3px 0 0 }
.proof-code { margin: 12px 0; padding: 12px 16px; background: #32223a; color: #f8f1fe; border-radius: 8px; font: 14px/1.7 ui-monospace, monospace; white-space: pre-wrap }
.proof-table { border-collapse: collapse; width: 100%; text-align: left; font-size: 13px }
.proof-table caption { text-align: left; padding-bottom: 5px }
.proof-table th, .proof-table td { padding: 7px 9px; border-bottom: 1px solid #ddd3e3 }
.proof-table th { background: #eae0ef }
.proof-snippet { margin: 12px 0; padding: 18px; border-radius: 9px; background: #fff }
.proof-snippet strong { font-size: 20px; line-height: 1.3; color: #493963 }
.utility-proof .proof-snippet p { color: #574e5d; font-size: 14px }
.proof-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; text-align: center }
.proof-frames > div { display: grid; justify-items: center; grid-template-rows: 130px auto auto; align-content: end; gap: 4px }
.proof-frames i { align-self: end; border: 2px solid #9471a9; background: #e3d3ed; border-radius: 5px }
.proof-frames b { font-size: 13px; margin-top: 5px }
.proof-url { display: block; margin-top: 15px; line-height: 2; overflow-wrap: anywhere; font-size: 15px }
.proof-url mark { padding: 3px 0; background: #e5d6ef; color: #483253; box-decoration-break: clone }
.proof-thumbs { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 12px }
.proof-thumbs figure { margin: 0; min-width: 0 }
.proof-thumbs img { display: block; width: 100%; height: auto; border-radius: 6px; background: #211b25 }
.proof-thumbs figcaption { margin-top: 6px; color: #55425f; font-size: 13px; font-weight: 650 }
.proof-credit { display: block; margin-top: 12px }
.proof-credit a { text-decoration: underline; text-underline-offset: 2px }
@media (max-width: 520px) {
  .proof-frames > div { grid-template-rows: 120px auto auto }
  .proof-measures { gap: 9px 15px }
}

.case-example-art {display:block;width:100%;height:clamp(132px,17vw,205px);object-fit:cover;object-position:center 43%;margin:0 0 16px;border-radius:9px}
.proof-frames i {background:#e3d3ed url('/tools/_studio/inspirations/float-in-hand.webp') center/cover no-repeat}

.utility-proof .case-example-art[src$="/home-tour.webp"] { object-position: center 79% }
.utility-proof .case-example-art[src$="/behind-the-shoot.webp"] { object-position: center 21% }
.utility-proof .case-example-art[src$="/style-spin.webp"] { object-position: center 25% }