/*
 * The five Intallecta capabilities as an asymmetric bento of decisions —
 * two wide cells on top, three below. All copy is shown at all times; a
 * spotlight follows hover, click or the keyboard, and the active card
 * lifts, its border turns the house orange and its figure comes up to
 * full strength. Nothing advances on its own.
 *
 * Each signal figure resolves when its own card scrolls into view —
 * `.card.revealed`, a one-way latch set per card from an
 * IntersectionObserver, with `--card-i` staggering the cascade. Gating
 * on the card rather than the section is what makes the figures work
 * stacked into one column on tablet and mobile, where the section is
 * taller than the viewport and hover does not exist.
 *
 * Palette is the Intallecta house set, fixed rather than themed:
 * #161616 card, #E5E3D2 Platinum resting border, --accent (house orange
 * #FF5B19) for the active state. --accent arrives from the component.
 *
 * Layout is a plain 6-column grid — wide cells span 3, the rest span 2 —
 * and the single-column fallback is a @container query against this
 * element, since in Webflow it sits in a column routinely much narrower
 * than the window.
 *
 * The figures are HTML, not SVG (except the one drawn line): their text
 * is real copy bound to props, so nothing stretches and every string is
 * editable in the Designer.
 */

.GtgwY54l1qiT4LVfXgg0 {
  --fg: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --faint: rgba(255, 255, 255, 0.44);
  --line: rgba(255, 255, 255, 0.16);

  --card-bg: #161616;
  --card-stroke: #e5e3d2;
  --stroke-w: 1.5px;
  --radius: 14px;

  --warn: #ff6b5d;
  --ok: #35d29b;

  /* Categorical ramp for the value stack — activities, not grades, so it
     deliberately avoids --ok/--warn, which mean profitable/losing on the
     ROI chart and are the alert on the trend. Runs warm to cool and is
     mixed from --accent and the two house neutrals, so recolouring the
     component still carries the whole figure with it. */
  --seg-1: var(--accent);
  --seg-2: color-mix(in srgb, var(--accent) 55%, #ffc24a);
  --seg-3: color-mix(in srgb, var(--accent) 18%, #f0c24a);
  --seg-4: #b3c9cc;
  --seg-5: color-mix(in srgb, #b3c9cc 58%, var(--card-bg));

  --h-wide: 336px;
  --h-narrow: 424px;

  /* Height of the two plot boxes (trend, roi). A multiple of 8 so the
     4 grid rows land on whole pixels. */
  --plot-h: 80px;

  /* Reveal cascade step, per card index. */
  --step: 90ms;

  /* One duration for the trend line and the dot that rides it, so they
     stay in lockstep. */
  --trace: 1.6s;

  box-sizing: border-box;
  display: block;
  container-type: inline-size;
  width: 100%;
  color: var(--fg);
  /* No vertical padding: the eyebrow, heading and intro are native
     Webflow elements above this component. */
  padding: 0;
  font-family: Figtree, Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

.GtgwY54l1qiT4LVfXgg0 *,
.GtgwY54l1qiT4LVfXgg0 *::before,
.GtgwY54l1qiT4LVfXgg0 *::after {
  box-sizing: inherit;
}

.dz7qpnUsGZKp6DWXmaUG {
  max-width: 85rem;
  margin: 0 auto;
}

/* ---- grid ------------------------------------------------------- *
 * Card heights are fixed per row so the moving spotlight never reflows
 * the grid.
 * -------------------------------------------------------------- */

.vX5dia34o0Y7APw9XW9Z {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem;
}

.SPaJCCFalCkp_a35Rjpj {
  position: relative;
  grid-column: span 2;
  height: var(--h-narrow);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Roomy bottom padding: the figure is pinned to the bottom of the
     body, so this is the air beneath it. */
  padding: 1.6rem 1.6rem 2.6rem;
  border: var(--stroke-w) solid var(--card-stroke);
  border-radius: var(--radius);
  background: var(--card-bg);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.45s ease;
}

.PoBLID6U5UA4qiRN6xGC {
  grid-column: span 3;
  height: var(--h-wide);
}

.SPaJCCFalCkp_a35Rjpj:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Same stroke weight all the way round — only the colour changes — plus
   a soft cast glow and a small lift. */
.SPaJCCFalCkp_a35Rjpj.XGzfBewGL7KaApBIGcKi {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 26px 60px -26px color-mix(in srgb, var(--accent) 50%, transparent);
}

.fExiQUceVemmBmcLaK8g {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.62rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 100px;
  transition:
    color 0.35s ease,
    border-color 0.35s ease;
}

.fExiQUceVemmBmcLaK8g::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.SPaJCCFalCkp_a35Rjpj.XGzfBewGL7KaApBIGcKi .fExiQUceVemmBmcLaK8g {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.G5o7f9fWZ208wrV09m7z {
  margin-top: 0.95rem;
  font-size: clamp(1.1rem, 3.4cqw, 1.3rem);
  line-height: 1.36;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--muted);
  transition: color 0.35s ease;
}

.PoBLID6U5UA4qiRN6xGC .G5o7f9fWZ208wrV09m7z {
  font-size: clamp(1.3rem, 2.5cqw, 1.65rem);
}

.SPaJCCFalCkp_a35Rjpj.XGzfBewGL7KaApBIGcKi .G5o7f9fWZ208wrV09m7z {
  color: var(--fg);
}

.PrDCLLt4tL79PM37T7x0 {
  margin-top: 0.65rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}

.ovUiTpdNAsEPDueDU3Q7 {
  position: relative;
  align-self: stretch;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 1.05rem;
  min-height: 0;
}

/* Always shown. Card heights are fixed per row and the paragraph
   holds its space either way, so nothing reflows as the spotlight
   moves — only the border, chip and figure respond to hover. */
.cnOuq6piT1TF39_7THWj {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  font-weight: 300;
  color: var(--muted);
}

/* Pinned to the bottom of the body; the card's bottom padding is the
   air beneath it. */
.UhSnV7zueqC82TlZiMUq {
  display: block;
  margin-top: auto;
  padding-top: 1.2rem;
  opacity: 0.32;
  transition: opacity 0.5s ease;
}

/* Once the section has scrolled into view every figure lifts to near
   full; the focused card's goes all the way. */
.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .UhSnV7zueqC82TlZiMUq {
  opacity: 0.72;
}

.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl.XGzfBewGL7KaApBIGcKi .UhSnV7zueqC82TlZiMUq {
  opacity: 1;
}

.t8qi55zHVEXE3BcT4PDN {
  display: block;
}

/* ---- plot grid (trend + roi) -------------------------------- *
 * A faint graph-paper ground behind the two chart-shaped figures.
 * The cell is a fixed square, not a percentage: percentages resolve
 * against each figure's own width, so the narrow card's cells came out
 * half the size of the wide card's and read as bunched.
 * -------------------------------------------------------------- */

/* Both plots are spans, so they need blockifying before `height` and the
   absolutely positioned children mean anything. */
.UjUQf8L6tXq3Iv3mNI9z,
.G65bhLorHdB4zwvE4ddM {
  display: block;
  --grid-line: color-mix(in srgb, var(--fg) 9%, transparent);
  border: 1px solid var(--grid-line);
  border-radius: 3px;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  /* Fractions, not a fixed cell: 4 rows and 8 columns divide the plot
     exactly at any width, so there are no half-cell slivers along the
     top and right edges reading as extra lines. The row at 50% is the
     ROI chart's break-even axis, so the axis lands on a grid line
     rather than between two. */
  background-size: 12.5% 25%;
}

/* ---- figure: trend ------------------------------------------- */

.wxzM4f4I59bLbttQB6r2 {
  display: block;
}

.UjUQf8L6tXq3Iv3mNI9z {
  position: relative;
  height: var(--plot-h);
}

/* The drawing area, inset from the grid box so the line and the dot
   riding it both stay clear of the border. */
.S5dnM9SnkRP9BQtBFguI {
  position: absolute;
  inset: 20px 10px 9px;
}

/* Where this guest used to sit. The falling reading is only legible as
   a decline against something, so the first value is held as a dashed
   reference and the gap beneath it is shaded. */
.hnrv6GIdhFLnz3kiFrmx {
  position: absolute;
  left: 0;
  right: 0;
  top: 16.67%;
  border-top: 1px dashed color-mix(in srgb, var(--fg) 30%, transparent);
}

.tHj8y9WNUeVdYQtkgTMH {
  position: absolute;
  top: 4px;
  left: 10px;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Sits top-right, the one corner the falling line always vacates. */
.O_plyMK0uLlEa1JxXJOA {
  position: absolute;
  top: 4px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warn);
  opacity: 0;
  transform: translateY(-3px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
  transition-delay: calc(var(--trace) + var(--card-i, 0) * var(--step));
}

.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .O_plyMK0uLlEa1JxXJOA {
  opacity: 1;
  transform: none;
}

.DxhQstog6XIHeQispVid {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .DxhQstog6XIHeQispVid {
  animation: Ius_nRuudsDgDargS6ep 2.4s ease-in-out
    calc(var(--trace) + var(--card-i, 0) * var(--step)) infinite;
}

.KoXxp7CFtrk7aI1XPkXe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The shortfall between the usual pace and the actual reading. */
.oa3NWhMrNkQtB6UPvFcM {
  fill: color-mix(in srgb, var(--warn) 16%, transparent);
  opacity: 0;
  transition: opacity 0.6s ease;
  transition-delay: calc(var(--trace) * 0.55 + var(--card-i, 0) * var(--step));
}

.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .oa3NWhMrNkQtB6UPvFcM {
  opacity: 1;
}

/* pathLength="100" on the polyline normalises the dash units, so the
   line draws in exact proportion at any width. */
.EgIJtX8pUrUaqp_HMxXE {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0.5;
}

/* Rides the line from the first reading to the latest. */
.YCTnDvjZciVS_KhCIlcW {
  position: absolute;
  left: 0%;
  top: 16.67%;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  background: var(--faint);
  transition: background 0.4s ease;
}

/* Both linear and the same duration: the dot sits exactly on the tip of
   the line as it draws. Easing here would break the lockstep, and on the
   dot a non-linear curve is applied to EVERY keyframe segment — which is
   what made the travel stutter eight times instead of gliding. */
.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .EgIJtX8pUrUaqp_HMxXE {
  opacity: 1;
  animation: aO8E8MqZyjKlbhB2yFjx var(--trace) linear calc(var(--card-i, 0) * var(--step)) forwards;
}

.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .YCTnDvjZciVS_KhCIlcW {
  background: var(--warn);
  animation: Eyk14KMg95du98ovqZHQ var(--trace) linear calc(var(--card-i, 0) * var(--step)) forwards;
}

/* Keeps pulsing rather than stopping after a few beats — the guest is
   still slipping until someone acts on it. */
.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .YCTnDvjZciVS_KhCIlcW::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px solid var(--warn);
  border-radius: 50%;
  opacity: 0;
  animation: i1SSHlpXLhf7xj6MTF7b 2.6s ease-out
    calc(var(--trace) + 0.15s + var(--card-i, 0) * var(--step)) infinite;
}

@keyframes Ius_nRuudsDgDargS6ep {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

@keyframes aO8E8MqZyjKlbhB2yFjx {
  to {
    stroke-dashoffset: 0;
  }
}

/* Keyframe times match the vertices' x-positions exactly, so horizontal
   speed is constant across the whole run. */
@keyframes Eyk14KMg95du98ovqZHQ {
  0% {
    left: 0%;
    top: 16.67%;
  }
  14% {
    left: 14%;
    top: 28.33%;
  }
  28% {
    left: 28%;
    top: 21.67%;
  }
  42% {
    left: 42%;
    top: 40%;
  }
  56% {
    left: 56%;
    top: 48.33%;
  }
  70% {
    left: 70%;
    top: 66.67%;
  }
  84% {
    left: 84%;
    top: 75%;
  }
  100% {
    left: 100%;
    top: 90%;
  }
}

@keyframes i1SSHlpXLhf7xj6MTF7b {
  0% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  70%,
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

/* ---- figure: stack ------------------------------------------- */

.vom9TAwMBIc0Z9PYPB3w {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.IK62wVuptd5YaFGzuJGJ {
  position: relative;
  display: flex;
  gap: 3px;
  height: 20px;
  /* Rounded and clipped as one piece so the sheen below reads as a
     highlight crossing a single total, not five separate bars. */
  border-radius: 3px;
  overflow: hidden;
}

/* A highlight crosses the whole bar once per cycle, in step with the
   segment wave. The stack is a total being accumulated across
   activities, and the sweep is what keeps it reading as one figure
   rather than a row of finished slices. Rests fully transparent, so
   under reduced motion (where the animation is dropped) there is no
   static band sitting over the segments. */
.IK62wVuptd5YaFGzuJGJ::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 34%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    100deg,
    transparent,
    color-mix(in srgb, var(--fg) 42%, transparent),
    transparent
  );
}

/* Travel is in the sheen's own width: it is 34% of the bar, so -105%
   parks it clear of the left edge and 300% clears the right. */
.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .IK62wVuptd5YaFGzuJGJ::after {
  animation: fh0V1jmu9wVqdJff4yue 5.5s ease-in-out
    calc(1.15s + var(--card-i, 0) * var(--step)) infinite;
}

@keyframes fh0V1jmu9wVqdJff4yue {
  0% {
    transform: translateX(-105%);
    opacity: 0;
  }
  8% {
    opacity: 0.85;
  }
  46% {
    opacity: 0.85;
  }
  58%,
  100% {
    transform: translateX(300%);
    opacity: 0;
  }
}

.jmVAgHrMkOfQ07G4Z6GN {
  flex: var(--w) 1 0;
  min-width: 0;
  background: var(--seg, var(--accent));
  opacity: 0.34;
  border-radius: 3px;
  transform: scaleX(0.001);
  transform-origin: left;
  transition:
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.4s ease;
  transition-delay: calc(var(--card-i, 0) * var(--step) + var(--i) * 55ms);
}

/* One colour per activity. Set by position so the palette stays in the
   stylesheet — the component only supplies the widths. */
.jmVAgHrMkOfQ07G4Z6GN:nth-child(1) {
  --seg: var(--seg-1);
}
.jmVAgHrMkOfQ07G4Z6GN:nth-child(2) {
  --seg: var(--seg-2);
}
.jmVAgHrMkOfQ07G4Z6GN:nth-child(3) {
  --seg: var(--seg-3);
}
.jmVAgHrMkOfQ07G4Z6GN:nth-child(4) {
  --seg: var(--seg-4);
}
.jmVAgHrMkOfQ07G4Z6GN:nth-child(5) {
  --seg: var(--seg-5);
}

/* A slow wave travels the segments once they are up, so the bar keeps
   reading as an accumulating total rather than a finished graphic. It
   dips from the resolved state rather than rising to it, so it starts
   where the reveal left off and never fights the scaleX. */
.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .jmVAgHrMkOfQ07G4Z6GN {
  opacity: 1;
  transform: scaleX(1);
  animation: EVvhja640cH2whF_lJZw 5.5s ease-in-out
    calc(1s + var(--card-i, 0) * var(--step) + var(--i) * 0.28s) infinite;
}

@keyframes EVvhja640cH2whF_lJZw {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.68;
  }
}

/* Each name carries its segment's own tint, so a reader can match a
   label to its slice instead of reading an undifferentiated list. */
.cwAtMh3h65XFKPPPj8Bg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

.avQxFBgTtqxsAiswPJTY {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.68rem;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--muted);
  opacity: 0;
  transform: translateY(3px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  transition-delay: calc(0.35s + var(--card-i, 0) * var(--step) + var(--i) * 55ms);
}

.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .avQxFBgTtqxsAiswPJTY {
  opacity: 1;
  transform: none;
}

.BI05brweAxDDpNNZ_aCq {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--seg, var(--accent));
}

/* Each swatch dips on exactly the delay its own segment uses, so the
   label and the slice it names pulse together and the mapping between
   the two is legible without hovering anything. */
.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .BI05brweAxDDpNNZ_aCq {
  animation: BdJ5CUlRrktai9dcQwHh 5.5s ease-in-out
    calc(1s + var(--card-i, 0) * var(--step) + var(--i) * 0.28s) infinite;
}

@keyframes BdJ5CUlRrktai9dcQwHh {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.72;
    transform: scale(0.86);
  }
}

/* Keyed to the same positions as the segments above. */
.avQxFBgTtqxsAiswPJTY:nth-child(1) {
  --seg: var(--seg-1);
}
.avQxFBgTtqxsAiswPJTY:nth-child(2) {
  --seg: var(--seg-2);
}
.avQxFBgTtqxsAiswPJTY:nth-child(3) {
  --seg: var(--seg-3);
}
.avQxFBgTtqxsAiswPJTY:nth-child(4) {
  --seg: var(--seg-4);
}
.avQxFBgTtqxsAiswPJTY:nth-child(5) {
  --seg: var(--seg-5);
}

/* ---- figure: roi -------------------------------------------- */

.Y6BjwXuUMMJmU7I7njeA {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.G65bhLorHdB4zwvE4ddM {
  position: relative;
  height: var(--plot-h);
  padding: 0 14px;
}

/* A read head crosses the plot once per cycle, timed to arrive at each
   column just as that bar flares. It is positioned against the padding
   box, so it starts on the first column and stops on the last rather
   than running to the figure's edges. */
.G65bhLorHdB4zwvE4ddM::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  width: 1px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--fg) 55%, transparent) 22%,
    color-mix(in srgb, var(--fg) 55%, transparent) 78%,
    transparent
  );
}

