/* Backlab Growth Journey — Construa → Apareça → Atraia → Venda → Retenha.
   Fluxo vertical por padrão (mobile, tablet, reduced motion, sem JS, editor). A composição
   pinada com o sistema visual evolutivo só existe quando o JS marca
   data-bl-growth-journey-enhanced (desktop ≥1024px, altura ≥640px, motion). Nada do conteúdo
   começa oculto no CSS. */
.bl-growth-journey {
  --bl-gj-ink: var(--bl-text-primary, #f5f8f7);
  --bl-gj-muted: var(--bl-text-secondary, #a8b4b1);
  --bl-gj-faint: var(--bl-text-muted, #71807d);
  --bl-gj-brand: var(--bl-color-brand, #3dbfb0);
  --bl-gj-line: rgba(245, 248, 247, .12);
  --bl-gj-trajectory-x: 50%;
  --bl-gj-track: 400svh;
  position: relative;
  z-index: 0;
  display: flex; /* impede o colapso da margem da linha de continuidade (gap branco do body) */
  flex-direction: column;
  padding-block-end: clamp(4rem, 10svh, 7rem);
  color: var(--bl-gj-ink);
  background: var(--bl-bg-deep, #050707);
  isolation: isolate;
}

.bl-growth-journey,
.bl-growth-journey *,
.bl-growth-journey *::before,
.bl-growth-journey *::after {
  box-sizing: border-box;
}

.bl-growth-journey__sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Continuação estrutural da trajetória do Growth Intro ([data-bl-trajectory-end], eixo 50%):
   linha estática de 1px que nasce do ponto de continuidade e se dissolve antes do eyebrow.
   Base (mobile) curta de propósito: somada à trajetória do Growth Intro, a escala de desktop
   abria um vazio de ~359px entre o último texto da intro e este eyebrow em 390x844.
   A partir de 768px a linha volta à altura original. */
.bl-growth-journey__lead-line {
  display: block;
  inline-size: 1px;
  block-size: clamp(2.25rem, 6svh, 3.25rem);
  margin: .35rem auto 0;
  background: linear-gradient(180deg, rgba(61, 191, 176, .55), rgba(61, 191, 176, 0));
  pointer-events: none;
}

/* ---- Introdução ---------------------------------------------------------------------- */
.bl-growth-journey__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.6svh, 1.5rem);
  padding-block: clamp(1.5rem, 4svh, 2.5rem) clamp(4rem, 10svh, 7rem);
  text-align: center;
}

.bl-growth-journey__eyebrow {
  margin: 0;
  color: var(--bl-gj-muted);
  font: 500 clamp(.67rem, .59rem + .25vw, .78rem)/1.6 var(--bl-font-ui, system-ui, sans-serif);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.bl-growth-journey__headline {
  margin: 0;
  max-inline-size: 18ch;
  color: var(--bl-gj-ink);
  font: 600 clamp(2.2rem, 1.1rem + 3.8vw, 4.6rem)/1.04 var(--bl-font-display, system-ui, sans-serif);
  letter-spacing: -.045em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.bl-growth-journey__lead {
  margin: 0;
  max-inline-size: 44ch;
  color: var(--bl-gj-muted);
  font: 400 clamp(1.02rem, .95rem + .4vw, 1.3rem)/1.55 var(--bl-font-ui, system-ui, sans-serif);
  text-wrap: balance;
}

/* ---- Etapas — fluxo vertical --------------------------------------------------------- */
.bl-growth-journey__steps {
  position: relative;
  display: grid;
  gap: clamp(3.5rem, 10svh, 6.5rem);
  margin: 0;
  padding: 0 0 0 clamp(1.5rem, 5vw, 2.75rem);
  list-style: none;
}

/* Linha estrutural do fluxo: um trilho de 1px com um nó por etapa. Estático. */
.bl-growth-journey__steps::before {
  position: absolute;
  inset-block: .35rem .35rem;
  inset-inline-start: .2rem;
  inline-size: 1px;
  content: '';
  background: linear-gradient(180deg, rgba(61, 191, 176, .45), var(--bl-gj-line) 18%, var(--bl-gj-line) 82%, rgba(61, 191, 176, .45));
}

.bl-growth-journey__step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'index glyph'
    'title glyph'
    'solution glyph'
    'description description'
    'link link';
  column-gap: clamp(1rem, 4vw, 2rem);
  row-gap: .85rem;
  align-items: start;
}

.bl-growth-journey__step::before {
  position: absolute;
  inset-block-start: .35rem;
  inset-inline-start: calc(-1 * clamp(1.5rem, 5vw, 2.75rem) + .2rem);
  inline-size: 5px;
  block-size: 5px;
  content: '';
  border-radius: 50%;
  background: var(--bl-gj-brand);
  box-shadow: 0 0 8px rgba(61, 191, 176, .55);
  transform: translateX(-2px);
}

.bl-growth-journey__index {
  display: flex;
  grid-area: index;
  align-items: center;
  gap: .6rem;
  color: var(--bl-gj-muted);
  font: 500 .7rem/1.2 var(--bl-font-ui, system-ui, sans-serif);
  letter-spacing: .14em;
}

.bl-growth-journey__index::after {
  inline-size: 1.65rem;
  block-size: 1px;
  content: '';
  background: linear-gradient(90deg, rgba(61, 191, 176, .7), transparent);
}

.bl-growth-journey__title {
  grid-area: title;
  margin: 0;
  color: var(--bl-gj-ink);
  font: 600 clamp(2.6rem, 13vw, 3.6rem)/.96 var(--bl-font-display, system-ui, sans-serif);
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}

/* Padding mantém descendentes (ç) dentro do recorte; a margem negativa devolve o ritmo. */
.bl-growth-journey__mask {
  display: block;
  overflow: hidden;
  padding-block: .16em;
  margin-block: -.12em;
}

.bl-growth-journey__title-line {
  display: block;
}

.bl-growth-journey__solution {
  display: flex;
  grid-area: solution;
  flex-direction: column;
  gap: .3rem;
  margin: 0;
}

.bl-growth-journey__solution-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--bl-gj-faint);
  font: 500 .66rem/1.2 var(--bl-font-ui, system-ui, sans-serif);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.bl-growth-journey__solution-label::before {
  inline-size: .3rem;
  block-size: .3rem;
  content: '';
  background: var(--bl-gj-brand);
}

.bl-growth-journey__solution-name {
  color: var(--bl-gj-ink);
  font: 500 clamp(1.15rem, 1.05rem + .45vw, 1.45rem)/1.25 var(--bl-font-ui, system-ui, sans-serif);
  letter-spacing: -.015em;
}

.bl-growth-journey__description {
  grid-area: description;
  max-inline-size: 38ch;
  margin: .25rem 0 0;
  color: var(--bl-gj-muted);
  font: 400 clamp(1.02rem, .95rem + .3vw, 1.2rem)/1.55 var(--bl-font-ui, system-ui, sans-serif);
  text-wrap: pretty;
}

.bl-growth-journey .bl-growth-journey__link {
  display: inline-flex;
  grid-area: link;
  justify-self: start;
  align-items: center;
  gap: .6rem;
  min-block-size: 2.75rem;
  margin-block-start: .35rem;
  padding: .25rem 0;
  color: var(--bl-gj-ink);
  font: 600 .95rem/1.2 var(--bl-font-ui, system-ui, sans-serif);
  text-decoration: none;
}

.bl-growth-journey__link > span:first-child {
  position: relative;
}

.bl-growth-journey__link > span:first-child::after {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -.2rem;
  block-size: 1px;
  content: '';
  background: rgba(61, 191, 176, .6);
  transform: scaleX(.42);
  transform-origin: 0 50%;
  transition: transform 200ms var(--bl-ease-out, ease-out), background-color 200ms;
}

.bl-growth-journey__link svg {
  flex: 0 0 auto;
  color: var(--bl-gj-brand);
  transition: transform 200ms var(--bl-ease-out, ease-out);
}

.bl-growth-journey .bl-growth-journey__link:focus-visible {
  outline: 2px solid var(--bl-gj-brand);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .bl-growth-journey .bl-growth-journey__link:hover {
    color: var(--bl-gj-ink);
  }

  .bl-growth-journey__link:hover > span:first-child::after {
    background: var(--bl-gj-brand);
    transform: scaleX(1);
  }

  .bl-growth-journey__link:hover svg {
    transform: translateX(3px);
  }
}

/* Glyph: estado simplificado do sistema, só no fluxo vertical. */
.bl-growth-journey__glyph {
  display: block;
  grid-area: glyph;
  inline-size: clamp(4.5rem, 18vw, 6.5rem);
  block-size: auto;
  aspect-ratio: 1;
  margin-block-start: .1rem;
  color: var(--bl-gj-brand);
  overflow: visible;
}

.bl-growth-journey__glyph-frame,
.bl-growth-journey__glyph-corners,
.bl-growth-journey__glyph-plane,
.bl-growth-journey__glyph-lines,
.bl-growth-journey__glyph-ring,
.bl-growth-journey__glyph-nodes {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.bl-growth-journey__glyph-frame { stroke: rgba(245, 248, 247, .55); }
.bl-growth-journey__glyph-corners { stroke: currentColor; opacity: .85; }
.bl-growth-journey__glyph-plane { fill: rgba(61, 191, 176, .06); stroke: currentColor; opacity: .55; }
.bl-growth-journey__glyph-lines { stroke: currentColor; opacity: .6; }
.bl-growth-journey__glyph-ring { stroke: currentColor; opacity: .55; }
.bl-growth-journey__glyph-nodes { stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.bl-growth-journey__glyph-yield { fill: currentColor; opacity: .9; }
.bl-growth-journey__glyph-core { fill: currentColor; filter: drop-shadow(0 0 5px rgba(61, 191, 176, .55)); }

/* Sistema evolutivo: só participa da composição pinada. */
.bl-growth-journey__system {
  display: none;
}

.bl-growth-journey__svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  color: var(--bl-gj-brand);
  overflow: visible;
}

.bl-growth-journey__layer {
  transform-box: fill-box;
  transform-origin: center;
}

.bl-growth-journey__axis,
.bl-growth-journey__ground,
.bl-growth-journey__pillars,
.bl-growth-journey__frame,
.bl-growth-journey__corners,
.bl-growth-journey__field,
.bl-growth-journey__plane,
.bl-growth-journey__rows,
.bl-growth-journey__vector,
.bl-growth-journey__rail,
.bl-growth-journey__ticks,
.bl-growth-journey__arrow,
.bl-growth-journey__out,
.bl-growth-journey__ring,
.bl-growth-journey__cycle-mark {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.bl-growth-journey__axis { stroke: rgba(245, 248, 247, .1); stroke-width: .65; stroke-dasharray: 1 9; }
.bl-growth-journey__ground { stroke: rgba(245, 248, 247, .3); }
.bl-growth-journey__pillars { stroke: rgba(245, 248, 247, .14); }
.bl-growth-journey__frame { stroke: rgba(245, 248, 247, .62); }
.bl-growth-journey__corners { stroke: currentColor; opacity: .85; }
.bl-growth-journey__core { fill: currentColor; filter: drop-shadow(0 0 6px rgba(61, 191, 176, .55)); }
.bl-growth-journey__field { stroke: currentColor; opacity: .2; stroke-width: .75; stroke-dasharray: 4 8; }
.bl-growth-journey__plane { fill: rgba(61, 191, 176, .05); stroke: currentColor; opacity: .42; }
.bl-growth-journey__rows { stroke: rgba(245, 248, 247, .3); }
.bl-growth-journey__vector { stroke: currentColor; opacity: .5; stroke-width: .9; }
.bl-growth-journey__rail { stroke: currentColor; opacity: .65; }
.bl-growth-journey__ticks { stroke: rgba(245, 248, 247, .35); }
.bl-growth-journey__arrow { stroke: currentColor; opacity: .85; stroke-linecap: round; stroke-linejoin: round; }
.bl-growth-journey__out { stroke: currentColor; opacity: .65; }
.bl-growth-journey__yield { fill: currentColor; opacity: .9; }
.bl-growth-journey__ring { stroke: currentColor; opacity: .5; }
.bl-growth-journey__ring--outer { stroke: rgba(245, 248, 247, .12); stroke-width: .65; stroke-dasharray: 2 10; }
.bl-growth-journey__cycle-mark { stroke: currentColor; opacity: .85; stroke-linecap: round; stroke-linejoin: round; }
.bl-growth-journey__node { fill: currentColor; }

/* Indicador de progresso: só na composição pinada. */
.bl-growth-journey__progress {
  display: none;
}

/* ---- Encerramento ------------------------------------------------------------------- */
.bl-growth-journey__outro {
  display: flex;
  justify-content: center;
  padding-block-start: clamp(5rem, 14svh, 9rem);
  text-align: center;
}

.bl-growth-journey__closing {
  margin: 0;
  max-inline-size: 34ch;
  color: var(--bl-gj-ink);
  font: 500 clamp(1.25rem, 1rem + 1.2vw, 2rem)/1.3 var(--bl-font-ui, system-ui, sans-serif);
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* ---- Tablet e desktop em fluxo (reduced motion, sem JS, alturas baixas) -------------- */
@media (min-width: 768px) {
  .bl-growth-journey__lead-line {
    block-size: clamp(4rem, 12svh, 8rem);
  }

  .bl-growth-journey__title {
    font-size: clamp(3.4rem, 1.6rem + 5.6vw, 7.2rem);
    line-height: .95;
    letter-spacing: -.06em;
  }

  .bl-growth-journey__glyph {
    inline-size: clamp(8rem, 18vw, 12rem);
  }

  .bl-growth-journey__step {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'index glyph'
      'title glyph'
      'solution glyph'
      'description glyph'
      'link glyph';
    column-gap: clamp(2rem, 6vw, 5rem);
  }
}

@media (min-width: 1024px) {
  .bl-growth-journey__glyph {
    inline-size: clamp(13rem, 18vw, 17rem);
    margin-inline-end: clamp(0rem, 8vw, 8rem);
  }
}

/* ---- Composição pinada (JS + motion + desktop com altura suficiente) ------------------ */
.bl-growth-journey[data-bl-growth-journey-enhanced] .bl-growth-journey__track {
  min-block-size: var(--bl-gj-track);
}

.bl-growth-journey[data-bl-growth-journey-enhanced] .bl-growth-journey__stage {
  position: sticky;
  inset-block-start: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  block-size: 100svh;
  padding-block: calc(var(--bl-header-compact-height, 4.5rem) + .5rem) clamp(1.5rem, 3.5svh, 2.5rem);
  overflow: hidden;
}

.bl-growth-journey[data-bl-growth-journey-enhanced] .bl-growth-journey__layout {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  min-block-size: 0;
}

.bl-growth-journey[data-bl-growth-journey-enhanced] .bl-growth-journey__steps {
  gap: 0;
  padding: 0;
}

.bl-growth-journey[data-bl-growth-journey-enhanced] .bl-growth-journey__steps::before,
.bl-growth-journey[data-bl-growth-journey-enhanced] .bl-growth-journey__step::before,
.bl-growth-journey[data-bl-growth-journey-enhanced] .bl-growth-journey__glyph {
  display: none;
}

/* As cinco etapas partilham a mesma célula; o JS alterna qual está presente. */
.bl-growth-journey[data-bl-growth-journey-enhanced] .bl-growth-journey__step {
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'index'
    'title'
    'solution'
    'description'
    'link';
  row-gap: 1rem;
  /* As etapas empilhadas não podem interceptar o clique destinado ao link da etapa visível. */
  pointer-events: none;
}

.bl-growth-journey[data-bl-growth-journey-enhanced] .bl-growth-journey__link {
  pointer-events: auto;
}

.bl-growth-journey[data-bl-growth-journey-enhanced] .bl-growth-journey__title-line {
  will-change: transform, opacity;
}

.bl-growth-journey[data-bl-growth-journey-enhanced] .bl-growth-journey__system {
  display: block;
  inline-size: min(100%, calc(100svh - 15rem));
  aspect-ratio: 1;
  margin-inline: auto;
}

.bl-growth-journey[data-bl-growth-journey-enhanced] .bl-growth-journey__progress {
  display: flex;
  gap: 1.25rem;
  inline-size: min(calc(100% - 2 * var(--bl-gutter, 1.5rem)), var(--bl-container, 85rem));
  margin-inline: auto;
}

.bl-growth-journey__progress-item {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.bl-growth-journey__progress-rail {
  display: block;
  inline-size: 2.75rem;
  block-size: 1px;
  background: var(--bl-gj-line);
}

.bl-growth-journey__progress-fill {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background: var(--bl-gj-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

.bl-growth-journey__progress-number {
  color: var(--bl-gj-muted);
  font: 500 .66rem/1 var(--bl-font-ui, system-ui, sans-serif);
  letter-spacing: .12em;
  opacity: .45;
}

@media (prefers-reduced-motion: reduce) {
  .bl-growth-journey *,
  .bl-growth-journey *::before,
  .bl-growth-journey *::after {
    animation: none;
    transition-duration: 0ms;
  }
}

@media (forced-colors: active) {
  .bl-growth-journey__lead-line,
  .bl-growth-journey__steps::before,
  .bl-growth-journey__step::before,
  .bl-growth-journey__index::after,
  .bl-growth-journey__solution-label::before,
  .bl-growth-journey__progress-rail,
  .bl-growth-journey__progress-fill { background: CanvasText; }
  .bl-growth-journey__core,
  .bl-growth-journey__glyph-core { filter: none; }
}