/*
 * Animated conversion-rate uplift chart for case-study pages (pilot).
 * Replaces the static /images/AI_1.svg on the Werbewirkung / Advertising-Impact
 * case study with a DOM bar chart that grows on scroll. Rebuilds the original
 * figure: a labelled Y axis (Conversion Rate), both CR values above their bars,
 * and the uplift as a centred pill between the two bars.
 *
 * Static-safe: bar heights are inline (--h) and fully visible without JS.
 * The scroll animation only ADDS a collapse->grow transform on top, and is
 * disabled for prefers-reduced-motion. So the resting state == the old image.
 *
 * Colours are the canonical Cyreen brand hexes (baseline grey / treatment red),
 * matching the existing weather case-study chart. Kept here (not Tailwind @theme)
 * because this is a static public asset injected into a raw Webflow snapshot,
 * same pattern as /case-study-tooltips.js + snapshot-overrides.css.
 */
.cap-uplift {
  --cap-base: #62626e; /* ohne Werbekontakt / without C.A.P. */
  --cap-treat: #f04b55; /* mit Werbekontakt / with C.A.P. */
  --cap-ink: #1e1e28;
  --cap-grid: #e6e6e6;
  /* Hover glow, colour-matched to the element under the cursor: the grey control
     series glows grey, the red C.A.P. series glows red (threads fn0njZyp3Fwb,
     fsmRmiM7YxVV, LX7VrbDae-VO — see the note at the generic bar-hover rule).
     Defined once per colour so bars and pills cannot drift apart again. */
  --cap-glow-red: 0 12px 30px rgba(240, 75, 85, 0.6);
  --cap-glow-grey: 0 12px 30px rgba(98, 98, 110, 0.5);
  --cap-glow-pill-red: 0 8px 22px rgba(240, 75, 85, 0.55);
  --cap-glow-pill-grey: 0 8px 22px rgba(98, 98, 110, 0.42);
  /* Fallback for bars with an inline colour that set no --cap-bar-glow. */
  --cap-bar-glow: var(--cap-base);
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 14px 0 4px;
}

/* Rotated Y-axis title. Aligned to the chart top and given the chart's height
   (per variant below), with the text centred inside, so it sits vertically
   centred on the plot rather than on the whole card (chart + labels + legend). */
.cap-uplift__axis-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: flex-start;
  display: grid;
  place-content: center;
  height: clamp(150px, 22vw, 200px);
  font-family: 'Graphik', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 2vw, 14px);
  color: var(--cap-ink);
  white-space: nowrap;
}
.cap-uplift--sales .cap-uplift__axis-title {
  height: clamp(240px, 34vw, 320px);
}
.cap-uplift--ref .cap-uplift__axis-title {
  height: clamp(190px, 27vw, 250px);
}
.cap-uplift--grouped .cap-uplift__axis-title {
  height: clamp(200px, 28vw, 270px);
}
.cap-uplift--bars .cap-uplift__axis-title {
  height: clamp(190px, 27vw, 250px);
}

.cap-uplift__main {
  flex: 1;
  min-width: 0;
}

/* Plot area: L-shaped axis (left + bottom), bars anchored to the baseline */
.cap-uplift__chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: clamp(18px, 6vw, 36px);
  height: clamp(150px, 22vw, 200px);
  padding: 0 clamp(8px, 3vw, 16px);
  border-left: 2px solid var(--cap-ink);
  border-bottom: 2px solid var(--cap-ink);
}

.cap-uplift__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

/* CR value above each bar */
.cap-uplift__val {
  font-family: 'Graphik', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 2.3vw, 18px);
  line-height: 1;
  color: var(--cap-ink);
  margin-bottom: 9px;
  font-variant-numeric: tabular-nums;
}

/* Top corners only, never the baseline (thread 00CeCJKSB4Ru). 6px was too subtle
   to read as rounded at this bar width, which is why the weather bars came back
   as "still not round cornered" (fn0njZyp3Fwb). The agreed look on the old
   weather chart was a 19px top radius, but those bars were wider; 12px keeps the
   same visual weight on a 42-58px bar. Shared by every chart variant so the
   rounding stays identical across the case studies, as asked in 00CeCJKSB4Ru. */