.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .G65bhLorHdB4zwvE4ddM::after {
  animation: Proo1YDN26zt72xNN_do 5.2s ease-in-out
    calc(0.9s + var(--card-i, 0) * var(--step)) infinite;
}

@keyframes Proo1YDN26zt72xNN_do {
  0% {
    left: 14px;
    opacity: 0;
  }
  6% {
    opacity: 0.65;
  }
  40% {
    opacity: 0.65;
  }
  52%,
  100% {
    left: calc(100% - 14px);
    opacity: 0;
  }
}

/* Columns share the width evenly rather than sitting at a fixed 30px,
   which left the bars bunched into the left third of the wider plot. */
.SGCWvPdoiuaArHHV2r8q {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 14px;
  height: 100%;
}

/* Two equal halves meeting at the break-even axis. A bar is sized
   against its own half, so 100% reaches the plot edge exactly and no
   value can spill outside the grid. */
.bEwySXrmzYpdGtvKbeJQ {
  display: grid;
  grid-template-rows: 1fr 1fr;
  height: 100%;
}

.gYX3ek16rxEfrHlXi_Ue {
  position: relative;
}

.p1fkLLE9rguawK2v22Hx {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--h);
  transform: scaleY(0.001);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--card-i, 0) * var(--step) + var(--i) * 90ms);
}

