/* State of Web2App 2026 — Report styles
 * Dark-native, FunnelFox brand.
 */

@import url('colors_and_type.css');

/* Brand-aligned background — true near-black, FunnelFox dark */
:root {
  --report-bg: #0A0A0A;
  --report-bg-warm: #141414;
  --report-bg-card: #141414;
  --chart-coral: #E05A4E;
  --chart-blue: #6B7FD7;
  --chart-yellow: #F5C842;
  --chart-lilac: #9B8EC4;
  --chart-blue-light: #8CA0E6;
  --chart-orange: #F26523;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--report-bg);
  color: var(--ff-fg-1);
  font-family: var(--ff-font-sans);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

/* Scroll progress bar */
.progress-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 1000;
  background: rgba(255,255,255,0.06);
}
.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ff-orange-600), var(--ff-orange-500), #FF9A5A);
  width: 0%;
  transition: width 80ms linear;
}

/* ───────── Sticky nav ───────── */
.nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 900;
  display: flex; align-items: center; gap: 24px;
  padding: 10px 12px 10px 22px;
  background: rgba(18, 8, 7, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ff-border-subtle);
  border-radius: var(--ff-radius-pill);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -12px);
  transition: opacity 300ms var(--ff-ease), transform 300ms var(--ff-ease);
  max-width: calc(100vw - 32px);
}
.nav.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.nav__logo { height: 22px; display: flex; align-items: center; flex: 0 0 auto; min-width: 110px; }
.nav__logo img { height: 22px; width: auto; max-width: none; flex-shrink: 0; display: block; object-fit: contain; }
.nav__links { display: flex; gap: 4px; }
.nav__links a {
  color: var(--ff-fg-1);
  text-decoration: none;
  font-size: 14px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--ff-radius-pill);
  opacity: 0.72;
  transition: opacity 120ms var(--ff-ease), color 120ms var(--ff-ease), background 120ms var(--ff-ease);
  white-space: nowrap;
}
.nav__links a:hover { opacity: 1; }
.nav__links a.is-active {
  opacity: 1; color: var(--ff-orange-500);
  background: rgba(242, 101, 35, 0.1);
}
.nav__cta {
  padding: 9px 22px; border-radius: var(--ff-radius-pill);
  background: var(--ff-orange-500); color: white;
  font-size: 14px; font-weight: 600; text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
  display: inline-flex; align-items: center;
  transition: background 120ms var(--ff-ease);
}
.nav__cta:hover { background: var(--ff-orange-600); }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav { padding: 8px 8px 8px 18px; gap: 12px; }
}

/* ───────── Container ───────── */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ───────── Hero ───────── */
.hero {
  min-height: 100vh;
  position: relative;
  padding: 32px 32px 60px;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--report-bg);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 10% 100%, rgba(242, 101, 35, 0.35) 0%, rgba(232, 74, 10, 0.12) 30%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(242, 101, 35, 0.06) 1px, transparent 1.5px);
  background-size: cover, 28px 28px;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 70%, var(--report-bg) 100%);
  pointer-events: none;
}
/* Cursor-trail glow inside the hero — soft orange spotlight that follows
   the pointer. Updated via --cx/--cy/--c-opacity custom properties. */
.hero__cursor-glow {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: var(--c-opacity, 0);
  background: radial-gradient(
    circle 320px at var(--cx, 50%) var(--cy, 50%),
    rgba(242, 101, 35, 0.22) 0%,
    rgba(242, 101, 35, 0.10) 35%,
    rgba(242, 101, 35, 0) 70%
  );
  transition: opacity 320ms ease;
  mix-blend-mode: screen;
}
.hero__top {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1200px; margin: 0 auto; width: 100%;
}
.hero__top img { height: 26px; }
.hero__top-meta { color: var(--ff-fg-2); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }

