/* Table row 4: preserve the tall pill-track comparison composition.
   No numerical data: the intentionally schematic heights are disclosed in HTML. */
.proof-section {
  padding: 80px 0 120px;
  background: #fff;
  color: var(--ink, #000);
}
.proof-inner {
  width: min(1130px, calc(100% - 64px));
  margin-inline: auto;
}
.proof-heading {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}
.proof-eyebrow {
  margin: 0 0 22px;
  font: 400 14px/1.5 var(--font-body, Inter, Arial, sans-serif);
  letter-spacing: .01em;
}
.proof-heading h2 {
  margin: 0;
  font: 700 clamp(34px, 4.1vw, 52px)/1.12 var(--font-display, Poppins, Arial, sans-serif);
  letter-spacing: -.025em;
}
.proof-intro {
  max-width: 570px;
  margin: 24px auto 0;
  color: #666;
  font: 400 18px/1.55 var(--font-body, Inter, Arial, sans-serif);
  letter-spacing: -.025em;
}
.proof-figure {
  margin: 32px auto 0;
  max-width: 900px;
}
.proof-preview-label {
  margin: 0 auto 78px;
  color: #737373;
  font: 400 12px/1.5 var(--font-body, Inter, Arial, sans-serif);
  text-align: center;
}
.proof-chart {
  --proof-track-height: 500px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
  isolation: isolate;
}
.proof-column {
  --proof-height: 35%;
  --proof-bar-color: #404040;
  --proof-bar-ink: #fff;
  position: relative;
  min-width: 0;
}
.proof-column-ads { --proof-height: 25%; }
.proof-column-social { --proof-height: 37%; }
.proof-column-dialogue {
  --proof-height: 98%;
  --proof-bar-color: var(--orange, #f39200);
  --proof-bar-ink: #000;
}
.proof-track {
  position: relative;
  height: var(--proof-track-height);
  overflow: hidden;
  border-radius: 40px;
  background-color: #fff;
  background-image: repeating-linear-gradient(135deg, #f4f4f4 0 4px, #fff 4px 8px);
}
.proof-bar {
  position: absolute;
  inset: auto 0 0;
  height: var(--proof-height);
  padding: 12px;
  border-radius: 40px;
  background: var(--proof-bar-color);
  color: var(--proof-bar-ink);
}
.proof-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  border-radius: 100px;
  background: rgb(255 255 255 / 16%);
  font: 400 16px/1.2 var(--font-body, Inter, Arial, sans-serif);
  letter-spacing: -.02em;
}
.proof-bar-label {
  margin: 15px 0 0;
  color: #737373;
  font: 400 16px/1.35 var(--font-body, Inter, Arial, sans-serif);
  letter-spacing: -.025em;
  text-align: center;
}
.proof-column-dialogue .proof-bar-label { color: #000; }
.proof-marker {
  position: absolute;
  z-index: 2;
  top: calc(var(--proof-track-height) * .02 - 55px);
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  pointer-events: none;
}
.proof-marker-label {
  position: relative;
  display: block;
  border-radius: 12px;
  padding: 8px 12px;
  background: var(--lemon, #e6e51e);
  box-shadow: inset 0 2px 3px #ffffff45, inset 0 -3px 5px #00000018;
  color: #000;
  font: 400 13px/1.3 var(--font-body, Inter, Arial, sans-serif);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.proof-marker-label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  border-bottom-right-radius: 3px;
  background: var(--lemon, #e6e51e);
  box-shadow: inset -1px -1px 2px #0000000c;
  transform: translateX(-50%) rotate(45deg);
}
.proof-marker-dot {
  display: block;
  width: 14px;
  height: 14px;
  margin: 13px auto 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--orange, #f39200);
}
.proof-caption {
  max-width: 640px;
  margin: 30px auto 0;
  color: #737373;
  font: 400 12px/1.55 var(--font-body, Inter, Arial, sans-serif);
  letter-spacing: -.015em;
  text-align: center;
}
.proof-screenreader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.proof-animate-ready:not(.proof-is-visible) .proof-bar {
  opacity: 0;
  transform: translateY(100%);
}
.proof-animate-ready:not(.proof-is-visible) .proof-marker-label,
.proof-animate-ready:not(.proof-is-visible) .proof-marker-dot { opacity: 0; }
@media (max-width: 900px) {
  .proof-section { padding-block: 64px 96px; }
  .proof-chart { --proof-track-height: 460px; }
  .proof-track, .proof-bar { border-radius: 32px; }
  .proof-bar { padding: 10px; }
  .proof-value { font-size: 14px; }
}
@media (max-width: 600px) {
  .proof-section { padding-block: 52px 84px; }
  .proof-inner { width: calc(100% - 40px); }
  .proof-heading h2 { font-size: clamp(28px, 8vw, 34px); }
  .proof-eyebrow { margin-bottom: 19px; font-size: 12px; }
  .proof-intro { margin-top: 21px; font-size: 16px; }
  .proof-figure { margin-top: 25px; }
  .proof-preview-label { margin-bottom: 62px; font-size: 11px; }
  .proof-chart { --proof-track-height: 350px; gap: 6px; }
  .proof-track, .proof-bar { border-radius: 24px; }
  .proof-bar { padding: 6px; }
  .proof-value { min-height: 40px; font-size: clamp(8px, 2.7vw, 12px); letter-spacing: -.035em; }
  .proof-bar-label { margin-top: 12px; font-size: 12px; line-height: 1.35; hyphens: manual; }
  .proof-marker { top: calc(var(--proof-track-height) * .02 - 47px); }
  .proof-marker-label { padding: 7px 9px; border-radius: 10px; font-size: 11px; }
  .proof-marker-dot { width: 12px; height: 12px; margin-top: 10px; border-width: 2px; }
  .proof-caption { margin-top: 24px; font-size: 11px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .proof-column, .proof-bar, .proof-marker-label, .proof-marker-dot {
    animation: none !important;
    transform: none !important;
  }
}