/* ── The enriched profile card ─────────────────────────────────────────────
   One fictional person, resolved from an identifier: who they are, the money
   signals, and what changed recently. It is the single clearest statement of
   what Consumer Intelligence does, which is why it appears twice — as the
   "Understand" step of the landing page journey, and in the hero of
   /grow/consumer-intelligence [Arjun, 2026-08-09].

   Lifted out of grow-comparison.css rather than copied. That file is 64K of
   scroll-journey layout and the card is 116 lines of it; linking the whole
   thing to reuse one component would have been the wrong trade, and keeping a
   second copy would have meant a fix landing on one page and not the other.

   Reveal is gated on an ancestor carrying .is-visible. On the landing page the
   scroll observer sets that; in a hero it is set in the markup, so the card
   plays once on load and holds.                                             */

/* Understand — one enriched profile card that fills itself in as the step arrives.
   Bands read: who -> how much we know -> the two numbers that decide an offer ->
   what just changed. Card is surface-on-vermilion, so accents stay ink/cobalt. */
.grow-b-understand { display: grid; place-items: center; }
.grow-b-understand__card {
  position: relative;
  z-index: 2;
  width: min(94%, 33rem);
  display: grid;
  border: 1px solid var(--zl-ink);
  background: var(--zl-surface);
  box-shadow: 1rem 1rem 0 rgba(28,27,23,.3);
  color: var(--zl-ink);
}
.grow-b-understand__card > * { padding: 1.15rem 1.35rem; }
.grow-b-understand__card > * + * { border-top: 1px solid var(--zl-line); }

.grow-b-understand__id { display: flex; align-items: flex-start; gap: .8rem; opacity: 0; transform: translateY(.4rem); }
.is-visible .grow-b-understand__id { animation: grow-b-u-in 420ms .12s var(--zl-ease-out) forwards; }
.grow-b-understand__avatar {
  width: 3.2rem;
  height: 3.2rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--zl-ink);
  color: var(--zl-on-dark);
  font-family: var(--zl-font-mono);
  font-size: .9rem;
  letter-spacing: .04em;
}
.grow-b-understand__who { min-width: 0; flex: 1; display: grid; gap: .1rem; }
.grow-b-understand__who i {
  color: var(--zl-vermilion-text);
  font-family: var(--zl-font-mono);
  font-size: .5rem;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.grow-b-understand__who strong { font-size: 1.22rem; letter-spacing: -.02em; line-height: 1.15; }
.grow-b-understand__who small { color: var(--zl-muted-text); font-size: .78rem; }
.grow-b-understand__age {
  flex: 0 0 auto;
  padding: .15rem .4rem;
  border: 1px solid var(--zl-line-strong);
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: .64rem;
}

.grow-b-understand__signals { display: flex; flex-wrap: wrap; gap: .45rem; }
.grow-b-understand__signals span {
  padding: .35rem .6rem;
  border: 1px solid var(--zl-line-strong);
  background: var(--zl-paper);
  font-family: var(--zl-font-mono);
  font-size: .66rem;
  opacity: 0;
  transform: translateY(.35rem);
}
.is-visible .grow-b-understand__signals span {
  animation: grow-b-u-in 380ms var(--zl-ease-out) forwards;
  animation-delay: calc(.32s + var(--i) * .06s);
}

.grow-b-understand__proof { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.grow-b-understand__metric { display: grid; gap: .18rem; align-content: start; opacity: 0; transform: translateY(.4rem); }
.is-visible .grow-b-understand__metric { animation: grow-b-u-in 420ms .62s var(--zl-ease-out) forwards; }
.is-visible .grow-b-understand__metric:nth-child(2) { animation-delay: .74s; }
.grow-b-understand__metric > span {
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.grow-b-understand__metric > strong { font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.1; }
.grow-b-understand__metric > strong i { color: var(--zl-muted-text); font-size: .72rem; font-style: normal; font-weight: var(--zl-weight-medium); }
.grow-b-understand__metric > small { color: var(--zl-muted-text); font-size: .66rem; }

.grow-b-understand__scale { display: flex; gap: 2px; margin-top: .3rem; }
.grow-b-understand__scale i { flex: 1; height: .42rem; background: var(--zl-line-strong); transform: scaleX(0); transform-origin: left; }
.grow-b-understand__scale i.is-active { background: var(--zl-vermilion); }
.is-visible .grow-b-understand__scale i {
  animation: grow-b-u-fill 260ms var(--zl-ease-out) forwards;
  animation-delay: calc(.9s + var(--i) * .07s);
}
.grow-b-understand__scale-legend { display: flex; justify-content: space-between; margin-top: .18rem; }
.grow-b-understand__scale-legend b {
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: .58rem;
  font-weight: var(--zl-weight-medium);
}

.grow-b-understand__motion { display: grid; gap: .28rem; }
.grow-b-understand__motion-label {
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.grow-b-understand__axis { display: flex; align-items: center; }
.grow-b-understand__axis i { width: .5rem; height: .5rem; flex: 0 0 auto; border-radius: 50%; background: var(--zl-line-strong); }
.grow-b-understand__axis i.is-now { background: var(--zl-vermilion); }
.grow-b-understand__axis u { flex: 1; height: 1px; background: var(--zl-line-strong); }
.grow-b-understand__axis-legend { display: flex; justify-content: space-between; }
.grow-b-understand__axis-legend b {
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: .58rem;
  font-weight: var(--zl-weight-medium);
  letter-spacing: .06em;
}
.grow-b-understand__events { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .25rem; }
.grow-b-understand__event {
  padding: .38rem .7rem;
  border: 1px solid var(--zl-vermilion);
  background: var(--zl-vermilion-wash);
  font-size: .78rem;
  font-weight: var(--zl-weight-semibold);
  opacity: 0;
  transform: translateX(-.5rem);
}
.is-visible .grow-b-understand__event {
  animation: grow-b-u-event 520ms var(--zl-ease-out) forwards;
  animation-delay: calc(1.1s + var(--i) * .14s);
}

@keyframes grow-b-u-in { to { opacity: 1; transform: none; } }

@keyframes grow-b-u-event {
  0% { opacity: 0; transform: translateX(-.5rem); }
  70% { opacity: 1; transform: translateX(.08rem); }
  100% { opacity: 1; transform: none; }
}
@keyframes grow-b-u-fill { to { transform: scaleX(1); } }