.hero__main {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 40px 0;
}
.hero__eyebrow {
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--ff-orange-500);
  margin-bottom: 28px;
}
.hero__title {
  font-size: clamp(52px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: white;
  margin-bottom: 36px;
}
.hero__title span { display: block; }
/* Hero accent — cursor-as-light-source.
   Two layered backgrounds clipped to the glyphs:
     1. a directional linear sheen rotated to face the cursor (works at any
        distance — gives the impression the text is catching light from
        the cursor's direction even when far away);
     2. a soft radial spot positioned at the projected cursor coords (adds
        a focused glint when the cursor is near or over the text).
   Both update via CSS custom properties only — no layout, no repaint of
   anything outside the text — so the effect stays smooth and GPU-friendly. */
.hero__title .t-accent {
  --mx: 50%;
  --my: 50%;
  --glow: 0; /* 0 when cursor is off the text, 1 when over it */
  position: relative;
  display: block;
  background-color: var(--ff-orange-500);
  background-image:
    radial-gradient(
      ellipse 60% 130% at var(--mx) var(--my),
      rgba(255, 245, 225, calc(0.95 * var(--glow))) 0%,
      rgba(255, 215, 170, calc(0.55 * var(--glow))) 22%,
      rgba(242, 101, 35, 0) 60%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  will-change: background-position, background-image;
  transition: background-color 220ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .hero__title .t-accent {
    background-image: none;
  }
}
.hero__sub {
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--ff-fg-1);
  max-width: 640px;
  line-height: 1.5;
  margin-bottom: 40px;
}
.hero__stats {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 44px;
}
.hero__stat {
  padding: 10px 18px 10px 14px;
  border-radius: var(--ff-radius-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ff-border-subtle);
  color: white;
  font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 500ms var(--ff-ease), transform 500ms var(--ff-ease);
}
.hero__stat.is-in { opacity: 1; transform: translateY(0); }
.hero__stat::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ff-orange-500);
  box-shadow: 0 0 10px var(--ff-orange-glow);
}
.hero__cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-primary {
  padding: 14px 26px; border-radius: var(--ff-radius-pill);
  background: var(--ff-orange-500); color: white;
  font-weight: 600; font-size: 16px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background 120ms var(--ff-ease), transform 120ms var(--ff-ease);
  box-shadow: var(--ff-shadow-orange-glow);
  border: none; cursor: pointer;
}
.btn-primary:hover { background: var(--ff-orange-600); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary--lg { padding: 18px 34px; font-size: 17px; }
.btn-ghost {
  padding: 14px 26px; border-radius: var(--ff-radius-pill);
  background: transparent; color: white;
  border: 1px solid var(--ff-border-medium);
  font-weight: 500; font-size: 16px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background 120ms var(--ff-ease), border-color 120ms var(--ff-ease);
  cursor: pointer;
}
.btn-ghost:hover { background: rgba(255,255,255,0.04); border-color: var(--ff-border-strong); }

.hero__badges {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto; width: 100%;
  display: flex; flex-wrap: wrap; gap: 6px 0;
  padding-top: 32px;
  border-top: 1px solid var(--ff-border-subtle);
}
.hero__badge {
  font-size: 12px; color: var(--ff-fg-2);
  padding: 8px 16px;
  position: relative;
  letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 500;
}
.hero__badge + .hero__badge::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 14px; background: var(--ff-border-subtle);
  transform: translateY(-50%);
}
.hero__badge:first-child { padding-left: 0; }

.hero__scroll {
  position: absolute;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  color: var(--ff-fg-2); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  z-index: 2;
  animation: bounce 2.4s ease-in-out infinite;
}
.hero__scroll svg { stroke: var(--ff-orange-500); }
@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ───────── Chapter / Section ───────── */
.chapter {
  position: relative;
  padding: 140px 0 120px;
}
.chapter + .chapter { padding-top: 0; }
.chapter__label {
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 600; color: var(--ff-orange-500);
  margin-bottom: 20px;
}
.chapter__title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800; color: white;
  line-height: 1.05; letter-spacing: -0.03em;
  max-width: 900px;
  margin-bottom: 80px;
}

/* Section divider */
.divider {
  max-width: 1200px; margin: 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ff-orange-500), transparent);
  opacity: 0.35;
}

/* Reveal animation */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 700ms var(--ff-ease), transform 700ms var(--ff-ease);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal--right { transform: translateX(40px); }
.reveal--right.is-in { transform: translateX(0); }
.reveal--left { transform: translateX(-40px); }
.reveal--left.is-in { transform: translateX(0); }

/* ───────── Stat Block layout ───────── */
.block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  padding: 72px 0;
  border-top: 1px solid var(--ff-border-subtle);
}
.block--wide { grid-template-columns: 1fr; }
.block--flip .block__visual { order: -1; }
.block__copy { min-width: 0; }
.block__visual { min-width: 0; }
.block__kicker {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ff-fg-2); font-weight: 600;
  margin-bottom: 16px;
}
.block__callout {
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 800; color: white;
  line-height: 1.05; letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.block__callout .hl { color: var(--ff-orange-500); }
.block__callout.big-stat {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.big-stat__num {
  font-size: clamp(80px, 10vw, 140px);
  font-weight: 800; color: var(--ff-orange-500);
  line-height: 0.9; letter-spacing: -0.04em;
}
.big-stat__label {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600; color: white; line-height: 1.25;
  letter-spacing: -0.01em;
}
.block__insight {
  font-size: 17px; color: var(--ff-fg-1);
  line-height: 1.55;
  max-width: 520px;
}
.block__insight + .block__insight { margin-top: 14px; }
.block__source {
  font-size: 12px; color: var(--ff-fg-3);
  margin-top: 20px;
  letter-spacing: 0.02em;
}
.block__bullets { margin-top: 20px; list-style: none; }
.block__bullets li {
  position: relative;
  padding-left: 22px;
  color: var(--ff-fg-1);
  line-height: 1.55;
  margin-top: 10px;
  font-size: 16px;
}
.block__bullets li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ff-orange-500);
}

