/* ── Grow visuals: the value arc ──────────────────────────────────────────
   [Arjun, 2026-08-09] "this section is too text heavy and the value is not
   coming out clearly ... resume the visual from the landing page here while
   explaining the use cases with text + flow diagrams."

   The landing page tells the Grow story as a journey — Identify, Understand,
   Act — with a drawn path connecting three steps. This is the same idea at
   product scale: four stages of the funnel on one rail, each with a diagram
   that shows the mechanic rather than describing it, and the metric it moves.

   Six paragraph cards became four stages of roughly twelve words each. The
   argument did not get smaller; the reading did.

   Every diagram is CSS and inline SVG. No canvas, no library, no build step
   (house rule 4), and each one degrades to a still frame under
   prefers-reduced-motion rather than disappearing.                          */

.civ-arc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: civ;
}

@media (min-width: 60rem) {
  .civ-arc { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.civ-arc__stage {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: .55rem;
  padding: 1.35rem 1.25rem 1.5rem;
  border-top: 1px solid var(--zl-line);
  counter-increment: civ;
}

/* The rail. On desktop the stages sit side by side and the line runs along
   their shared top edge; stacked, it runs down the left. Drawn as a border on
   the stage itself rather than as an element, so it cannot fall out of step
   with the layout. */
@media (min-width: 60rem) {
  .civ-arc__stage + .civ-arc__stage { border-left: 1px solid var(--zl-line); }
}

/* The travelling marker: a short vermilion segment that walks the rail from
   the first stage to the last, so the eye is told what order to read in. */
.civ-arc__stage::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--zl-vermilion);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: civ-rail 12s var(--zl-ease-standard) infinite;
  animation-delay: calc(var(--civ-i, 0) * 3s);
  content: "";
}

@keyframes civ-rail {
  0%          { transform: scaleX(0); opacity: 1; }
  8%, 25%     { transform: scaleX(1); opacity: 1; }
  33%, 100%   { transform: scaleX(1); opacity: .18; }
}

.civ-arc__num {
  margin: 0;
  color: var(--zl-vermilion);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
  letter-spacing: var(--zl-tracking-label);
}
.civ-arc__num::before { content: "0" counter(civ); }

.civ-arc__stage h3 {
  margin: 0;
  color: var(--zl-ink);
  font-size: var(--zl-text-md);
}

.civ-arc__stage p:not([class]) {
  margin: 0;
  color: var(--zl-body);
  font-size: var(--zl-text-sm);
  line-height: 1.55;
}

/* The metric the stage moves. Every movement listed here is a good one, so the
   colour is positive throughout and the ARROW carries the direction — colouring
   "CAC down" red because it points down would say the opposite of what happened.
   That is a deliberate departure from the green-up/red-down rule the device kit
   uses, where the direction and the sentiment are the same thing. */
.civ-arc__metric {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  margin: 0;
  padding: .2rem .45rem;
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--zl-positive) 35%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--zl-positive) 7%, transparent);
  color: var(--zl-positive);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
  letter-spacing: var(--zl-tracking-label);
  text-transform: uppercase;
}
.civ-arc__metric b { font-weight: var(--zl-weight-bold); }

/* ── The diagrams ──────────────────────────────────────────────────────────
   One fixed-height stage each, so four side by side keep a common baseline
   however differently their contents animate. */
.civ-arc__viz {
  display: grid;
  place-items: center;
  height: 5.25rem;
  margin-bottom: .35rem;
  border: 1px solid var(--zl-line);
  border-radius: 2px;
  background: var(--zl-surface);
  overflow: hidden;
}
.civ-arc__viz svg { width: 100%; height: 100%; }
.civ-arc__viz [stroke] { stroke: var(--zl-muted); fill: none; stroke-width: 1.1; }
.civ-arc__viz [data-hot] { stroke: var(--zl-vermilion); }
.civ-arc__viz [data-fill] { fill: var(--zl-muted); stroke: none; }
.civ-arc__viz [data-fill][data-hot] { fill: var(--zl-vermilion); }

/* ── The four diagrams ─────────────────────────────────────────────────────
   [Arjun, 2026-08-09] "the animations within the visual is not in sync on a
   few — the meaning of the visual is not easy to decipher from the text."

   Both faults had the same root: four diagrams built one at a time. They ran
   on 5s, 5.5s, 4.5s and 6s, so the row never beat together, and each invented
   its own idiom, so a reader had to learn four of them.

   ONE CYCLE for all four, and one grammar:

       grey is the mass you already have · vermilion is what we surface

   That reading holds in every panel — the leads that survive the filter, the
   lead that ranks top, the event worth firing on, the record that changed —
   so the row teaches itself once instead of four times.

   Shared phases on --civ-cycle:
       0-12%    the situation before
       12-40%   the thing happening
       40-80%   the result, held long enough to read
       80-100%  back to the start                                            */