.cap-uplift__bar {
  width: clamp(42px, 10vw, 58px);
  height: var(--h, 100%);
  border-radius: 12px 12px 0 0;
  transform-origin: bottom center;
}
.cap-uplift__bar--base {
  background: var(--cap-base);
}
.cap-uplift__bar--cap {
  background: var(--cap-treat);
}

/* Animated curved arrow between the two bars (advertising-impact, thread
   fISN6PzDKSSy). Decorative overlay spanning the gap between the columns; the
   +xxx% pill sits above its apex. Drawn in on scroll-in via stroke-dashoffset,
   only when JS marks the chart (data-animate) and motion is allowed; otherwise
   it is shown static so no-JS / reduced-motion still see the arrow.

   The apex was raised too high in the first version and ran into the pill, so
   the curve's control points were lowered from y=6 to y=26 in the path (see
   case-study-uplift.ts). At y=18 the gap was only 5px, which does not survive a
   different viewport or font size. Measure the clearance between the pill's
   bottom and the path bbox again if the pill's `top` or the arrow's
   `top`/`height` ever change. */
.cap-uplift__arrow {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 4%;
  height: 44%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.cap-uplift__arrow-path {
  stroke-dasharray: 1;
}
.cap-uplift[data-animate='on'] .cap-uplift__arrow {
  opacity: 0;
}
.cap-uplift[data-animate='on'] .cap-uplift__arrow-path {
  stroke-dashoffset: 1;
}
.cap-uplift[data-animate='on'].is-in .cap-uplift__arrow {
  opacity: 1;
  transition: opacity 0.3s ease 0.55s;
}
.cap-uplift[data-animate='on'].is-in .cap-uplift__arrow-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s ease 0.55s;
}
@media (prefers-reduced-motion: reduce) {
  .cap-uplift[data-animate='on'] .cap-uplift__arrow {
    opacity: 1;
  }
  .cap-uplift[data-animate='on'] .cap-uplift__arrow-path {
    stroke-dashoffset: 0;
  }
}

/* Uplift pill, centred between the two bars */
.cap-uplift__pill {
  position: absolute;
  left: 50%;
  top: 7%;
  z-index: 2;
  transform: translate(-50%, -50%);
  background: var(--cap-treat);
  color: #fff;
  font-family: 'Graphik', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(13px, 2.1vw, 16px);
  line-height: 1;
  padding: 7px 13px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(240, 75, 85, 0.28);
  font-variant-numeric: tabular-nums;
}

/* Category labels below the X axis, aligned with the bars */
.cap-uplift__cats {
  display: flex;
  justify-content: space-around;
  gap: clamp(18px, 6vw, 36px);
  padding: 0 clamp(8px, 3vw, 16px);
  margin-top: 10px;
}
.cap-uplift__cat {
  flex: 1;
  text-align: center;
  font-family: 'Graphik', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 2vw, 14px);
  color: var(--cap-base);
  white-space: nowrap;
}

