/* Figma 257:110864, 257:110958, 257:110969 and 257:111066.
   The existing counters, scroll-driven story and mobile chart remain live. */
body.ui-study #stats {
  padding-block: 84px;
  background: #fff;
}

body.ui-study #stats .proof-number {
  font-size: var(--display-size);
  line-height: var(--display-line);
  font-weight: 450;
  letter-spacing: 0;
  color: #0b1220;
}

body.ui-study #stats .proof-number > .proof-suffix {
  font-size: inherit;
}

body.ui-study #stats .proof-grid-v2 p {
  max-width: 580px;
  margin-top: 12px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: #707070;
}

body.ui-study #growth-tools {
  background: #fff;
  color: #0b1220;
}

body.ui-study #growth-tools .growth-story-title {
  margin-bottom: 32px;
  color: #0b1220;
}

body.ui-study #growth-tools .growth-story-copy h3 {
  color: #0b1220;
  font-weight: 450;
  letter-spacing: 0;
  text-wrap: pretty;
}

body.ui-study #growth-tools .growth-story-eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: #64748b;
}

body.ui-study #growth-tools .growth-story-art {
  border-radius: 11.2px;
}

/* Keep the editable illustration and its real logo crop. These are the
   source composition's proportions, scaled by the existing figure viewport. */
body.ui-study #growth-tools .mmg-art-seo {
  padding: 0;
  color: #0b1220;
}

body.ui-study #growth-tools .mmg-art-seo .mmg-composition {
  --mmg-unit: calc(100cqw / 560);
  transform: translateY(2.953cqw);
}

body.ui-study #growth-tools .mmg-art-seo .mmg-seo {
  width: 95.1643%;
  aspect-ratio: 532.92 / 477.183;
  margin-inline: auto;
  padding: calc(27.38 * var(--mmg-unit)) calc(21.51 * var(--mmg-unit));
  border: calc(1.54 * var(--mmg-unit)) solid #cbd5e166;
  border-radius: calc(38.092 * var(--mmg-unit));
  box-shadow: none;
  font-family: Arial, sans-serif;
}

body.ui-study #growth-tools .mmg-art-seo .mmg-search {
  display: flex;
  align-items: center;
  width: calc(482.072 * var(--mmg-unit));
  height: calc(49.87 * var(--mmg-unit));
  margin: 0 0 calc(48.89 * var(--mmg-unit)) calc(3.911 * var(--mmg-unit));
  padding: 0 calc(23.468 * var(--mmg-unit));
  border: calc(1.956 * var(--mmg-unit)) solid #cbd5e1;
  border-radius: calc(17.776 * var(--mmg-unit));
  box-shadow: 0 calc(14.668 * var(--mmg-unit)) calc(24.446 * var(--mmg-unit)) calc(-5.079 * var(--mmg-unit)) #60483914;
  font-size: calc(17.6 * var(--mmg-unit));
  line-height: calc(24.446 * var(--mmg-unit));
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

body.ui-study #growth-tools .mmg-art-seo :is(.mmg-result, .mmg-skeleton) {
  grid-template-columns: calc(13.69 * var(--mmg-unit)) minmax(0, 1fr);
  width: calc(482.072 * var(--mmg-unit));
  gap: calc(11.734 * var(--mmg-unit));
  margin-bottom: calc(14.668 * var(--mmg-unit));
  padding: 0;
}

body.ui-study #growth-tools .mmg-art-seo :is(.mmg-result > div, .mmg-skeleton-lines) {
  background: #fff;
  border-radius: calc(19.046 * var(--mmg-unit));
  box-shadow: 0 calc(15.645 * var(--mmg-unit)) calc(25.424 * var(--mmg-unit)) calc(-6.349 * var(--mmg-unit)) #6048391a;
}

body.ui-study #growth-tools .mmg-art-seo .mmg-result > div {
  min-height: calc(83.116 * var(--mmg-unit));
  padding: calc(7.823 * var(--mmg-unit)) calc(9.778 * var(--mmg-unit));
}

body.ui-study #growth-tools .mmg-art-seo .mmg-seo-logo {
  width: calc(13.69 * var(--mmg-unit));
  height: calc(13.69 * var(--mmg-unit));
  margin-top: calc(10.756 * var(--mmg-unit));
}

body.ui-study #growth-tools .mmg-art-seo .mmg-result-link {
  margin-bottom: calc(.978 * var(--mmg-unit));
  font-size: calc(13.89 * var(--mmg-unit));
  line-height: calc(18.579 * var(--mmg-unit));
  color: #0b1220;
}