/* Big animated number */
.bignum {
  font-size: clamp(72px, 10vw, 144px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: white;
  display: inline-block;
}
.bignum .suffix { color: var(--ff-orange-500); }

@media (max-width: 860px) {
  .block { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
  .block--flip .block__visual { order: 0; }
  .chapter { padding: 80px 0 60px; }
  .chapter__title { margin-bottom: 40px; }
  .bignum { font-size: 64px; }
}

/* ───────── Chart wrapper ───────── */
.chart {
  background: var(--report-bg-card);
  border: 1px solid var(--ff-border-subtle);
  border-radius: var(--ff-radius-xl);
  padding: 32px;
  position: relative;
}
.chart__title {
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ff-fg-2); font-weight: 600;
  margin-bottom: 24px;
}
.chart__legend {
  display: flex; flex-wrap: wrap; gap: 16px 24px;
  margin-top: 20px;
  font-size: 13px; color: var(--ff-fg-1);
}
.chart__legend-item { display: inline-flex; align-items: center; gap: 8px; }
.chart__legend-sw { width: 14px; height: 14px; border-radius: 3px; }
.chart__legend-sw--dot { border-radius: 50%; }
.chart__note {
  font-size: 12px; color: var(--ff-fg-3);
  margin-top: 18px;
}

svg { overflow: visible; }

/* ───────── Quote card ───────── */
.quote {
  background: var(--report-bg-card);
  border: 1px solid var(--ff-border-subtle);
  border-left: 3px solid var(--ff-orange-500);
  border-radius: var(--ff-radius-xl);
  padding: 44px 48px;
  margin: 48px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.quote__text {
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.4;
  color: white;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.quote__text::before { content: "\201C"; color: var(--ff-orange-500); margin-right: 6px; }
.quote__text::after { content: "\201D"; color: var(--ff-orange-500); margin-left: 2px; }
.quote__attr {
  display: flex; align-items: center; gap: 14px;
  min-width: 220px;
}
.quote__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ff-bg-3);
  overflow: hidden; flex-shrink: 0;
  border: 1px solid var(--ff-border-medium);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: white; font-size: 18px;
}
.quote__avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote__name { font-size: 15px; font-weight: 700; color: white; }
.quote__title { font-size: 13px; color: var(--ff-fg-2); margin-top: 2px; }

@media (max-width: 860px) {
  .quote { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
}

/* ───────── Interstitial ───────── */
.interstitial {
  background: var(--report-bg-warm);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.interstitial::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 60% at 100% 50%, rgba(242, 101, 35, 0.14) 0%, transparent 60%);
  pointer-events: none;
}
.interstitial__inner {
  position: relative;
  max-width: 1200px; margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.interstitial__label {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ff-orange-500); font-weight: 700;
  margin-bottom: 20px;
}
.interstitial__title {
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 800; color: white;
  line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.interstitial__bullets { list-style: none; margin: 0 0 32px; }
.interstitial__bullets li {
  position: relative; padding-left: 30px;
  color: var(--ff-fg-1); font-size: 16px;
  line-height: 1.55; margin-bottom: 12px;
}
.interstitial__bullets li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 16px; height: 10px;
  border-left: 2px solid var(--ff-orange-500);
  border-bottom: 2px solid var(--ff-orange-500);
  transform: rotate(-45deg);
}
.interstitial__visual {
  position: relative;
}
.interstitial__visual img {
  width: 100%; border-radius: var(--ff-radius-lg);
  border: 1px solid var(--ff-border-subtle);
}
.mini-testimonial {
  position: absolute;
  bottom: -28px; left: 20px;
  background: var(--report-bg);
  border: 1px solid var(--ff-border-medium);
  border-radius: var(--ff-radius-lg);
  padding: 18px 20px;
  max-width: 320px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
.mini-testimonial__stat {
  font-size: 22px; font-weight: 800; color: var(--ff-orange-500);
  letter-spacing: -0.02em;
}
.mini-testimonial__text {
  font-size: 13px; color: var(--ff-fg-1);
  margin-top: 4px; line-height: 1.4;
}
.mini-testimonial__by {
  font-size: 12px; color: var(--ff-fg-2);
  margin-top: 8px;
}

@media (max-width: 860px) {
  .interstitial__inner { grid-template-columns: 1fr; gap: 40px; }
  .interstitial { padding: 64px 0; }
}

/* ───────── Closing ───────── */
.closing {
  position: relative;
  padding: 160px 0 180px;
  background: var(--report-bg);
  overflow: hidden;
  text-align: center;
}
.closing::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(242, 101, 35, 0.35) 0%, rgba(232, 74, 10, 0.1) 30%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(242, 101, 35, 0.06) 1px, transparent 1.5px);
  background-size: cover, 28px 28px;
}
.closing__inner { position: relative; max-width: 880px; margin: 0 auto; padding: 0 32px; }
.closing__title {
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 800; color: white;
  line-height: 1; letter-spacing: -0.03em;
  margin-bottom: 22px;
}
.closing__sub { font-size: 20px; color: var(--ff-fg-1); margin-bottom: 40px; }
.closing__cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 72px; }
.closing__logos {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
  margin-bottom: 18px;
}
.closing__logo {
  padding: 10px 18px;
  border-radius: var(--ff-radius-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ff-border-subtle);
  color: var(--ff-fg-1);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.02em;
}
.closing__caption { font-size: 13px; color: var(--ff-fg-2); letter-spacing: 0.1em; text-transform: uppercase; }

