/* Voor/na-vergelijker: met de muis (of vinger) over de site schuift de gouden lijn mee. Links nieuw, rechts oud. */
.cmp { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cmp__frame {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border-hairline); background: var(--surface-card);
  box-shadow: var(--shadow-md); transition: box-shadow var(--dur-base) var(--ease-standard);
}
.cmp__frame:focus-within { box-shadow: var(--focus-ring); }
.cmp__chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; background: var(--cream-300); border-bottom: 1px solid var(--border-hairline);
}
.cmp__chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--cream-500); }
.cmp__chrome em { margin-left: 8px; flex: 1; min-width: 0; font: var(--type-mono); font-size: 10px; font-style: normal; color: var(--text-muted); overflow: hidden; white-space: nowrap; }
.cmp__pill {
  flex: none; font: 600 10px/1 var(--font-mono, "JetBrains Mono", monospace); letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 999px; background: rgba(224,104,94,.16); color: #B0443B; transition: background-color .2s, color .2s;
}
.cmp__pill.is-new { background: rgba(207,148,28,.2); color: var(--gold-600); }
.cmp__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cmp__view img, .cmp__new img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
.cmp__new { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.cmp__line {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
  background: var(--gold-500, #CF941C); box-shadow: 0 0 20px 3px rgba(207,148,28,.5); pointer-events: none;
}
.cmp__line b {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex;
  font: 600 11px/1 var(--font-mono, "JetBrains Mono", monospace); letter-spacing: .1em; white-space: nowrap;
}
.cmp__line b span { padding: 7px 9px; background: var(--gold-500, #CF941C); color: var(--navy-900); }
.cmp__line b span + span { background: var(--navy-900); color: var(--cream-100); }
.cmp__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; pointer-events: none; }
.cmp__hint { font: var(--type-mono); font-size: 11px; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .cmp__frame, .cmp__pill { transition: none; } }