body.ui-study #growth-tools .mmg-art-seo .mmg-url {
  margin-bottom: calc(.978 * var(--mmg-unit));
  font-size: calc(11.73 * var(--mmg-unit));
  line-height: calc(13.69 * var(--mmg-unit));
  color: #0b1220;
}

body.ui-study #growth-tools .mmg-art-seo .mmg-result-description {
  font-size: calc(10.46 * var(--mmg-unit));
  line-height: calc(13.69 * var(--mmg-unit));
  color: #0b1220;
}

body.ui-study #growth-tools .mmg-art-seo .mmg-skeleton {
  margin-bottom: calc(15.646 * var(--mmg-unit));
}

body.ui-study #growth-tools .mmg-art-seo .mmg-skeleton-dot {
  height: calc(13.69 * var(--mmg-unit));
  margin-top: calc(11.734 * var(--mmg-unit));
  background: #e8eef5;
}

body.ui-study #growth-tools .mmg-art-seo .mmg-skeleton-lines {
  min-height: calc(84.094 * var(--mmg-unit));
  gap: calc(7.823 * var(--mmg-unit));
  padding: calc(11.734 * var(--mmg-unit)) calc(10.756 * var(--mmg-unit));
}

body.ui-study #growth-tools .mmg-art-seo .mmg-skeleton-lines span {
  height: calc(9.778 * var(--mmg-unit));
  background: #e8eef5;
  opacity: 1;
  border-radius: calc(3.809 * var(--mmg-unit));
}

body.ui-study #growth-tools .mmg-art-seo .mmg-skeleton-lines span:first-child {
  width: 66.5%;
  height: calc(13.69 * var(--mmg-unit));
}

body.ui-study #growth-tools .mmg-art-seo .mmg-skeleton-lines span:nth-child(2) { width: 28.8%; }
body.ui-study #growth-tools .mmg-art-seo .mmg-skeleton-lines span:last-child { width: 78%; }
body.ui-study #growth-tools .mmg-art-seo .mmg-skeleton:last-child .mmg-skeleton-lines::after {
  content: "";
  display: block;
  width: 48%;
  height: calc(9.778 * var(--mmg-unit));
  border-radius: calc(3.809 * var(--mmg-unit));
  background: #e8eef5;
}

body.ui-study #conversion .conversion-proof-grid { gap: 24px; }
body.ui-study #conversion .conversion-proof-metric { border-color: #cbd5e140; }
body.ui-study #conversion .conversion-proof-metric strong {
  color: #dc5c28;
  font-weight: 450;
  letter-spacing: 0;
}
body.ui-study #conversion .conversion-proof-metric p {
  max-width: none;
  margin-top: 12px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: #707070;
}
body.ui-study #conversion .conversion-proof-metric strong.rating-score { color: #000; }
body.ui-study #conversion .rating-star { fill: #dc5c28; }
body.ui-study #conversion .source-note {
  margin-top: 24px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0;
  color: #000;
}

body.ui-study #growth .revenue-chart { border-color: #e8eef5; }
body.ui-study #growth .revenue-chart::before { border-color: #e8eef5; }
body.ui-study #growth .revenue-market {
  background: linear-gradient(180deg, #efefef, #cdcdcd);
  color: #707070;
}
body.ui-study #growth .revenue-goulash {
  background: linear-gradient(180deg, #ffc6ae, #ff7a44 99.933%);
  color: #0b1220;
}
body.ui-study #growth .revenue-bar strong {
  font-weight: 450;
  letter-spacing: 0;
}
body.ui-study #growth .revenue-bar p { letter-spacing: 0; }
body.ui-study #growth .revenue-difference strong {
  color: #0b1220;
  letter-spacing: 0;
}
body.ui-study #growth .revenue-difference p { color: #707070; letter-spacing: 0; }
body.ui-study #growth .difference-rule {
  background: repeating-linear-gradient(to bottom, #f58b60 0 4px, transparent 4px 8px);
}
body.ui-study #growth .difference-rule-top::before { border-bottom-color: #f58b60; }
body.ui-study #growth .source-note {
  max-width: 770px;
  margin-top: 22px;
  font-size: 10px;
  line-height: 17px;
  letter-spacing: 0;
  color: #64748b;
}

@media (min-width: 700px) {
  body.ui-study #growth-tools .growth-story-stage {
    width: calc(100% - var(--page-gutter) * 2 - 24px);
    max-width: 1224px;
  }
  body.ui-study #growth-tools .growth-story-panel { gap: 0; }
  body.ui-study #growth-tools .growth-story-title { width: 50%; }
  body.ui-study #growth-tools .growth-story-copy { max-width: 612px; padding-right: 12px; }
  body.ui-study #growth-tools .growth-story-eyebrow { margin-bottom: 24px; }
}