/* ───────── Closing logo marquee ───────── */
.closing__marquee {
  position: relative;
  margin-top: 56px;
  width: 100%;
  overflow: hidden;
  /* fade out at edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.closing__marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: ff-marquee 48s linear infinite;
  will-change: transform;
}
.closing__marquee:hover .closing__marquee-track { animation-play-state: paused; }

.closing__marquee-group {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-right: 64px;        /* keep gap continuous between A and B */
  flex-shrink: 0;
}

/* All tiles share the SAME height — that's the visual ruler. Logos fill it
   with `object-fit: contain`, so width varies naturally with aspect ratio
   but optical weight stays even. Wordmarks render in the upper portion of
   the tile, icons fill more of it. We then size each logo's content area
   via the tile's `aspect-ratio` so wide wordmarks get more horizontal room
   without ballooning vertically. */
.logo-tile {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.9;
  transition: opacity var(--ff-dur-med) var(--ff-ease), transform var(--ff-dur-med) var(--ff-ease);
}
.logo-tile:hover { opacity: 1; transform: translateY(-2px); }
.logo-tile img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);     /* default: white silhouettes */
}

/* Per-logo display height — calibrated for equal optical weight at 56px tile.
   Wordmarks (mostly horizontal) sit at ~60% of tile; icon-shape logos sit at
   ~85% so they don't look puny next to wide text. */
.logo-tile img[src*="logo-hubx"]      { height: 36px; filter: brightness(0) invert(1); }
.logo-tile img[src*="logo-lifesum"]   { height: 42px; filter: none; }
.logo-tile img[src*="logo-windy"]     { height: 30px; filter: brightness(0) invert(1); }
.logo-tile img[src*="logo-zumba"]     { height: 56px; filter: none; border-radius: 10px; }
.logo-tile img[src*="logo-picsart"]   { height: 56px; filter: none; }
.logo-tile img[src*="logo-niby"]      { height: 42px; filter: none; }
.logo-tile img[src*="logo-shapes"]    { height: 44px; filter: none; }
.logo-tile img[src*="logo-wordmark1"] { height: 28px; filter: brightness(0) invert(1); }
.logo-tile img[src*="logo-wordmark2"] { height: 32px; filter: brightness(0) invert(1); }

/* inDrive's source has the wordmark stacked under the icon. Show only the
   icon portion via clip + scale so it reads as one neat icon at tile height. */
.logo-tile.is-indrive {
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 12px;
}
.logo-tile.is-indrive img {
  height: 110px;        /* zoom in so the icon fills the tile */
  width: 110px;
  object-fit: cover;
  object-position: center 18%;   /* push the icon up — wordmark falls outside */
  filter: none;
}

@keyframes ff-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .closing__marquee-track { animation: none; }
}

@media (max-width: 720px) {
  .closing__marquee { margin-top: 40px; }
  .logo-tile { height: 40px; }
  .closing__marquee-group { gap: 44px; padding-right: 44px; }
  .logo-tile img[src*="logo-hubx"]      { height: 26px; }
  .logo-tile img[src*="logo-lifesum"]   { height: 30px; }
  .logo-tile img[src*="logo-windy"]     { height: 22px; }
  .logo-tile img[src*="logo-zumba"]     { height: 40px; }
  .logo-tile img[src*="logo-picsart"]   { height: 40px; }
  .logo-tile img[src*="logo-niby"]      { height: 30px; }
  .logo-tile img[src*="logo-shapes"]    { height: 32px; }
  .logo-tile img[src*="logo-wordmark1"] { height: 20px; }
  .logo-tile img[src*="logo-wordmark2"] { height: 24px; }
  .logo-tile.is-indrive { width: 40px; height: 40px; }
  .logo-tile.is-indrive img { height: 78px; width: 78px; }
}

