:root {
  --color-pink-100: #eaf0f6;
  --color-pink-200: #d5e0eb;
  --color-pink-300: #bfd0e1;
  --color-pink-500: #9bb5ce;
  --color-pink-600: #7c9bb9;
  --color-purple-100: #b8cadd;
  --color-navy-500: #8199b2;
  --color-navy-900: #526a83;
  --color-charcoal: #9bb5ce;
  --blueforge-accent: #9bb5ce;
  --blueforge-accent-rgb: 155 181 206;
  --blueforge-gradient: linear-gradient(105deg, #3f6e9a 0%, #6f95b9 52%, #9bb5ce 100%);
}

/* Keep the original highlighted-text treatment clearly blue after recoloring. */
.text-gradient,
.text-gradient > div {
  --tw-gradient-from: #3f6e9a !important;
  --tw-gradient-to: #9bb5ce !important;
  --tw-gradient-stops: #3f6e9a 0%, #6f95b9 52%, #9bb5ce 100% !important;
  background-image: var(--blueforge-gradient) !important;
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: 0 0 0.2em rgb(155 181 206 / 0.38), 0 0 0.55em rgb(93 149 202 / 0.24);
}

svg [fill="#ff488b" i],
svg [fill="#f6186a" i],
svg [fill="#e33adb" i],
svg [fill="#d676bc" i],
svg [fill="#d68ac0" i],
svg [fill="#ff5cbb" i] {
  fill: #9bb5ce !important;
}

svg [fill="#fdaeb7" i],
svg [fill="#f97583" i] {
  fill: #9bb5ce !important;
}

svg [stroke="#ff488b" i],
svg [stroke="#f6186a" i],
svg [stroke="#e33adb" i],
svg [stroke="#d676bc" i],
svg [stroke="#d68ac0" i],
svg [stroke="#ff5cbb" i] {
  stroke: #9bb5ce !important;
}

svg [stroke="#fdaeb7" i],
svg [stroke="#f97583" i] {
  stroke: #9bb5ce !important;
}

c-background-canvas {
  isolation: isolate;
}

c-background-canvas::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: #9bb5ce;
  mix-blend-mode: color;
}

/* Keep accent-filled actions legible after mapping the original charcoal
   text token to the new steel-blue palette color. */
.bg-pink-500.text-charcoal {
  color: #26394d !important;
}

/* The site palette maps both the consent button fill and its former dark
   label color to the same blue. Keep every cookie action readable. */
#cc-main .cm__btn,
#cc-main .cm__btn:hover,
#cc-main .pm__btn,
#cc-main .pm__btn:hover {
  color: #26394d !important;
}

/* The pricing header uses a branded Mux loop rather than the shared canvas. */
mux-video[playback-id="f5Q00y8tYIsSyjmqBfVTiw8C5401hwXvIO"] {
  filter: hue-rotate(-90deg) saturate(0.62);
}

/* Inline blog videos do not use the shared canvas tint. Use the same color
   blend as the canvas so the Thalamus loop keeps its original light levels. */
c-inline-video:has(> mux-video[playback-id="NfWAtA00bzn4HW1OyaxmbJnaNhpGfllZI"])::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: #9bb5ce;
  mix-blend-mode: color;
}

/* The brand-assets showcase is a separate loop with its accent baked into
   the video frames, so tint it in place while retaining the white line art. */
c-inline-video:has(> mux-video[playback-id="Ai00wqVJEOePgBBdTjvXTysQrT9BXtIb00"])::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: #9bb5ce;
  mix-blend-mode: color;
}

/* Extend the pricing hero's media half across the unused outer gutter on
   ultra-wide screens; the content column stays on its normal grid. */
@media (min-width: 2000px) {
  .slate.overflow-hidden > .container.flex.items-stretch > :nth-child(2) {
    flex: 0 0 calc(50% + 50vw - 1000px);
  }
}

/* Recolor the matching branded card illustrations while preserving the white
   line art and text in those original assets. */
img[src*="/media/blueforge/blueforge-"] {
  filter: hue-rotate(-90deg) saturate(0.62);
}

/* Lottie renders its original accent as an RGB SVG attribute at runtime, so
   the static HTML color replacement cannot reach those map markers. */
[data-lottie-container] svg [fill="rgb(255,72,139)" i] {
  fill: #9bb5ce !important;
}

[data-lottie-container] svg [stroke="rgb(255,72,139)" i] {
  stroke: #9bb5ce !important;
}