/* Evidence page: three sourced numbers on a dark card, in the pitch deck's layout.
   Revenue, retention, customer acquisition. Every figure carries its source. */
.evidence.block { background: #0b0f1a; color: #eef1f7; }
.evidence__eyebrow { color: #8fb0ff; margin-bottom: 16px; }
.evidence__title { font-size: var(--fs-l); max-width: 20ch; color: #fff; text-wrap: balance; }
.evidence__title em { color: #8fb0ff; }

.evidence__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 6vh, 64px); }
.ev { display: flex; flex-direction: column; padding: 0 clamp(20px, 2.6vw, 40px); }
.ev:first-child { padding-left: 0; }
.ev + .ev { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.12); }
.ev__tag { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: rgba(238, 241, 247, 0.6); }
.ev__num { margin: 14px 0 0; font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: clamp(64px, 7.2vw, 112px); line-height: 0.95; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.ev__unit { font-size: 0.55em; margin-left: 2px; color: #8fb0ff; }
.ev__text { margin: 16px 0 0; max-width: none; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.45; font-weight: 600; color: #eef1f7; }
.ev__note { margin: 14px 0 0; font-size: 14px; color: rgba(238, 241, 247, 0.6); }
.ev__src { margin: auto 0 0; padding-top: 22px; font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 15px; color: #fff; }

/* Deloitte's comparison: spending index 100 vs 140. */
.ev__bars { margin-top: 18px; display: grid; gap: 8px; max-width: 340px; }
.ev__bar { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 10px; font-size: 12px; color: rgba(238, 241, 247, 0.6); }
.ev__bar i { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); transform-origin: left; transform: scaleX(var(--w)); transition: transform 900ms var(--ease); }
.ev__bar--on i { background: #3d74ff; }
.ev__bar b { font-family: var(--mono); font-weight: 500; text-align: right; color: #eef1f7; }
.js .evidence:not(.is-counted) .ev__bar i { transform: scaleX(0); }

.evidence__sources { margin: clamp(28px, 4vh, 44px) 0 0; max-width: 110ch; font-size: 11.5px; line-height: 1.5; color: rgba(238, 241, 247, 0.45); }

@media (max-width: 900px) {
  .evidence__grid { grid-template-columns: 1fr; gap: 36px; }
  .ev, .ev:first-child { padding: 0; box-shadow: none; }
  .ev + .ev { padding-top: 32px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
}
@media (prefers-reduced-motion: reduce) {
  .js .evidence:not(.is-counted) .ev__bar i { transform: scaleX(var(--w)); }
  .ev__bar i { transition: none; }
}
/* Each card: tag, number, a small graphic, the source. The graphic builds
   through --v (0 to 1): jelly.js drives it from the scroll; without it, it shows finished. */
/* Clean cards: label, number, graphic, source. The statements stay for screen readers only. */
.ev__num { margin-bottom: 26px; }
.ev__viz { --on: #3d74ff; --off: rgba(255, 255, 255, 0.16); margin-top: auto; height: 72px; align-content: center; }
.ev__viz + .ev__src { margin-top: 0; }
.ev__bars { max-width: 360px; }
.ev__bar { grid-template-columns: 112px 1fr 44px; }
.ev__bar i { background: var(--off); transform: scaleX(calc(var(--w) * var(--v, 1))); }
.ev__bar--on i { background: var(--on); }
.ev__dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 5px; max-width: 300px; }
.ev__dots i { position: relative; aspect-ratio: 1; border-radius: 50%; background: var(--off); }
/* A dot lights once --v passes its place in the ripple (--k), popping from small to full. */
.ev__dots i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--on);
  opacity: clamp(0, calc((var(--v, 1) - var(--k, 2)) * 14), 1);
  transform: scale(clamp(0.3, calc(0.3 + (var(--v, 1) - var(--k, 2)) * 9), 1)); }
.ev__dots i.is-off::after { display: none; }

/* On the blue jelly the lit parts turn white; the scroll drives them, so no transitions. */
.jl-layer .ev__viz { --on: #fff; --off: rgba(255, 255, 255, 0.24); }
.jl-layer .ev__bar { color: rgba(255, 255, 255, 0.82); }
.jl-layer .ev__bar b { color: #fff; }
.jl-layer .ev__bar i { transition: none; }

/* Sources sit at the bottom of the card, on the content column. */
.evidence.block { position: relative; }
.evidence .evidence__sources, .jl-layer .evidence__sources { position: absolute; bottom: clamp(24px, 3.4vh, 36px); left: calc(max(var(--gutter), (100vw - var(--wrap)) / 2 + var(--gutter)) - var(--inset)); right: calc(max(var(--gutter), (100vw - var(--wrap)) / 2 + var(--gutter)) - var(--inset)); margin: 0; max-width: none; }

/* Short laptop screens (720–820px tall): tighter numbers and spacing so the page still fits. */
@media (min-width: 901px) and (max-height: 820px) {
  .ev__num { margin-top: 8px; font-size: clamp(56px, min(7.2vw, 10vh), 112px); }
  .ev__num { margin-bottom: 16px; }
  .ev__src { padding-top: 14px; }
  .evidence__grid { margin-top: clamp(20px, 3.5vh, 40px); }
}