/* ---- Animation layer (only when JS marks it AND motion is allowed) ---- */
.cap-uplift[data-animate='on'] .cap-uplift__bar {
  transform: scaleY(0);
  transition: transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cap-uplift[data-animate='on'] .cap-uplift__val,
.cap-uplift[data-animate='on'] .cap-uplift__pill {
  opacity: 0;
  transition:
    opacity 0.6s ease 0.4s,
    transform 0.6s ease 0.4s;
}
.cap-uplift[data-animate='on'] .cap-uplift__pill {
  transform: translate(-50%, -50%) scale(0.9);
}
.cap-uplift[data-animate='on'].is-in .cap-uplift__bar {
  transform: scaleY(1);
}
.cap-uplift[data-animate='on'].is-in .cap-uplift__val {
  opacity: 1;
}
.cap-uplift[data-animate='on'].is-in .cap-uplift__pill {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  /* No motion: never collapse the bars, never hide the labels. */
  .cap-uplift[data-animate='on'] .cap-uplift__bar {
    transform: none;
    transition: none;
  }
  .cap-uplift[data-animate='on'] .cap-uplift__val,
  .cap-uplift[data-animate='on'] .cap-uplift__pill {
    opacity: 1;
    transition: none;
  }
  .cap-uplift[data-animate='on'] .cap-uplift__pill {
    transform: translate(-50%, -50%);
  }
}

/* ---- Light tooltip: full sentence with coloured emphasis (em) ---- */
.cap-uplift-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  box-sizing: border-box;
  width: max-content;
  max-width: 300px;
  padding: 11px 15px;
  border-radius: 10px;
  background: #fff;
  color: #1e1e28;
  font-family: 'Graphik', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid #e6e6e6;
  box-shadow: 0 10px 30px rgba(30, 30, 40, 0.16);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
.cap-uplift-tip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.cap-uplift-tip em {
  font-style: normal;
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .cap-uplift-tip {
    transition: none;
    transform: none;
  }
}

/* ---- Interactive polish: hover glow + one-off reveal sheen ---- */
.cap-uplift__bar {
  transition:
    box-shadow 0.25s ease,
    filter 0.25s ease;
}

/* The chart is made of focusable divs (6 per chart) carrying the values for
   screen readers, and it had no focus or selection styling of its own. Clicking
   or dragging in it therefore painted the browser's own text-selection highlight
   over the labels and left a UA focus ring around the bar, which reads as "the
   text and the frame are selected, they are purple" (thread XXtp0yOgC3To). The
   numbers are decorative here, every value is already in the aria-label, so the
   chart opts out of selection and brings its own on-brand focus ring. Keyboard
   focus stays visible; a mouse click no longer leaves a ring behind. */
.cap-uplift {
  -webkit-user-select: none;
  user-select: none;
}
.cap-uplift :focus:not(:focus-visible) {
  outline: none;
}
.cap-uplift :focus-visible {
  outline: 2px solid var(--cap-treat);
  outline-offset: 3px;
}
.cap-uplift__bar--base:hover,
.cap-uplift__bar--base:focus-visible {
  filter: brightness(1.09);
  box-shadow: var(--cap-glow-grey);
}
.cap-uplift__bar--cap {
  position: relative;
  overflow: hidden;
}
.cap-uplift__bar--cap:hover,
.cap-uplift__bar--cap:focus-visible {
  filter: brightness(1.09);
  box-shadow: var(--cap-glow-red);
}
.cap-uplift__bar--cap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 70%
  );
  transform: translateX(-130%);
  pointer-events: none;
}
.cap-uplift.is-in .cap-uplift__bar--cap::after {
  animation: cap-sheen 1s ease 1.1s 1;
}
@keyframes cap-sheen {
  to {
    transform: translateX(130%);
  }
}
.cap-uplift__pill {
  transition: box-shadow 0.25s ease;
}
.cap-uplift__pill:hover,
.cap-uplift__pill:focus-visible {
  box-shadow: 0 8px 24px rgba(240, 75, 85, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .cap-uplift__bar,
  .cap-uplift__pill {
    transition: none;
  }
  .cap-uplift.is-in .cap-uplift__bar--cap::after {
    animation: none;
  }
}

/* ===== AI_2: Sales uplift as a single stacked column ===== */
.cap-uplift--sales .cap-uplift__chart {
  justify-content: center;
  height: clamp(240px, 34vw, 320px);
}
.cap-sales-stack {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}
.cap-uplift--sales .cap-sales-seg {
  width: clamp(96px, 28vw, 132px);
  height: var(--h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  transform-origin: bottom center;
  border-radius: 0;
}
.cap-uplift--sales .cap-sales-seg--base {
  background: #fff;
  color: var(--cap-ink);
}
.cap-uplift--sales .cap-sales-seg--cap {
  background: var(--cap-treat);
  color: #fff;
  border-radius: 6px 6px 0 0;
}
.cap-sales-main {
  font-family: 'Graphik', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 3.2vw, 26px);
  line-height: 1.05;
}
.cap-sales-sub {
  font-family: 'Graphik', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 2vw, 15px);
  line-height: 1.15;
  margin-top: 3px;
  padding: 0 8px;
}
.cap-uplift--sales[data-animate='on'] .cap-sales-main,
.cap-uplift--sales[data-animate='on'] .cap-sales-sub {
  opacity: 0;
}
.cap-uplift--sales[data-animate='on'].is-in .cap-sales-seg--base .cap-sales-main,
.cap-uplift--sales[data-animate='on'].is-in .cap-sales-seg--base .cap-sales-sub {
  opacity: 1;
  transition: opacity 0.5s ease 0.6s;
}
.cap-uplift--sales[data-animate='on'].is-in .cap-sales-seg--cap .cap-sales-main,
.cap-uplift--sales[data-animate='on'].is-in .cap-sales-seg--cap .cap-sales-sub {
  opacity: 1;
  transition: opacity 0.5s ease 1.45s;
}
.cap-uplift--sales .cap-sales-seg--base:hover,
.cap-uplift--sales .cap-sales-seg--base:focus-visible {
  box-shadow: 0 10px 24px rgba(30, 30, 40, 0.14);
}
.cap-uplift--sales .cap-sales-seg--cap:hover,
.cap-uplift--sales .cap-sales-seg--cap:focus-visible {
  filter: brightness(1.05);
  box-shadow: 0 10px 26px rgba(240, 75, 85, 0.42);
}
@media (prefers-reduced-motion: reduce) {
  .cap-uplift--sales[data-animate='on'] .cap-sales-main,
  .cap-uplift--sales[data-animate='on'] .cap-sales-sub {
    opacity: 1;
  }
}

