.ld-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}

.ld-hero { text-align: left; }
.ld-hero h1 { margin-inline: 0; font-size: clamp(2rem, 4.7vw, 4.25rem); }
.ld-hero .cx-actions { justify-content: flex-start; }

.ld-image-slot {
  aspect-ratio: 4 / 3;
  background: #fff;
  border: 1px solid #dce5df;
  border-radius: 16px;
}

.ld-format {
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
}

.ld-format .ld-image-slot {
  aspect-ratio: 16 / 9;
  border: 0;
  border-bottom: 1px solid #dce5df;
  border-radius: 0;
}

.ld-format-copy { padding: clamp(1rem, 2.8vw, 1.75rem); }
.ld-format-copy h3, .ld-chart h3 { margin-top: 0; }
.ld-source { color: #92391e; text-decoration: underline; text-underline-offset: .16em; }
.ld-chart { margin: 0; border-radius: 16px; }
.ld-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .875rem; }
.ld-legend span::before {
  content: '';
  display: inline-block;
  inline-size: .65rem;
  block-size: .65rem;
  margin-inline-end: .4rem;
  border-radius: 50%;
  background: #759386;
}
.ld-legend span:last-child::before { background: #c45330; }
.ld-chart-group { margin-top: .9rem; }
.ld-chart-group h4 { margin: 0 0 .35rem; font: 600 .95rem/1.4 Inter, sans-serif; }
.ld-chart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2ch;
  align-items: center;
  gap: .65rem;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}
.ld-track { height: .55rem; border-radius: 999px; background: #e9efec; overflow: hidden; }
.ld-track span {
  display: block;
  width: var(--ld-score);
  height: 100%;
  border-radius: inherit;
  background: #759386;
  transform-origin: left;
}
.ld-chart-row:last-child .ld-track span { background: #c45330; }
.ld-chart figcaption { margin-top: 1.15rem; font-size: .875rem; color: #52685b; }

@media (max-width: 767px) {
  .ld-split, .ld-formats { grid-template-columns: minmax(0, 1fr); }
  .ld-hero { padding-top: 4.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .ld-formats.is-motion-active .ld-format {
    animation: ld-enter .55s calc(var(--ld-order) * .12s) ease-out both;
  }
  .ld-chart.is-motion-active .ld-track span { animation: ld-fill .85s ease-out both; }
  .ld-chart.is-motion-active .ld-chart-row:last-child .ld-track span { animation-delay: .18s; }
}

@keyframes ld-enter {
  from { opacity: .35; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ld-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}