.civ-arc__viz { --civ-cycle: 6s; }

/* 01 Acquire — a raw list meeting a filter. Most of it passes and lights up;
   the junk stops at the line and is gone before anyone pays to dial it. */
.civ-acquire__keep {
  animation: civ-pass var(--civ-cycle) var(--zl-ease-standard) infinite;
  animation-delay: calc(var(--d, 0) * .06s);
}
@keyframes civ-pass {
  0%, 12%   { transform: translateX(0);    opacity: .35; }
  40%, 80%  { transform: translateX(52px); opacity: 1; }
  100%      { transform: translateX(0);    opacity: .35; }
}
.civ-acquire__drop {
  animation: civ-blocked var(--civ-cycle) var(--zl-ease-standard) infinite;
  animation-delay: calc(var(--d, 0) * .06s);
}
@keyframes civ-blocked {
  0%, 12%   { transform: translateX(0);    opacity: .35; }
  30%       { transform: translateX(26px); opacity: .35; }
  40%, 80%  { transform: translateX(26px); opacity: 0; }
  100%      { transform: translateX(0);    opacity: .35; }
}
.civ-acquire__gate { animation: civ-gate var(--civ-cycle) var(--zl-ease-standard) infinite; }
@keyframes civ-gate {
  0%, 18%   { opacity: .25; }
  30%, 46%  { opacity: 1; }
  80%, 100% { opacity: .25; }
}

/* 02 Close — four leads, each with a value bar. They sort, and the richest
   arrives at the top where the best closer is waiting. */
.civ-close__row {
  animation: civ-rank var(--civ-cycle) var(--zl-ease-standard) infinite;
}
@keyframes civ-rank {
  0%, 12%   { transform: translateY(0);          opacity: .4; }
  40%, 80%  { transform: translateY(var(--to,0)); opacity: var(--op, .4); }
  100%      { transform: translateY(0);          opacity: .4; }
}

/* 03 Engage — a bar chart that sits flat and then climbs [Arjun, 2026-08-09].
   The previous version was a timeline with a spike, which read as "an event
   happened" rather than "engagement went up". Bars carry growth without a
   caption: the flat run is the calendar-driven campaign, the climb is what
   firing on the event does. */
.civ-engage__bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: civ-grow var(--civ-cycle) var(--zl-ease-standard) infinite;
  animation-delay: calc(var(--d, 0) * .1s);
}
@keyframes civ-grow {
  0%, 8%    { transform: scaleY(0); opacity: 0; }
  32%, 80%  { transform: scaleY(1); opacity: 1; }
  100%      { transform: scaleY(0); opacity: 0; }
}

/* 04 Retain — the base you already own. Three records change while you are not
   looking; the point of the product is that you see them. */
.civ-retain__cell {
  animation: civ-change var(--civ-cycle) var(--zl-ease-standard) infinite;
  animation-delay: calc(var(--d, 0) * .18s);
}
@keyframes civ-change {
  0%, 16%   { opacity: .25; }
  36%, 80%  { opacity: 1; }
  100%      { opacity: .25; }
}
.civ-retain__ring {
  animation: civ-caught var(--civ-cycle) var(--zl-ease-standard) infinite;
  animation-delay: calc(var(--d, 0) * .18s);
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes civ-caught {
  0%, 30%   { transform: scale(.4); opacity: 0; }
  44%       { transform: scale(1);  opacity: .9; }
  62%, 100% { transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Each diagram rests on its most legible frame rather than vanishing — the
     picture is the argument, and a blank box makes the section worse than the
     paragraphs it replaced. */
  .civ-arc__stage::before,
  .civ-acquire__keep, .civ-acquire__drop, .civ-acquire__gate,
  .civ-close__row, .civ-engage__bar,
  .civ-retain__cell, .civ-retain__ring { animation: none; }
  .civ-arc__stage::before { transform: scaleX(1); opacity: .18; }
  /* Each rests on the frame that carries the argument: filtered, ranked,
     fired, caught. A blank box would be worse than the paragraphs this
     replaced. */
  .civ-acquire__keep { transform: translateX(52px); opacity: 1; }
  .civ-acquire__drop { opacity: 0; }
  .civ-acquire__gate { opacity: 1; }
  .civ-close__row { transform: translateY(var(--to, 0)); opacity: var(--op, .4); }
  .civ-engage__bar { transform: scaleY(1); opacity: 1; }
  .civ-retain__cell { opacity: 1; }
  .civ-retain__ring { opacity: 0; }
}

/* ── Sample profile under each package ────────────────────────────────────
   [Arjun, 2026-08-09] "below each offering a sample profile needs to be shown
   which match the offering for people to see the difference."

   The same fictional person appears under both cards. The left one is what the
   demographic and professional package returns; the right one is that plus the
   money rows, which is the whole of the difference between them. Two prose
   paragraphs claiming a difference are weaker than two profiles showing it.

   The added rows carry a vermilion edge and their own label so the eye can
   find the delta without reading either column in full. */
.civ-sample {
  margin-top: 1rem;
  border: 1px solid var(--zl-line);
  border-radius: 2px;
  background: var(--zl-bg);
}

.civ-sample__id {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--zl-line);
}
.civ-sample__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 2px;
  background: var(--zl-ink);
  color: var(--zl-surface);
  font-family: var(--zl-font-mono);
  font-size: .62rem;
  letter-spacing: .04em;
}
.civ-sample__who { display: grid; gap: .05rem; min-width: 0; }
.civ-sample__who strong { color: var(--zl-ink); font-size: var(--zl-text-sm); }
.civ-sample__who small { color: var(--zl-muted); font-size: var(--zl-text-xs); }
.civ-sample__age {
  margin-left: auto;
  flex: 0 0 auto;
  padding: .1rem .35rem;
  border: 1px solid var(--zl-line);
  border-radius: 2px;
  color: var(--zl-muted);
  font-family: var(--zl-font-mono);
  font-size: .62rem;
}