/* ===== AI_3: Referencing (grouped reference vs C.A.P. market) ===== */
.cap-uplift--ref .cap-uplift__chart {
  height: clamp(190px, 27vw, 250px);
}
.cap-ref-group {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(6px, 2vw, 14px);
  height: 100%;
  flex: 1;
}
.cap-uplift--ref .cap-uplift__bar {
  width: clamp(28px, 7.5vw, 44px);
}
.cap-uplift--ref .cap-uplift__cat {
  white-space: normal;
  line-height: 1.25;
}
.cap-ref-legend {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 5vw, 34px);
  margin-top: 12px;
}
.cap-ref-leg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Graphik', system-ui, sans-serif;
  font-size: clamp(12px, 2vw, 14px);
  color: var(--cap-base);
}
.cap-ref-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}
.cap-ref-swatch--grey {
  background: var(--cap-base);
}
.cap-ref-swatch--red {
  background: var(--cap-treat);
}
/* Weekly weather chart legend: a white bar swatch needs an outline to be visible
   on the white card, and the temperature series is a line, not a bar. */
.cap-ref-swatch--white {
  background: #fff;
  border: 1px solid var(--cap-grid);
}
.cap-ref-swatch--line {
  background: none;
  border-top: 3px solid #af3241;
  height: 3px;
  border-radius: 0;
}

/* ===== Weekly sales vs temperature (weather case study) =====
   Ten calendar weeks, two bar series on the Sales axis plus the temperature
   curve on its own axis, drawn as an SVG overlay scaled to the plot box. Wider
   and denser than the other variants, so the bars and gaps shrink. The right
   axis title is the temperature scale's label. See src/lib/case-study-weekly.ts
   for the values and the scaling. */
.cap-uplift--weekly {
  max-width: 760px;
}
.cap-uplift--weekly .cap-uplift__axis-title {
  height: clamp(190px, 27vw, 250px);
}
.cap-uplift--weekly .cap-uplift__chart {
  height: clamp(190px, 27vw, 250px);
  gap: clamp(4px, 1.4vw, 12px);
}
.cap-uplift--weekly .cap-ref-group {
  gap: 2px;
}
.cap-uplift--weekly .cap-uplift__bar {
  width: clamp(9px, 1.7vw, 18px);
  border-radius: 5px 5px 0 0;
}
.cap-uplift--weekly .cap-uplift__cats {
  gap: clamp(4px, 1.4vw, 12px);
}
.cap-uplift--weekly .cap-uplift__cat {
  font-size: clamp(9px, 1.4vw, 12px);
}
/* Right-hand axis title mirrors the left one, so the rotation is reversed. */
.cap-weekly__axis-right {
  writing-mode: vertical-rl;
  transform: none;
}
/* Overlay the plot box (.cap-uplift__chart is position: relative). Width and
   height are set explicitly as well as the offsets: relying on `inset: 0` alone
   left the SVG at its 1:1 viewBox height, so it ran hundreds of pixels past the
   plot and scattered the curve over the info table below (reported in
   fn0njZyp3Fwb with screenshots). Never drop the explicit dimensions. */
.cap-weekly__line,
.cap-weekly__dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
/* Markers are positioned elements, not SVG circles: the stretched viewBox scales
   a circle on each axis independently and turns it into a large ellipse. */
.cap-weekly__dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #af3241;
  /* The container keeps pointer-events: none so the overlay cannot swallow a
     hover meant for the bars underneath. The markers take theirs back, which is
     what was missing: they were unreachable, so the temperature was the one
     figure on the page a reader could not query (thread AvigPluzXEga). */
  pointer-events: auto;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