/* The far end is where the value is actually read, so that is what
   lights as the head passes. Drawn inside the bar, so it cannot reach
   past the half that contains it and the plot stays sealed however the
   heights are set. */
.p1fkLLE9rguawK2v22Hx::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: inherit;
  background: var(--fg);
  opacity: 0;
}

.p1fkLLE9rguawK2v22Hx.WHXOpkNjZDtyf031UPnR::after {
  top: 0;
}

.p1fkLLE9rguawK2v22Hx.pbLQ8JD0DrlvbRshjToQ::after {
  bottom: 0;
}

.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .p1fkLLE9rguawK2v22Hx::after {
  animation: r6ixskkeTLKDsYLaiWzI 5.2s ease-in-out
    calc(1.1s + var(--card-i, 0) * var(--step) + var(--i) * 0.55s) infinite;
}

@keyframes r6ixskkeTLKDsYLaiWzI {
  0%,
  40%,
  100% {
    opacity: 0;
  }
  12% {
    opacity: 0.9;
  }
}

/* Square where the bar meets the axis, rounded at the far end — the
   flat edge is what makes the axis read as a clean division. */
.p1fkLLE9rguawK2v22Hx.WHXOpkNjZDtyf031UPnR {
  bottom: 0;
  transform-origin: bottom;
  border-radius: 2px 2px 0 0;
  background: var(--ok);
}