.civ-sample__rows { margin: 0; padding: .55rem .8rem; list-style: none; display: grid; gap: .3rem; }
.civ-sample__rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  font-size: var(--zl-text-xs);
}
.civ-sample__rows span { color: var(--zl-muted); font-family: var(--zl-font-mono); letter-spacing: .02em; }
.civ-sample__rows b { color: var(--zl-ink); font-weight: var(--zl-weight-semibold); text-align: right; }

/* The delta. Marked rather than merely appended, because "spot which three
   rows are new" is work a reader should not have to do. */
.civ-sample__added {
  border-top: 1px solid var(--zl-line);
  border-left: 2px solid var(--zl-vermilion);
  background: rgb(227 74 46 / .04);
}
.civ-sample__added-label {
  display: block;
  padding: .5rem .8rem 0;
  color: var(--zl-vermilion);
  font-family: var(--zl-font-mono);
  font-size: .62rem;
  letter-spacing: var(--zl-tracking-label);
  text-transform: uppercase;
}
.civ-sample__added .civ-sample__rows { padding-top: .35rem; }

/* ── Partner logos ─────────────────────────────────────────────────────────
   Zoho's mark is a wide lockup (820x340) and TeleCRM's is square (321x321),
   so both are sized on HEIGHT with width:auto. A shared width would squash
   one of them. Carries .card-icon as well so the icon-per-card rule still
   sees an icon, then overrides the 24px box that class assumes. */
.civ-logo {
  width: auto;
  height: 1.55rem;
  max-width: 7.5rem;
  object-fit: contain;
  object-position: left center;
}

/* An unordered .civ-arc variant and four diagrams for /grow/integrations were
   built here on 2026-08-09 and removed the same day: "these animations are
   completely broken -- either improve or remove the visuals" [Arjun].

   Worth recording why, so the next attempt starts somewhere better. The
   Consumer Intelligence diagrams work because each shows a state CHANGE in one
   small box — dots crossing a gate, bars climbing, cells lighting. The
   Integrations use cases are all about work that does NOT happen: nobody
   routes by hand, nobody dials junk, nobody runs a cleanup. Absence has no
   picture, and two of the four ended up restating Acquire and Close from the
   other page in different clothes.

   The page keeps the one visual that does earn its place: Priya's record
   filling itself in, in the modes section above. */

/* ── The unenriched record, and the button that fixes it ──────────────────
   The Modes section pairs automatic against manual, so the two samples pair
   too: the auto card shows a record already filled in, this one shows the
   record BEFORE — the back-catalogue lead that arrived before the integration
   was switched on — with the blanks visible and the action that fills them.
   Same component, opposite state. */
.civ-sample__rows b.is-empty {
  color: var(--zl-muted);
  font-weight: var(--zl-weight-regular);
  letter-spacing: .12em;
}
.civ-sample__action {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: .55rem .8rem;
  border-top: 1px solid var(--zl-line);
  color: var(--zl-vermilion);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
  letter-spacing: var(--zl-tracking-label);
  text-transform: uppercase;
}
.civ-sample__action i {
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  border: 1px solid var(--zl-vermilion);
  border-radius: 2px;
  font-style: normal;
  /* A rep has to press this, so it asks once per cycle rather than sitting
     still — on the same 6s clock as everything else on the Grow pages. */
  animation: civ-press var(--civ-cycle, 6s) var(--zl-ease-standard) infinite;
}
@keyframes civ-press {
  0%, 58%   { background: transparent; color: var(--zl-vermilion); }
  66%, 78%  { background: var(--zl-vermilion); color: var(--zl-surface); }
  88%, 100% { background: transparent; color: var(--zl-vermilion); }
}
@media (prefers-reduced-motion: reduce) {
  .civ-sample__action i { animation: none; }
}