/* ───────── Footer ───────── */
.footer {
  padding: 40px 0;
  background: #0D0504;
  border-top: 1px solid var(--ff-border-subtle);
}
.footer__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.footer__left { display: flex; align-items: center; gap: 16px; }
.footer__left img { height: 22px; }
.footer__left span { color: var(--ff-fg-2); font-size: 14px; }
.footer__center { color: var(--ff-fg-2); font-size: 13px; }

/* ───────── Small stat cards row ───────── */
.stat-flip-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin: 28px 0 0;
}
.stat-flip-card {
  background: var(--report-bg-card);
  border: 1px solid var(--ff-border-subtle);
  border-radius: var(--ff-radius-xl);
  padding: 32px 26px;
  text-align: left;
  transition: transform 700ms var(--ff-ease), opacity 700ms var(--ff-ease);
  opacity: 0;
  transform: rotateY(-18deg) translateY(20px);
  transform-origin: center;
}
.stat-flip-card.is-in { opacity: 1; transform: rotateY(0) translateY(0); }
.stat-flip-card__val {
  font-size: 44px; font-weight: 800; color: var(--ff-orange-500);
  letter-spacing: -0.03em; line-height: 1;
}
.stat-flip-card__label {
  font-size: 15px; color: white; margin-top: 10px;
  font-weight: 500; line-height: 1.4;
}
.stat-flip-card__sub {
  font-size: 13px; color: var(--ff-fg-2); margin-top: 14px;
  line-height: 1.5;
}
@media (max-width: 720px) {
  .stat-flip-row { grid-template-columns: 1fr; }
}

/* ───────── Heatmap ───────── */
.heatmap {
  display: grid;
  gap: 4px;
  font-size: 13px;
}
.heatmap__row { display: grid; grid-template-columns: 110px repeat(6, 1fr); gap: 4px; }
.heatmap__label { color: var(--ff-fg-2); padding: 12px 0; font-size: 13px; }
.heatmap__cell {
  padding: 18px 0;
  text-align: center;
  border-radius: 6px;
  color: white;
  font-weight: 600;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 400ms var(--ff-ease), transform 400ms var(--ff-ease);
}
.heatmap__cell.is-in { opacity: 1; transform: scale(1); }
.heatmap__header { font-size: 11px; color: var(--ff-fg-3); text-transform: uppercase; letter-spacing: 0.1em; text-align: center; padding: 8px 0; font-weight: 600; }

/* ───────── Payment Infrastructure grid ───────── */
.pmt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.pmt-grid__cell {
  aspect-ratio: 2 / 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ff-border-subtle);
  border-radius: var(--ff-radius-md);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 14px;
  letter-spacing: -0.01em;
}

/* ───────── Scatter plot helpers ───────── */
.legend-row {
  display: flex; gap: 28px; margin-top: 18px;
  font-size: 13px; color: var(--ff-fg-1); flex-wrap: wrap;
}

/* Two-column small stat pills for Web vs App LTV */
.ltv-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 24px;
}
.ltv-compare__card {
  background: var(--report-bg-card);
  border: 1px solid var(--ff-border-subtle);
  border-radius: var(--ff-radius-lg);
  padding: 28px 24px;
}
.ltv-compare__card--win { border-color: rgba(242, 101, 35, 0.4); }
.ltv-compare__label { font-size: 13px; color: var(--ff-fg-2); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 12px; }
.ltv-compare__val { font-size: 44px; font-weight: 800; color: white; letter-spacing: -0.03em; }
.ltv-compare__val--win { color: var(--ff-orange-500); }