.p1fkLLE9rguawK2v22Hx.pbLQ8JD0DrlvbRshjToQ {
  top: 0;
  transform-origin: top;
  border-radius: 0 0 2px 2px;
  background: var(--warn);
}

/* Once up, a highlight walks column to column on a loop — the section
   is continuously reading the offers, not holding a snapshot. Only
   `filter` is animated, so the reveal's scaleY transition is untouched. */
.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .p1fkLLE9rguawK2v22Hx {
  transform: scaleY(1);
  animation: dLJLatm19VyDG_vJuTzL 5.2s ease-in-out
    calc(1.1s + var(--card-i, 0) * var(--step) + var(--i) * 0.55s) infinite;
}

@keyframes dLJLatm19VyDG_vJuTzL {
  0%,
  70%,
  100% {
    filter: brightness(1);
  }
  12% {
    filter: brightness(1.45);
  }
}

/* Names under the columns, on the same grid and padding as the bars so
   each one lines up with what it labels. */
.yDAqYqMaEkaql4MWdcSs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 14px;
  padding: 0 14px;
}

.P5uN18va_8_WMsFbEewQ {
  font-size: 0.62rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--faint);
  opacity: 0;
  transform: translateY(3px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  transition-delay: calc(0.5s + var(--card-i, 0) * var(--step) + var(--i) * 90ms);
}

