/*
 * CIS green unification
 * #9BCB8A remains the brand-green visual emphasis for fills and markers.
 * #3E697A (mist indigo) is reserved for data, active states and interaction
 * details. Mint remains a large-surface background colour; navy carries text
 * on light backgrounds so neither pastel colour is forced into low contrast.
 */
:root {
  --cis-green: #9bcb8a;
  --cis-green-deep: var(--cis-navy);
  --cis-accent-green: #9bcb8a;
  --cis-mist-indigo: var(--mist-indigo, #3e697a);
}

/* The Hero keeps one green object colour and uses navy for readable text. */
.hero-refresh h1 span,
.hero-refresh__eyebrow,
.hero-refresh__lead,
.hero-refresh__proof b { color: var(--cis-navy); }
.hero-proof-icon .solid-icon { color: var(--cis-mist-indigo); }
.hero-proof-icon--years svg rect { fill: var(--cis-accent-green); }
.hero-proof-icon--hosts svg,
.hero-proof-icon--fans svg { stroke: var(--cis-accent-green); }

/* Editorial accents keep one shape and one colour system across all topics. */
.updates-editorial__heading h2 .updates-editorial__heading-kicker,
.article-preview__meta span { background: var(--cis-accent-green); }
.article-preview__meta span { border-left-color: var(--cis-accent-green); }
.updates-editorial__eyebrow,
.updates-editorial__topic p,
.updates-editorial__heading h2 .updates-editorial__heading-kicker,
.updates-editorial__heading a,
.article-preview__meta span { color: var(--cis-navy); }

.updates-editorial .updates-editorial__topic-icon {
  align-items: center;
  border: 1px solid rgba(39, 52, 71, .08);
  border-radius: 17px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 7px 15px rgba(39, 52, 71, .07);
  display: flex;
  height: 58px;
  justify-content: center;
  width: 58px;
}

.updates-editorial .updates-editorial__topic-icon .solid-icon {
  color: inherit;
  height: 39px;
  width: 39px;
}

.updates-editorial .updates-editorial__topic-icon--live,
.updates-editorial .updates-editorial__topic-icon--community,
.updates-editorial .updates-editorial__topic-icon--insight {
  background: rgba(185, 229, 217, .58);
  color: var(--cis-mist-indigo);
}

.updates-editorial .updates-editorial__topic:nth-child(3) .updates-editorial__topic-icon--insight {
  background: rgba(185, 229, 217, .58);
  color: var(--cis-mist-indigo);
}

.updates-editorial .updates-editorial__topic-icon--live svg path,
.updates-editorial .updates-editorial__topic-icon--community svg path,
.updates-editorial .updates-editorial__topic-icon--community svg circle,
.updates-editorial .updates-editorial__topic-icon--insight svg path {
  color: inherit;
  fill: currentColor;
  stroke: currentColor;
}

/* One approved green is used for lines, markers and non-text details site-wide. */
.services-showcase__route-line,
.services-showcase__route-halo { stroke: var(--cis-accent-green); }
.services-showcase__route-terminals circle:first-child { stroke: var(--cis-accent-green); }
.services-showcase__route-terminals circle:first-child,
.services-showcase__route-terminals circle:nth-child(2),
.problem-showcase .pain-card:nth-child(3) .problem-showcase__number,
.problem-showcase .pain-card p::before,
.insight-card { border-color: var(--cis-accent-green); }
.problem-showcase .pain-card:nth-child(2) .problem-showcase__number { background: var(--cis-mint, #b9e5d9); }
.problem-showcase .pain-card:nth-child(3) .problem-showcase__number { background: var(--cis-accent-green); }

/* On dark surfaces the same approved green can be used safely as a foreground accent. */
.pricing-clay-stage__eyebrow,
.pricing-clay-stage__heading h2 span,
.pricing-clay-stage__price strong { color: var(--cis-accent-green); }
.pricing-clay-stage__choice-label { background: var(--cis-accent-green); color: var(--cis-navy); }