/* Retention card cluster */
.retention-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 8px;
}
@media (max-width: 860px) { .retention-row { grid-template-columns: 1fr; } }
.retention-card {
  background: var(--report-bg-card);
  border: 1px solid var(--ff-border-subtle);
  border-radius: var(--ff-radius-xl);
  padding: 28px 24px;
}
.retention-card h4 {
  font-size: 18px; color: white; font-weight: 700; margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.retention-card p { font-size: 13px; color: var(--ff-fg-2); margin-bottom: 16px; }

/* Inline chart axis labels */
.axis-label { fill: var(--ff-fg-3); font-size: 11px; font-family: var(--ff-font-sans); }
.axis-tick { fill: var(--ff-fg-2); font-size: 12px; font-family: var(--ff-font-sans); }
.bar-value { fill: white; font-size: 13px; font-weight: 700; font-family: var(--ff-font-sans); }
.slice-label { fill: white; font-size: 13px; font-weight: 700; font-family: var(--ff-font-sans); pointer-events: none; }

/* Counter */
.count { display: inline-block; font-variant-numeric: tabular-nums; }

/* ───────── Methodology section (after hero) ───────── */
.methodology {
  position: relative;
  padding: 100px 0 80px;
  background: var(--report-bg);
  border-top: 1px solid var(--ff-border-subtle);
  border-bottom: 1px solid var(--ff-border-subtle);
}
.methodology__inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.methodology__label {
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 600; color: var(--ff-orange-500); margin-bottom: 16px;
}
.methodology__title {
  font-size: clamp(28px, 3vw, 40px); font-weight: 800; color: white;
  line-height: 1.1; letter-spacing: -0.02em; max-width: 800px; margin-bottom: 56px;
}
.methodology__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-bottom: 64px;
}
@media (max-width: 860px) { .methodology__grid { grid-template-columns: 1fr 1fr; } }
.methodology__card {
  background: var(--report-bg-card); border: 1px solid var(--ff-border-subtle);
  border-radius: var(--ff-radius-lg); padding: 26px 22px;
}
.methodology__card-num {
  font-size: 36px; font-weight: 800; color: var(--ff-orange-500);
  letter-spacing: -0.03em; line-height: 1; margin-bottom: 12px;
}
.methodology__card-label { font-size: 14px; color: white; font-weight: 600; margin-bottom: 6px; }
.methodology__card-sub { font-size: 12px; color: var(--ff-fg-2); line-height: 1.5; }

.methodology__regions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
@media (max-width: 860px) { .methodology__regions { grid-template-columns: 1fr; } }
.methodology__regions-copy h3 {
  font-size: 22px; color: white; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.01em;
}
.methodology__regions-copy p { color: var(--ff-fg-1); font-size: 15px; line-height: 1.55; }
.methodology__regions-copy ul { list-style: none; margin-top: 18px; }
.methodology__regions-copy li {
  position: relative; padding-left: 22px; margin-top: 10px; color: var(--ff-fg-1); font-size: 15px;
}
.methodology__regions-copy li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--ff-orange-500);
}
.region-map {
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(242,101,35,0.10), transparent 60%),
    var(--report-bg-card);
  border: 1px solid var(--ff-border-subtle);
  border-radius: var(--ff-radius-xl);
  padding: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.region-globe-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Privacy / methodology block */
.methodology__privacy {
  display: grid; grid-template-columns: auto 1fr; gap: 24px;
  background: var(--report-bg-card); border: 1px solid var(--ff-border-subtle);
  border-radius: var(--ff-radius-lg); padding: 28px 32px;
  margin-bottom: 56px;
}
.methodology__privacy-icon {
  font-size: 28px; line-height: 1; padding-top: 4px;
}
.methodology__privacy-body h3 {
  font-size: 16px; font-weight: 700; color: white; margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.methodology__privacy-body p {
  color: var(--ff-fg-1); font-size: 14px; line-height: 1.55; margin-bottom: 12px;
}
.methodology__privacy-body ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.methodology__privacy-body li {
  position: relative; padding-left: 18px; color: var(--ff-fg-1);
  font-size: 13.5px; line-height: 1.55;
}
.methodology__privacy-body li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ff-orange-500);
}
@media (max-width: 720px) {
  .methodology__privacy { grid-template-columns: 1fr; }
}

/* ───────── Scope strip + scope grid ───────── */
.scope-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  margin: 0 0 24px;
  border-radius: var(--ff-radius-lg);
  background:
    radial-gradient(120% 220% at 0% 0%, rgba(242,101,35,0.10) 0%, rgba(242,101,35,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid var(--ff-border-subtle);
  position: relative;
  overflow: hidden;
}
.scope-strip::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ff-orange-500), transparent 40%);
  height: 2px; top: 0; bottom: auto;
  opacity: 0.85;
}
.scope-strip__item { text-align: left; }
.scope-strip__num {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  color: white;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, var(--ff-orange-500) 180%);
  -webkit-background-clip: text;
  background-clip: text;
}
.scope-strip__label {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ff-fg-2);
  font-weight: 600;
}
.scope-strip__divider {
  width: 1px; height: 44px;
  background: linear-gradient(180deg, transparent, var(--ff-border-medium), transparent);
}
@media (max-width: 860px) {
  .scope-strip { grid-template-columns: 1fr 1fr; gap: 20px; padding: 22px; }
  .scope-strip__divider { display: none; }
}