.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .P5uN18va_8_WMsFbEewQ {
  opacity: 1;
  transform: none;
}

.P5uN18va_8_WMsFbEewQ.WHXOpkNjZDtyf031UPnR {
  color: color-mix(in srgb, var(--ok) 78%, var(--fg));
}

.P5uN18va_8_WMsFbEewQ.pbLQ8JD0DrlvbRshjToQ {
  color: color-mix(in srgb, var(--warn) 78%, var(--fg));
}

/* The break-even line. Positioned against the figure's padding box so it
   spans the full plot edge to edge, and drawn over the bars so the
   division between gains and losses stays unbroken. */
.F5ASbcPy0NDjqsAgC_2m {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
  background: color-mix(in srgb, var(--fg) 42%, transparent);
  z-index: 1;
}

/* ---- figure: ask ------------------------------------------- */

/* The cell's claim is that the answer *arrives*, so the figure runs the
   whole exchange on a loop — asked, working, answered — rather than
   sitting on a finished result. One --ask-cycle keeps the two halves in
   phase. */
.WcMEi0z0kSwnU9gxFmN1 {
  --ask-cycle: 9s;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  justify-content: center;
}

.X3w3ijabCEJJDtuxjutD {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted);
}

/* A prompt chevron, so the line reads as something being asked. */
.AgN7EzyxbPms9WcOWugL {
  flex: none;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}