/* A 7px target is too small to hit with a mouse and impossible on a phone, so
   the marker gets an invisible 26px hit area centred on itself. It stays inside
   the plot overlay, so it never covers a neighbouring week: at ten weeks the
   markers are far wider apart than 26px. */
.cap-weekly__dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
/* Same feedback language as the bars: the mark grows and takes a halo in its own
   colour, so hovering a temperature reads like hovering a bar. */
.cap-weekly__dot:hover,
.cap-weekly__dot:focus-visible {
  transform: scale(1.55);
  box-shadow: 0 0 0 5px rgba(175, 50, 65, 0.25);
  outline: none;
}
/* Reveal by fading, NOT by stroke-dasharray. The draw-in used to be
   `pathLength="1"` plus `stroke-dasharray: 1`, animating the offset to 0. That
   breaks in this chart: the polyline lives in a viewBox stretched by
   `preserveAspectRatio="none"`, so the dash pattern is measured in the
   distorted coordinate system and the pathLength normalisation no longer
   matches the rendered length. The result was a curve rendered as a row of
   disconnected segments, reported twice (fn0njZyp3Fwb, and again by Davide on
   2026-08-27 with a screenshot). No dash pattern means nothing can tear it
   apart. Dots fade with the line so the two never disagree. */
.cap-uplift--weekly[data-animate='on'] .cap-weekly__line-path,
.cap-uplift--weekly[data-animate='on'] .cap-weekly__dot {
  opacity: 0;
}
.cap-uplift--weekly[data-animate='on'].is-in .cap-weekly__line-path,
.cap-uplift--weekly[data-animate='on'].is-in .cap-weekly__dot {
  opacity: 1;
  transition: opacity 0.7s ease 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .cap-uplift--weekly[data-animate='on'] .cap-weekly__line-path,
  .cap-uplift--weekly[data-animate='on'] .cap-weekly__dot {
    opacity: 1;
    transition: none;
  }
  /* The hover state still applies, it just arrives without the tween. */
  .cap-weekly__dot {
    transition: none;
  }
}

/* ===== Generic bar hover (any colour, for custom-coloured bars) =====
   The variant charts (weather, daypart, sound, contacts, a/b, discounts) use
   plain .cap-uplift__bar with an inline background and no --base/--cap class, so
   they only brightened on hover. Give them the same red glow as every other bar.

   The glow is colour-matched to the bar via --cap-bar-glow, which
   case-study-bars.ts sets per bar: grey bars glow grey, red bars glow red. A
   white bar would produce an invisible glow, so the renderer substitutes a light
   grey for those.

   This flipped twice. It shipped colour-matched, was changed to always-red on
   05.08 (Nils, threads fsmRmiM7YxVV / LX7VrbDae-VO), and was changed back on
   18.08 on Davide's decision after Xiaotong asked for colour-matched in those
   same threads. Do not flip it again without asking him. */
.cap-uplift__bar:hover,
.cap-uplift__bar:focus-visible {
  filter: brightness(1.09);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--cap-bar-glow) 55%, transparent);
}

/* ===== Single-row multi-bar charts (ton, contacts, a/b) =====
   Contacts has 5 bars, so keep the gap small and identical on chart + cats. */
.cap-uplift--bars {
  max-width: 600px;
}
.cap-uplift--bars .cap-uplift__chart {
  height: clamp(190px, 27vw, 250px);
  gap: clamp(8px, 3vw, 28px);
}
.cap-uplift--bars .cap-uplift__cats {
  gap: clamp(8px, 3vw, 22px);
}
.cap-uplift--bars .cap-uplift__bar {
  width: clamp(26px, 7vw, 44px);
}
.cap-uplift--bars .cap-uplift__cat {
  white-space: normal;
  line-height: 1.25;
}

/* ===== Wider grouped charts (daypart, discounts, weather) =====
   These have up to 5 groups of 2 bars. The value labels have a min width, so
   the between-group gap must be small (and identical on chart + cats) or the
   groups overflow and stop aligning with their labels. */