.scope-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
  margin-bottom: 64px;
}
.scope-card {
  position: relative;
  padding: 22px 22px 24px;
  border-radius: var(--ff-radius-lg);
  background: var(--report-bg-card);
  border: 1px solid var(--ff-border-subtle);
  transition: border-color var(--ff-dur-fast, 180ms) ease, transform var(--ff-dur-fast, 180ms) ease, background var(--ff-dur-fast, 180ms) ease;
}
.scope-card:hover {
  border-color: rgba(242,101,35,0.45);
  transform: translateY(-2px);
}
.scope-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ff-border-subtle);
  color: var(--ff-fg-1);
  margin-bottom: 14px;
}
.scope-card__icon--accent {
  background: rgba(242,101,35,0.12);
  border-color: rgba(242,101,35,0.35);
  color: var(--ff-orange-500);
}
.scope-card__title {
  font-size: 15px;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.scope-card__body {
  font-size: 13.5px;
  color: var(--ff-fg-1);
  line-height: 1.55;
  margin: 0;
}
.scope-card--privacy {
  grid-column: span 2;
  background:
    radial-gradient(140% 200% at 100% 0%, rgba(242,101,35,0.08) 0%, rgba(242,101,35,0) 60%),
    var(--report-bg-card);
}
@media (max-width: 1080px) {
  .scope-grid { grid-template-columns: repeat(2, 1fr); }
  .scope-card--privacy { grid-column: span 2; }
}
@media (max-width: 560px) {
  .scope-grid { grid-template-columns: 1fr; }
  .scope-card--privacy { grid-column: span 1; }
}

/* ───────── Quote enhancements ───────── */
.quote__takeaway {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ff-orange-500); font-weight: 700;
  margin-bottom: 18px;
}
.quote__attr { min-width: 200px; }
.quote__avatar { width: 60px; height: 60px; }
.quote--full { display: block; padding: 48px; }
.quote--full .quote__text {
  font-size: clamp(22px, 2vw, 26px); line-height: 1.45;
  margin-bottom: 28px; max-width: 100%;
}
.quote--full .quote__text::before, .quote--full .quote__text::after { content: none; }
.quote--full .quote__attr { display: flex; }
.quote--full .quote__quote-mark {
  font-size: 56px; line-height: 0.5; color: var(--ff-orange-500);
  font-weight: 800; margin-bottom: 18px;
  font-family: Georgia, serif;
}

/* ───────── Key takeaways block ───────── */
.takeaways {
  background: linear-gradient(135deg, rgba(242,101,35,0.08), rgba(232,74,10,0.04));
  border: 1px solid rgba(242,101,35,0.25);
  border-radius: var(--ff-radius-xl);
  padding: 48px;
  margin: 32px 0;
}
.takeaways__label {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ff-orange-500); font-weight: 700; margin-bottom: 12px;
}
.takeaways__title {
  font-size: 28px; color: white; font-weight: 800; line-height: 1.1;
  letter-spacing: -0.02em; margin-bottom: 28px; max-width: 800px;
}
.takeaways__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 860px) { .takeaways__grid { grid-template-columns: 1fr; } }
.takeaways__card {
  display: flex; gap: 16px; align-items: flex-start;
}
.takeaways__num {
  font-size: 32px; font-weight: 800; color: var(--ff-orange-500);
  letter-spacing: -0.03em; line-height: 1; flex-shrink: 0;
  min-width: 36px;
}
.takeaways__card-body p { color: var(--ff-fg-1); font-size: 15px; line-height: 1.5; }
.takeaways__card-body strong { color: white; }
.takeaways__next {
  margin-top: 36px; padding: 24px 28px;
  border: 1px solid rgba(242, 101, 35, 0.35);
  background: linear-gradient(180deg, rgba(242, 101, 35, 0.10), rgba(242, 101, 35, 0.03));
  border-radius: 12px;
}
.takeaways__next-label {
  display: inline-block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ff-orange-500); font-weight: 700; margin-bottom: 8px;
}
.takeaways__next p {
  color: white; font-size: 16px; line-height: 1.55; margin: 0;
}

/* Web vs App comparison cards */
.vs-card {
  position: relative;
  padding: 28px 24px 22px;
  border-radius: 14px;
  border: 1px solid var(--ff-line-1);
  background: var(--ff-bg-2);
}
.vs-card--winner {
  border-color: rgba(242, 101, 35, 0.45);
  background: linear-gradient(180deg, rgba(242, 101, 35, 0.10), rgba(242, 101, 35, 0.02));
  box-shadow: 0 0 0 1px rgba(242, 101, 35, 0.18), 0 14px 40px -16px rgba(242, 101, 35, 0.30);
}
.vs-card--loser { opacity: 0.78; }
.vs-card__badge {
  display: inline-block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: var(--ff-fg-1);
  margin-bottom: 16px;
}
.vs-card__badge--winner {
  background: var(--ff-orange-500); color: white;
}
.vs-card__final {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--ff-line-1);
  font-size: 14px; color: var(--ff-fg-1);
}
.vs-card__final strong { color: white; font-size: 18px; }
.vs-card__final--winner { color: white; }

