/* Niche landing page accents.
   Brand orange stays universal for CTAs/buttons/nav across the whole site.
   Each niche page adds body.niche-<slug> with its own --niche-accent pair,
   which recolors only the identity accents (eyebrow, headline highlight,
   stat/step numbers, chart), not the conversion elements. */

body.niche-influencers {
  --niche-accent: #ee3a8c;
  --niche-accent-dark: #b8236a;
}

body.niche-agencies {
  --niche-accent: #2f7dfa;
  --niche-accent-dark: #1b4fa0;
}

body.niche-realestate {
  --niche-accent: #2fbf71;
  --niche-accent-dark: #1c8a4e;
}

body.niche-ecommerce {
  --niche-accent: #8b5cf6;
  --niche-accent-dark: #5b3fa0;
}

body.niche-smm {
  --niche-accent: #2dd4bf;
  --niche-accent-dark: #0f766e;
}

body[class*="niche-"] .eyebrow,
body[class*="niche-"] .text-orange,
body[class*="niche-"] .stat-number,
body[class*="niche-"] .process-number,
body[class*="niche-"] .visual-number,
body[class*="niche-"] .feature-list li::before {
  color: var(--niche-accent);
}

body[class*="niche-"] .visual-bars span {
  background: linear-gradient(180deg, var(--niche-accent), var(--niche-accent-dark));
}

body[class*="niche-"] .who-card:hover {
  border-color: var(--niche-accent);
}

/* Milestone ladder — an alternate feature-visual for niche pages, so the
   hero feature card doesn't just repeat the homepage's bar chart. */
.milestone-heading {
  display: block;
  margin-bottom: 20px;
}

.milestone-card {
  display: flex;
  flex-direction: column;
}

.milestone-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  position: relative;
}

.milestone-row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 34px;
  bottom: -12px;
  width: 2px;
  background: var(--border);
}

.milestone-mark {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--card-bg);
  border: 2px solid var(--border);
  color: var(--muted);
  z-index: 1;
}

.milestone-row.is-done .milestone-mark {
  background: var(--niche-accent, var(--orange));
  border-color: var(--niche-accent, var(--orange));
  color: var(--black);
}

.milestone-row.is-current .milestone-mark {
  border-color: var(--niche-accent, var(--orange));
  color: var(--niche-accent, var(--orange));
}

.milestone-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.milestone-label {
  font-weight: 600;
  color: var(--white);
}

.milestone-row.is-current .milestone-label {
  color: var(--niche-accent, var(--orange));
}

.milestone-tag {
  font-size: 0.78rem;
  color: var(--muted);
}

.milestone-row.is-current .milestone-tag {
  color: var(--niche-accent, var(--orange));
  font-weight: 600;
}