@media (min-width: 768px) {
  body.ui-study #conversion .conversion-proof-metric {
    min-height: 148px;
    padding-left: 32px;
  }
  body.ui-study #conversion .conversion-proof-metric:first-child { padding-left: 0; }
  body.ui-study #growth .revenue-chart {
    height: clamp(400px, 44vw, 633.6px);
    grid-template-columns: 200fr 312fr 224fr 312fr 200fr;
  }
  body.ui-study #growth .revenue-bar {
    padding: 24px;
    border-radius: 22.4px 22.4px 0 0;
  }
  body.ui-study #growth .revenue-bar strong { font-size: clamp(40px, 5.556vw, 80px); line-height: 1; }
  body.ui-study #growth .revenue-difference > div { padding: 6px 0; }
  body.ui-study #growth .revenue-difference strong { font-size: clamp(28px, 3.195vw, 46px); }
  body.ui-study #growth .revenue-difference p { font-size: 12px; line-height: 18px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.ui-study #growth .revenue-bar { padding: 16px; }
  body.ui-study #conversion .conversion-proof-metric { padding-left: 20px; }
  body.ui-study #conversion .conversion-proof-metric p { font-size: 14px; line-height: 20px; }
}

@media (min-width: 1280px) {
  body.ui-study #growth-tools .growth-story-title {
    font-size: 44px;
    line-height: 48px;
    letter-spacing: -1.5px;
  }
  body.ui-study #growth-tools .growth-story-copy h3 { font-size: 30px; line-height: 40px; }
  body.ui-study #growth-tools:not(.is-enhanced) .growth-story-pin { padding-block: 148px; }
  body.ui-study :is(#conversion, #growth) { padding-block: 96px; }
  body.ui-study :is(#conversion, #growth) .section-heading {
    max-width: 958px;
    margin: 0 auto 96px;
    padding-inline: 0;
  }
  body.ui-study #conversion .section-heading { color: #000; }
  body.ui-study #conversion .section-description { color: #000; }
  body.ui-study #growth .revenue-bar p { font-size: 18px; line-height: 28px; }
}

@media (max-width: 767px) {
  body.ui-study #stats { padding-block: 48px; }
  body.ui-study #conversion .conversion-proof-metric p { font-size: 14px; line-height: 20px; }
  /* Keep the desktop's 28%, 21% and zero guides without adding border
     thickness to the mobile chart's 360px animation viewport. */
  body.ui-study #growth .revenue-chart::before {
    display: block;
    top: 25%;
  }
  body.ui-study #growth .revenue-chart::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-block: 1px solid #e8eef5;
    pointer-events: none;
  }
  body.ui-study #growth .revenue-bar strong { letter-spacing: -.025em; }
  body.ui-study #growth .revenue-difference { padding-inline-end: 20px; }
}

/* The final value reserves width so the rating star and percent suffixes do
   not move while the visible number counts up. The final text remains in SR. */
body.ui-study #conversion .figma-metric-counter {
  display: inline-grid;
  font: inherit;
  letter-spacing: inherit;
  font-variant-numeric: tabular-nums;
}
body.ui-study #conversion .figma-metric-counter::after {
  content: attr(data-final-value);
  grid-area: 1 / 1;
  visibility: hidden;
}
body.ui-study #conversion .figma-metric-value { grid-area: 1 / 1; }

/* Translate complete columns through the baseline, preserving text size.
   This scene owns its text reveal timing rather than stacking two animations. */
body.ui-study #growth .revenue-chart.figma-motion-chart {
  overflow: hidden;
  opacity: 1;
  transform: none;
}
body.ui-study #growth .figma-motion-chart .revenue-bar {
  transform: translate3d(0, var(--figma-bar-rise, 100%), 0);
}
body.ui-study #growth .figma-motion-chart .revenue-difference {
  opacity: var(--figma-delta-opacity, 0);
  transform: translate3d(0, var(--figma-delta-y, 8px), 0);
}
body.ui-study #growth .figma-motion-chart .text-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
body.ui-study #growth .figma-motion-chart:not(.is-motion-complete) .revenue-bar {
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  body.ui-study #growth .figma-motion-chart .revenue-bar { transform: none; }
  body.ui-study #growth .figma-motion-chart .revenue-difference { opacity: 1; transform: none; }
}

@media print {
  body.ui-study #growth .figma-motion-chart .revenue-bar { transform: none; }
  body.ui-study #growth .figma-motion-chart .revenue-difference { opacity: 1; transform: none; }
}