.cap-uplift--grouped {
  max-width: 700px;
}
.cap-uplift--grouped .cap-uplift__chart {
  height: clamp(200px, 28vw, 270px);
  gap: clamp(8px, 2.5vw, 30px);
}
.cap-uplift--grouped .cap-uplift__cats {
  gap: clamp(8px, 2.5vw, 30px);
}
.cap-uplift--grouped .cap-uplift__bar {
  width: clamp(22px, 5vw, 40px);
}
.cap-uplift--grouped .cap-uplift__val {
  font-size: clamp(11px, 1.7vw, 13px);
}
.cap-uplift--grouped .cap-ref-group {
  gap: clamp(3px, 1.2vw, 8px);
}

/* Second, muted tooltip line (indexing / growth explanation) */
.cap-uplift-tip__post {
  display: block;
  margin-top: 6px;
  color: #62626e;
  font-size: 13px;
  line-height: 1.4;
}

/* ===== Per-group uplift pill (grouped charts: daypart, discounts, weather) ===== */
.cap-ref-group {
  position: relative;
}
.cap-ref-pill {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cap-treat);
  color: #fff;
  font-family: 'Graphik', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(11px, 1.8vw, 13px);
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(240, 75, 85, 0.28);
  font-variant-numeric: tabular-nums;
  z-index: 2;
}
.cap-uplift[data-animate='on'] .cap-ref-pill {
  opacity: 0;
  transition: opacity 0.5s ease 0.5s;
}
.cap-uplift[data-animate='on'].is-in .cap-ref-pill {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .cap-uplift[data-animate='on'] .cap-ref-pill {
    opacity: 1;
    transition: none;
  }
}

/* Grey "no effect" variant of the per-group pill */
.cap-ref-pill--none {
  background: var(--cap-base);
  box-shadow: 0 3px 10px rgba(98, 98, 110, 0.22);
}

/* Uplift pill above a treatment bar (single-row charts: ton, a/b, contacts) */
.cap-bar-pill {
  align-self: center;
  background: var(--cap-treat);
  color: #fff;
  font-family: 'Graphik', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(10px, 1.6vw, 12px);
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
  margin-bottom: 7px;
  box-shadow: 0 3px 10px rgba(240, 75, 85, 0.28);
  font-variant-numeric: tabular-nums;
}
.cap-uplift[data-animate='on'] .cap-bar-pill {
  opacity: 0;
  transition: opacity 0.5s ease 0.5s;
}
.cap-uplift[data-animate='on'].is-in .cap-bar-pill {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .cap-uplift[data-animate='on'] .cap-bar-pill {
    opacity: 1;
    transition: none;
  }
}

/* ===== Pill colour system =====
   Default uplift pill = outline (white, red border + text). The single strongest
   uplift per chart gets the solid dark-red "best" pill. No-effect = grey outline. */
.cap-ref-pill,
.cap-bar-pill {
  background: #fff;
  color: var(--cap-treat);
  border: 1.5px solid var(--cap-treat);
  box-shadow: 0 3px 10px rgba(240, 75, 85, 0.14);
}
.cap-ref-pill--best,
.cap-bar-pill--best {
  background: #af3241;
  color: #fff;
  border-color: #af3241;
}
.cap-ref-pill--none {
  background: #fff;
  color: var(--cap-base);
  border: 1.5px solid var(--cap-base);
  box-shadow: 0 3px 10px rgba(98, 98, 110, 0.12);
}
/* Glow the +xxx% uplift bubbles on hover too (feedback: make the +xxx% glow
   when the mouse is over it). Red on every pill, the no-effect one included —
   colour-matched like the bars: the red uplift pills glow red, the grey
   no-effect pill glows grey. The pills keep their own resting shadows. */
.cap-ref-pill,
.cap-bar-pill {
  transition: box-shadow 0.22s ease;
}
.cap-ref-pill:hover,
.cap-ref-pill:focus-visible,
.cap-bar-pill:hover,
.cap-bar-pill:focus-visible {
  box-shadow: var(--cap-glow-pill-red);
}
.cap-ref-pill--none:hover,
.cap-ref-pill--none:focus-visible {
  box-shadow: var(--cap-glow-pill-grey);
}
/* More breathing room between the single-row bar pill and the value below it */
.cap-bar-pill {
  margin-bottom: 13px;
}

/* Weather: the old Webflow chart box (.div-block-316._900._266) had a fixed
   height. The taller new chart + the info table below it overflowed the box.
   Let the box grow, and add bottom padding to clear the info table's built-in
   negative bottom margin (-20px) so it stays inside the card. Weather-only. */
.div-block-316._900._266 {
  height: auto;
  padding-bottom: 36px;
}