.cmWc9iKc54l1kKdeQv7m {
  display: inline-block;
  width: 1.5px;
  height: 0.9em;
  margin-left: 1px;
  vertical-align: -1px;
  background: var(--accent);
  opacity: 0;
}

.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .cmWc9iKc54l1kKdeQv7m {
  animation: wVJy_VTKMppfXeLUeFpz 1.05s step-end calc(var(--card-i, 0) * var(--step)) infinite;
}

/* Both states share one grid cell, so the figure never changes height
   as it cycles between working and answered. */
.sLKrnA0gMuBSncARBJ3e {
  display: grid;
  justify-items: start;
  align-items: center;
  min-height: 26px;
}

.abAR55c6AKgpditJKOgS,
.ixZqGnPMeJbO4sCqrn4b {
  grid-area: 1 / 1;
}

.abAR55c6AKgpditJKOgS {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.35rem 0;
}

.abAR55c6AKgpditJKOgS i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  opacity: 0;
}

.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .abAR55c6AKgpditJKOgS i {
  animation: yNuBqxes2i1nVo7JlAPg 1.1s ease-in-out calc(var(--i) * 0.14s) infinite;
}

.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .abAR55c6AKgpditJKOgS {
  animation: bunaVvFpYE_pjx45z9uQ var(--ask-cycle) linear calc(var(--card-i, 0) * var(--step))
    infinite;
}

.ixZqGnPMeJbO4sCqrn4b {
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 4px;
  opacity: 0;
}

.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .ixZqGnPMeJbO4sCqrn4b {
  animation: IW1WBKQ_oe7gtfXqUt0s var(--ask-cycle) ease
    calc(var(--card-i, 0) * var(--step)) infinite;
}

