/* Owned by @dito/theme. App and portable reviews consume these exact rules. */
.dito-distinction { box-sizing:border-box; color:var(--dito-color-ink,#111); background:#fff; border:1px solid var(--dito-color-border,#ddd); border-radius:0; font:16px/1.5 var(--dito-font-body,Arial,sans-serif); margin:16px 0; min-width:0; container-type:inline-size; }
.dito-distinction *, .dito-distinction *::before, .dito-distinction *::after { box-sizing:border-box; }
.dito-distinction .dito-distinction__label { margin:0; padding:12px 20px; color:#fff; background:var(--dito-color-ink,#111); font:700 13px/1.5 var(--dito-font-body,Arial,sans-serif); letter-spacing:.04em; text-transform:uppercase; }
.dito-distinction .dito-distinction__body { padding:clamp(18px,3vw,40px); }
.dito-distinction .dito-distinction__note { margin:0; padding:12px 20px; font:14px/1.5 var(--dito-font-body,Arial,sans-serif); color:#555; background:#f5f5f3; }
.dito-distinction .dito-distinction__context { margin:0; color:#333; font:clamp(18px,2.2vw,25px)/1.5 var(--dito-font-display,Georgia,serif); white-space:pre-wrap; overflow-wrap:anywhere; text-align:center; }
.dito-distinction .dito-distinction__values { display:flex; align-items:center; justify-content:center; gap:clamp(10px,2.5vw,28px); margin:20px 0; min-width:0; }
.dito-distinction .dito-distinction__value { min-width:0; max-width:46%; text-align:center; }
.dito-distinction .dito-distinction__side { display:block; margin:0 0 10px; color:#555; font:12px/1.4 var(--dito-font-body,Arial,sans-serif); }
.dito-distinction .dito-distinction__before, .dito-distinction .dito-distinction__after { display:inline; padding:0 .1em; white-space:pre-wrap; overflow-wrap:anywhere; font:clamp(38px,6vw,86px)/1.2 var(--dito-font-display,Georgia,serif); }
.dito-distinction .dito-distinction__before { color:#737373; background:#ededed; text-decoration:line-through; text-decoration-color:var(--dito-color-signal-red,#d92d20); text-decoration-thickness:3px; }
.dito-distinction .dito-distinction__after { color:var(--dito-color-signal-red,#d92d20); background:#ffe4df; text-decoration:none; }
.dito-distinction .dito-distinction__arrow { color:var(--dito-color-signal-red,#d92d20); font:32px/1 var(--dito-font-body,Arial,sans-serif); flex:0 0 auto; }
.dito-distinction .dito-distinction__values[data-long] { align-items:flex-start; }
.dito-distinction .dito-distinction__values[data-long] .dito-distinction__before, .dito-distinction .dito-distinction__values[data-long] .dito-distinction__after { font-size:clamp(24px,3vw,36px); }
.dito-distinction .dito-distinction__images { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.dito-distinction .dito-distinction__image { margin:0; min-width:0; }
.dito-distinction .dito-distinction__viewport { position:relative; overflow:hidden; background:#fff; border:1px solid #ddd; }
.dito-distinction .dito-distinction__source { display:block; width:100%; max-width:none; height:auto; margin:0; }
.dito-distinction .dito-distinction__viewport[data-region] .dito-distinction__source { position:absolute; }
@container (max-width:360px) {
  .dito-distinction .dito-distinction__values { flex-direction:column; align-items:stretch; }
  .dito-distinction .dito-distinction__value { max-width:100%; }
  .dito-distinction .dito-distinction__arrow { transform:rotate(90deg); text-align:center; }
}
@media(max-width:600px) {
  .dito-distinction .dito-distinction__body { padding:18px 12px; }
  .dito-distinction .dito-distinction__values { gap:10px; }
  .dito-distinction .dito-distinction__before, .dito-distinction .dito-distinction__after { font-size:clamp(28px,8vw,48px); }
  .dito-distinction .dito-distinction__images { gap:10px; }
  .dito-distinction .dito-distinction__values[data-long] { flex-direction:column; align-items:stretch; }
  .dito-distinction .dito-distinction__values[data-long] .dito-distinction__value { max-width:100%; }
  .dito-distinction .dito-distinction__values[data-long] .dito-distinction__arrow { transform:rotate(90deg); text-align:center; }
}
/* Redline motion from the live marketing site (2026-09-25 capture): the strike draws through the old wording, then
   the new wording highlights. Text is inline and may wrap, so only colour moves; source images never move. */
@keyframes dito-old-word { from { text-decoration-color:transparent; } }
@keyframes dito-change-highlight { from { background-color:transparent; } 45% { background-color:#ffb4a5; } }
@media (prefers-reduced-motion:no-preference) {
  .dito-distinction .dito-distinction__before { animation:dito-old-word var(--dito-motion-old-word,700ms) ease both; }
  .dito-distinction .dito-distinction__after { animation:dito-change-highlight var(--dito-motion-change-highlight,900ms) ease calc(var(--dito-motion-old-word,700ms) * .35) both; }
}
@media print { .dito-distinction .dito-distinction__before, .dito-distinction .dito-distinction__after { animation:none; } }

/* Compact findings retain the same evidence hierarchy at report/sidebar width. */
.dito-distinction[data-density="compact"] { margin:10px 0; }
.dito-distinction[data-density="compact"] .dito-distinction__body { padding:16px; }
.dito-distinction[data-density="compact"] .dito-distinction__label { padding:9px 14px; }
.dito-distinction[data-density="compact"] .dito-distinction__values { margin:8px 0; gap:12px; }
.dito-distinction[data-density="compact"] :is(.dito-distinction__before,.dito-distinction__after) { font-size:clamp(25px,6cqw,42px); }
.dito-distinction[data-density="compact"] .dito-distinction__context { font-size:18px; }

@container (max-width:360px) {
  .dito-distinction .dito-distinction__images { grid-template-columns:minmax(0,1fr); }
}