[data-product="flow"] {
  --product-color: #006948;
  --product-tint: #e4f8ed;
  --product-light: #52edac;
  --product-glyph: url("flow-mark.svg");
}

[data-product="guard"] {
  --product-color: #aa2c26;
  --product-tint: #feeeeb;
  --product-light: #ff8678;
  --product-glyph: url("guard-mark.svg");
}

[data-product="insight"] {
  --product-color: #2448bc;
  --product-tint: #edf1ff;
  --product-light: #90abff;
  --product-glyph: url("insight-mark.svg");
}

.solution[data-product] {
  border-top: 3px solid var(--product-color);
  background: linear-gradient(148deg, var(--product-tint), #fff 58%);
}

.solution[data-product] .text-link {
  color: var(--product-color);
}

.solution[data-product] .product-mark,
.solution-hero .product-mark {
  display: inline-flex;
  align-items: center;
  gap: .09em;
  width: fit-content;
  padding: .15em 0;
  color: var(--product-color);
  font: italic 700 clamp(24px, 2.6vw, 36px)/1 Manrope, Arial, sans-serif;
  letter-spacing: -.065em;
  white-space: nowrap;
}

.solution .product-mark > img,
.solution-hero .product-mark > img {
  display: block;
  width: 1.72em;
  height: auto;
}

.product-mark::after {
  content: "";
  flex: none;
  width: .86em;
  height: .86em;
  margin-inline-start: .24em;
  background-color: currentColor;
  mask: var(--product-glyph) center / contain no-repeat;
}

.solution-hero .product-mark {
  margin: 0 0 16px;
  font-size: 24px;
}

body[data-product] main {
  --accent: var(--product-color);
}

body[data-product] main .btn:hover {
  background: var(--product-color);
  filter: brightness(.88);
}

body[data-product] .solution-hero .eyebrow,
body[data-product] .solution-demo .eyebrow {
  color: var(--product-color);
}

body[data-product] .solution-map {
  background: #202020;
}

body[data-product] .map-node {
  border-color: color-mix(in srgb, var(--product-light) 32%, #202020);
}

body[data-product] .solution-map .solution-map-label,
body[data-product] .solution-map .map-node > span,
body[data-product] .solution-map .map-connector {
  color: var(--product-light);
}

body[data-product] .solution-map .map-final {
  background: var(--product-tint);
  border-color: var(--product-tint);
  color: var(--product-color);
}

body[data-product] .solution-map .map-final > span,
body[data-product] .solution-map .map-final small {
  color: var(--product-color);
}

body[data-product="insight"] .insight-question-buttons button[aria-pressed="true"] {
  border-color: var(--product-color);
  background: var(--product-tint);
}

body[data-product="flow"] .flow-outcome {
  border-color: var(--product-color);
}