/* Visible only while the question is being worked on. */
@keyframes bunaVvFpYE_pjx45z9uQ {
  0%,
  18% {
    opacity: 1;
  }
  24%,
  100% {
    opacity: 0;
  }
}

/* Arrives just as the dots clear, holds, then resets for the next ask. */
@keyframes IW1WBKQ_oe7gtfXqUt0s {
  0%,
  20% {
    opacity: 0;
    transform: translateY(4px);
  }
  28%,
  88% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes yNuBqxes2i1nVo7JlAPg {
  0%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@keyframes wVJy_VTKMppfXeLUeFpz {
  50% {
    opacity: 1;
  }
  0%,
  100% {
    opacity: 0;
  }
}

/* ---- figure: align ---------------------------------------- */

.J7mZyZsvZFNeH63PrC7K {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Names the line the readings converge on — without it the markers are
   just dots sliding to a dashed rule. Sits over the guide, which is
   offset by the label column's 38px + 8px gap. */
.CacLyEmZG5mcEyEY_ZCq {
  align-self: flex-start;
  margin-left: calc(50% + 23px);
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.5s ease;
  transition-delay: calc(0.6s + var(--card-i, 0) * var(--step));
}

.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .CacLyEmZG5mcEyEY_ZCq {
  opacity: 1;
}

.UeY3GTDT12kXj0Ooa40I {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.fc5Oh5kjA85RDEkNKJL7 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gX9jHs4FUlvWlQ4XZKC7 {
  flex: 0 0 38px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--faint);
}

/* Ticks turn the track into something a position can be read against,
   rather than a bare rule. */
.hiXETcjaAkspRuzWlcpM {
  position: relative;
  flex: 1 1 auto;
  height: 7px;
  background-image:
    linear-gradient(var(--line), var(--line)),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--fg) 16%, transparent) 0 1px,
      transparent 1px 12.5%
    );
  background-size:
    100% 1px,
    100% 5px;
  background-position:
    left center,
    left center;
  background-repeat: no-repeat;
}

.UjLbWpXhD7Ho74Fc0gDr {
  position: absolute;
  top: 50%;
  left: var(--from);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
  transform: translate(-50%, -50%);
  transition:
    left 0.9s cubic-bezier(0.34, 1.32, 0.64, 1),
    background 0.4s ease;
  transition-delay: calc(var(--card-i, 0) * var(--step) + var(--i) * 110ms);
  will-change: transform;
}

/* Converge on the shared line, then keep drifting gently around it —
   teams never sit perfectly still. The converge is a one-shot on `left`;
   the endless drift rides `transform` instead, so the loop runs on the
   compositor and never relayouts the row. */
.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .UjLbWpXhD7Ho74Fc0gDr {
  left: 50%;
  background: var(--accent);
  animation: eiVUQTE3ArM_a0e6heEJ 8s ease-in-out
    calc(1.3s + var(--card-i, 0) * var(--step) + var(--i) * 0.5s) infinite;
}

/* Swings to both sides of the line rather than off to one, and starts
   and ends centred so it picks up from the converge with no jump. */
@keyframes eiVUQTE3ArM_a0e6heEJ {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }
  25% {
    transform: translate(-50%, -50%) translateX(calc(var(--drift) * -1));
  }
  75% {
    transform: translate(-50%, -50%) translateX(var(--drift));
  }
}

.S7HF6Pkco73NdCx9sIKD {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% + 23px);
  border-left: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  opacity: 0;
  transition: opacity 0.45s ease;
  transition-delay: calc(0.3s + var(--card-i, 0) * var(--step));
}

.SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .S7HF6Pkco73NdCx9sIKD {
  opacity: 1;
}

/* ---- cta ------------------------------------------------------- *
 * Solid fill, not an outline: the CTA sits on the component's own
 * background (the Webflow section behind it), so it can't borrow --fg
 * without going invisible on a light page.
 * -------------------------------------------------------------- */

.Ma8oN4E5ms0GHscsSlgP {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.75rem;
  padding: 0.95rem 1.9rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #161616;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    filter 0.25s ease,
    transform 0.25s ease;
}