/* Reasons grid */
.reasons-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
@media (max-width: 1100px) { .reasons-grid { grid-template-columns: repeat(2, 1fr); } }
.reasons-grid li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 18px 16px; border: 1px solid var(--ff-line-1); border-radius: 10px;
  background: var(--ff-bg-2);
  font-size: 14px; line-height: 1.45; color: var(--ff-fg-1);
}
.reasons-grid li strong { color: white; display: block; margin-bottom: 2px; }
.reasons-grid__num {
  font-size: 14px; font-weight: 700; color: var(--ff-orange-500);
  letter-spacing: 0.05em; flex-shrink: 0;
}

/* Region logos at bottom */
.closing__region-logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px; max-width: 760px; margin: 32px auto 0;
}
@media (max-width: 720px) { .closing__region-logos { grid-template-columns: repeat(2, 1fr); } }
.closing__region-logos .closing__logo {
  padding: 14px 12px;
  font-size: 13px;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
}

/* ───────── Box-plot (Subscription LTV distributions) ───────── */
.boxplot-section { display: grid; gap: 28px; }
.boxplot-card {
  background: var(--ff-bg-1);
  border: 1px solid var(--ff-border-subtle);
  border-radius: var(--ff-radius-xl);
  padding: 36px 40px 28px;
  position: relative;
  overflow: hidden;
}
.boxplot-card__head {
  margin-bottom: 28px;
  display: flex; flex-direction: column; gap: 4px;
}
.boxplot-card__eyebrow {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ff-fg-2); font-weight: 600;
}
.boxplot-card__title {
  font-size: 22px; font-weight: 800; color: var(--ff-fg-0);
  letter-spacing: -0.01em; line-height: 1.25;
  max-width: 720px;
}
.boxplot-card__title .hl { color: var(--ff-orange-500); }
.boxplot-card__plot {
  background: var(--ff-bg-2);
  border-radius: 12px;
  padding: 20px 16px;
  position: relative;
  border: 1px solid var(--ff-border-subtle);
}
.boxplot-card__plot svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; }

/* ─── Refund stat ladder (Time to refund · distribution) ─── */
.refund-stat-ladder {
  position: relative;
  background: var(--ff-bg-1);
  border: 1px solid var(--ff-border-subtle);
  border-radius: var(--ff-radius-lg);
  padding: 32px 32px 32px 56px;
  height: 100%;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.refund-stat-ladder::before {
  content: '';
  position: absolute;
  left: 56px;
  right: 32px;
  top: 56px;
  bottom: 56px;
  border-left: 1.5px solid #6B7FD7;
  width: 0;
  pointer-events: none;
}
.refund-stat-ladder__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1;
}
.refund-stat-ladder__cap {
  width: 24px;
  height: 1.5px;
  background: #6B7FD7;
  flex-shrink: 0;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 700ms var(--ff-ease);
}
.refund-stat-ladder.is-revealed .refund-stat-ladder__cap {
  transform: scaleX(1);
}
.refund-stat-ladder.is-revealed .refund-stat-ladder__row--max .refund-stat-ladder__cap { transition-delay: 80ms; }
.refund-stat-ladder.is-revealed .refund-stat-ladder__row--avg .refund-stat-ladder__cap { transition-delay: 220ms; }
.refund-stat-ladder.is-revealed .refund-stat-ladder__row--med .refund-stat-ladder__cap { transition-delay: 360ms; }
.refund-stat-ladder.is-revealed .refund-stat-ladder__row--min .refund-stat-ladder__cap { transition-delay: 500ms; }
.refund-stat-ladder__label {
  font-size: 15px;
  color: var(--ff-fg-1);
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 500ms var(--ff-ease), transform 500ms var(--ff-ease);
}
.refund-stat-ladder.is-revealed .refund-stat-ladder__label {
  opacity: 1;
  transform: translateX(0);
}
.refund-stat-ladder.is-revealed .refund-stat-ladder__row--max .refund-stat-ladder__label { transition-delay: 240ms; }
.refund-stat-ladder.is-revealed .refund-stat-ladder__row--avg .refund-stat-ladder__label { transition-delay: 380ms; }
.refund-stat-ladder.is-revealed .refund-stat-ladder__row--med .refund-stat-ladder__label { transition-delay: 520ms; }
.refund-stat-ladder.is-revealed .refund-stat-ladder__row--min .refund-stat-ladder__label { transition-delay: 660ms; }
.refund-stat-ladder__label strong {
  color: var(--ff-fg-0);
  font-weight: var(--ff-fw-semibold);
  font-size: 17px;
  margin-right: 2px;
}
.refund-stat-ladder__label span {
  color: var(--ff-fg-2);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

/* Print styling for download */
@media print {
  .nav, .progress-bar, .hero__scroll { display: none; }
  body { background: white; color: black; }
  .refund-stat-ladder__cap { transform: scaleX(1) !important; }
  .refund-stat-ladder__label { opacity: 1 !important; transform: none !important; }
}