/* "Why this beats a spreadsheet" premium pass (note 16) */
.diffs-v2{border:0;gap:18px;margin-top:8px}
.diffs-v2 .diff{position:relative;padding:28px 28px 34px;border:1px solid #26221e!important;border-radius:20px;background:linear-gradient(180deg,#171512,#12100e);transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .45s;overflow:hidden}
.diffs-v2 .diff::before{content:"";position:absolute;left:28px;right:28px;top:0;height:2px;background:#E8574A;transform:scaleX(var(--dl,1));transform-origin:left;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.diffs-v2 .diff:hover{transform:translateY(-4px);border-color:#3a342d!important;box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
.diffs-v2 .diff-marker{font-size:11.5px;margin:22px 0 14px}
.diffs-v2 .diff-ttl{font-size:28px;line-height:1.14;margin-bottom:14px}
.diffs-v2 .diff-desc{font-size:16px;line-height:1.6;color:#cfc7b8}

.diff-vis{height:96px;border-radius:14px;background:#0E0D0B;border:1px solid #221f1b;display:flex;align-items:center;justify-content:center;gap:16px;position:relative;overflow:hidden}
.dv-dots{display:grid;grid-template-columns:repeat(6,8px);gap:6px}
.dv-dots i{width:8px;height:8px;border-radius:50%;background:#3a352e}
.dv-arrow{width:34px;height:1.5px;background:linear-gradient(90deg,#3a352e,#E8574A);position:relative}
.dv-arrow::after{content:"";position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left:6px solid #E8574A;border-right:0}
.dv-one i{display:block;width:18px;height:18px;border-radius:50%;background:#E8574A;box-shadow:0 0 0 6px rgba(232,87,74,.16),0 0 24px rgba(232,87,74,.5)}
.dv-time{font:400 26px/1 Fraunces,Georgia,serif;color:#F5F1EA;letter-spacing:-.02em}
.dv-scan{display:flex;gap:5px;align-items:flex-end;height:28px}
.dv-scan i{width:5px;border-radius:3px;background:#E8574A;animation:dv-bar 1.2s ease-in-out infinite}
.dv-scan i:nth-child(1){height:40%}.dv-scan i:nth-child(2){height:100%;animation-delay:.2s}.dv-scan i:nth-child(3){height:65%;animation-delay:.4s}
@keyframes dv-bar{50%{transform:scaleY(.45)}}
.dv-label{display:flex;align-items:center;gap:7px;font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#a49d90}
.dv-label b{width:6px;height:6px;border-radius:50%;background:#6fcf97;box-shadow:0 0 0 3px rgba(111,207,151,.18)}
.dv-score{flex-direction:column;gap:0;padding-top:10px}
.dv-score svg{width:120px;height:64px;overflow:visible}
.dv-score path{fill:none;stroke-width:8;stroke-linecap:round}
.dv-track{stroke:#2a2622}
.dv-fill{stroke:#E8574A;stroke-dasharray:100;stroke-dashoffset:var(--dv-off,36);transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1)}
.dv-num{margin-top:-30px;font:400 24px/1 Fraunces,Georgia,serif;color:#F5F1EA}
.dv-num small{font:600 10px 'JetBrains Mono',monospace;color:#6b655b;margin-left:2px}

/* entrance (JS adds .is-armed only when motion is allowed) */
.diffs-v2.is-armed .diff{--dl:0}
.diffs-v2.is-armed .dv-fill{--dv-off:100}
.diffs-v2.is-armed .dv-dots i{opacity:.25}
.diffs-v2 .dv-dots i{transition:opacity .5s}
.diffs-v2 .diff.is-in{--dl:1}
.diffs-v2 .diff.is-in .dv-fill{--dv-off:36}
.diffs-v2 .diff.is-in .dv-dots i{opacity:1}

@media (max-width:860px){
  .diffs-v2{grid-template-columns:1fr!important;gap:14px}
  .diffs-v2 .diff{border-bottom:1px solid #26221e!important;padding:22px 22px 26px}
  .diffs-v2 .diff-ttl{font-size:24px}
  .diffs-v2 .diff-desc{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.dv-scan i{animation:none}.diffs-v2 .diff,.diffs-v2 .diff::before,.dv-fill{transition:none}}