.Ma8oN4E5ms0GHscsSlgP svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.Ma8oN4E5ms0GHscsSlgP:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ---- narrow container ---------------------------------------- *
 * The bento can't hold five cells in a narrow column, so it becomes one
 * column and heights relax to content.
 * ---------------------------------------------------------------- */

@container (max-width: 52rem) {
  .vX5dia34o0Y7APw9XW9Z {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .SPaJCCFalCkp_a35Rjpj,
  .PoBLID6U5UA4qiRN6xGC {
    grid-column: auto;
    height: auto;
    min-height: 0;
  }

  .PoBLID6U5UA4qiRN6xGC .G5o7f9fWZ208wrV09m7z {
    font-size: clamp(1.2rem, 5cqw, 1.5rem);
  }

  .SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .UhSnV7zueqC82TlZiMUq {
    opacity: 0.9;
  }
}

@container (max-width: 30rem) {
  .SPaJCCFalCkp_a35Rjpj {
    padding: 1.3rem 1.3rem 2rem;
  }

  /* The two trend labels sit on one line at opposite ends of the plot,
     and below about 30rem they need more width than the plot has and
     run into each other. The alert is the payload, so it keeps the row;
     the dashed line still reads as a reference without its caption. */
  .tHj8y9WNUeVdYQtkgTMH {
    display: none;
  }
}

/* ---- reduced motion ---------------------------------------------- *
 * No animation getting there — but the revealed end states still apply,
 * so every figure lands resolved once the section is in view.
 * ---------------------------------------------------------------- */

.GtgwY54l1qiT4LVfXgg0.VTfLuPjAnWYKGvM8ViXW *,
.GtgwY54l1qiT4LVfXgg0.VTfLuPjAnWYKGvM8ViXW *::before,
.GtgwY54l1qiT4LVfXgg0.VTfLuPjAnWYKGvM8ViXW *::after {
  animation: none !important;
  transition: none !important;
}

/* With motion off the figures still land resolved: line drawn, dot at
   the latest reading, markers on the shared line. */
.GtgwY54l1qiT4LVfXgg0.VTfLuPjAnWYKGvM8ViXW .EgIJtX8pUrUaqp_HMxXE,
.GtgwY54l1qiT4LVfXgg0.VTfLuPjAnWYKGvM8ViXW .EgIJtX8pUrUaqp_HMxXE {
  stroke-dashoffset: 0;
}

.GtgwY54l1qiT4LVfXgg0.VTfLuPjAnWYKGvM8ViXW .YCTnDvjZciVS_KhCIlcW {
  left: 100%;
  top: 90%;
}

.GtgwY54l1qiT4LVfXgg0.VTfLuPjAnWYKGvM8ViXW .UjLbWpXhD7Ho74Fc0gDr {
  left: 50%;
}

/* The answer is only shown by the ask/answer loop, so without it the
   figure would sit on an empty result. Land it on the answered state —
   which is the one that carries the meaning — and drop the dots. */
.GtgwY54l1qiT4LVfXgg0.VTfLuPjAnWYKGvM8ViXW .ixZqGnPMeJbO4sCqrn4b {
  opacity: 1;
  transform: none;
}

.GtgwY54l1qiT4LVfXgg0.VTfLuPjAnWYKGvM8ViXW .abAR55c6AKgpditJKOgS {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .GtgwY54l1qiT4LVfXgg0 *,
  .GtgwY54l1qiT4LVfXgg0 *::before,
  .GtgwY54l1qiT4LVfXgg0 *::after {
    animation: none !important;
    transition: none !important;
  }

  .SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .EgIJtX8pUrUaqp_HMxXE {
    stroke-dashoffset: 0;
  }

  .SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .YCTnDvjZciVS_KhCIlcW {
    left: 100%;
    top: 90%;
  }

  .SPaJCCFalCkp_a35Rjpj.ephJFtVOow1bXnE5veHl .UjLbWpXhD7Ho74Fc0gDr {
    left: 50%;
  }

  .GtgwY54l1qiT4LVfXgg0 .ixZqGnPMeJbO4sCqrn4b {
    opacity: 1;
    transform: none;
  }

  .GtgwY54l1qiT4LVfXgg0 .abAR55c6AKgpditJKOgS {
    display: none;
  }
}