/* V10-only. original.html and v2.html must not load this file. */

/* Partner marquee: one-color duotone via SVG filter in index.html.
   Same contrast span as #495261, mixed 50% toward white (50% of the
   previous ink). url() from this file is resolved against the stylesheet,
   so the working rule is the <style> in index.html (url(#bd-logos-duotone)). */
body[data-bd-edition="v10"] .bd-v10-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   V10 page background + nav bar: one shared #F6F6F7.
   base.css paints the canvas from --bd-bg-page on <html>; custom properties
   inherit downward only, so the edition scope reaches <html> through
   :has() and is repeated on body for its subtree (mobile nav sheet reads
   the same token). The bar keeps its frosted behavior — only the tint
   moves to the page color: --bd-bar-frost keeps the stock 0.68 alpha as
   rgba(246,246,247,.68), and the backdrop blur (saturate(1.4) blur(36px))
   stays untouched in nav-v2.css. --bd-bar-bg moves to #F6F6F7 as well so
   the prefers-reduced-transparency fallback lands on the same color.
   Open state (--bd-bar-bg-open #ededed) is untouched by design.
   -------------------------------------------------------------------------- */
html:has(> body[data-bd-edition="v10"]),
body[data-bd-edition="v10"] {
  --bd-bg-page: #F6F6F7;
  /* Base + 4-tint lighter. Gradients and standard/complement pairs
     (nav, rules, CTAs) use these — V10 only, not the global style kit. */
  --bd-blue: #2096F4;
  --bd-blue-hi: #63B0F9;
  --bd-green: #038664;
  --bd-green-hi: #57A186;
  --bd-orange: #F79009;
  --bd-orange-hi: #FBAB61;
  --bd-blue-grad: linear-gradient(90deg, var(--bd-blue), var(--bd-blue-hi));
  --bd-green-grad: linear-gradient(90deg, var(--bd-green), var(--bd-green-hi));
  --bd-orange-grad: linear-gradient(90deg, var(--bd-orange), var(--bd-orange-hi));
}

body[data-bd-edition="v10"] .bd-nav {
  --bd-bar-bg: #F6F6F7;
  --bd-bar-frost: rgba(246, 246, 247, 0.68);
}

body[data-bd-edition="v10"] .bd-nav a.bd-nav__btn--solid {
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: var(--bd-text-base, 16px);
  line-height: 1;
}

body[data-bd-edition="v10"] .bd-sand__cta {
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

body[data-bd-edition="v10"] .bd-sand__cta:hover {
  opacity: 0.85;
  background: #fff;
  color: #000;
}

body[data-bd-edition="v10"] .bd-sand__cta:focus-visible {
  outline-color: #fff;
}

/* --------------------------------------------------------------------------
   Stats plate
   V3 white card: white plate + ambient glow — no inner frame, no grey
   surface. The grid keeps its original clamp padding, measured straight
   from the card edge. The four figures keep their intrinsic size;
   leftover width fills the tracks around each rule.
   -------------------------------------------------------------------------- */
body[data-bd-edition="v10"] .bd-stats {
  overflow: visible;
  contain: none;
}

body[data-bd-edition="v10"] .bd-stats .bd-wrap {
  background: var(--bd-surface, #fff);
  border-radius: var(--bd-v10-frame-radius, 12px);
  box-shadow: var(--bd-v10-glow);
}

body[data-bd-edition="v10"] .bd-stats__grid {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-items: center;
  width: 100%;
  column-gap: 0;
  row-gap: var(--bd-stats-gap, 16px);
  padding: clamp(24px, 4vw, 48px);
}

/* Flatten each item so kicker / figure / caption / rule become grid cells.
   The 1fr columns are empty except for the centered hairline. */
body[data-bd-edition="v10"] .bd-stats__item {
  display: contents;
}

body[data-bd-edition="v10"] .bd-stats__kicker { grid-row: 1; }
body[data-bd-edition="v10"] .bd-stats__figure { grid-row: 2; }
body[data-bd-edition="v10"] .bd-stats__caption { grid-row: 3; }

body[data-bd-edition="v10"] .bd-stats__item:nth-child(1) > * { grid-column: 1; }
body[data-bd-edition="v10"] .bd-stats__item:nth-child(2) > * { grid-column: 3; }
body[data-bd-edition="v10"] .bd-stats__item:nth-child(3) > * { grid-column: 5; }
body[data-bd-edition="v10"] .bd-stats__item:nth-child(4) > * { grid-column: 7; }

body[data-bd-edition="v10"] .bd-stats__item:not(:last-child)::after {
  content: "";
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: 1px;
  height: auto;
  transform: none;
  align-self: stretch;
  justify-self: center;
  background: var(--bd-stats-rule, #d5d7da);
  pointer-events: none;
  grid-row: 1 / -1;
}

body[data-bd-edition="v10"] .bd-stats__item:nth-child(1)::after { grid-column: 2; }
body[data-bd-edition="v10"] .bd-stats__item:nth-child(2)::after { grid-column: 4; }
body[data-bd-edition="v10"] .bd-stats__item:nth-child(3)::after { grid-column: 6; }

@media (max-width: 1199px) {
  body[data-bd-edition="v10"] .bd-stats__grid {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto var(--bd-stats-col, 32px) auto auto auto;
  }

  body[data-bd-edition="v10"] .bd-stats__item:nth-child(1) > * { grid-column: 1; }
  body[data-bd-edition="v10"] .bd-stats__item:nth-child(2) > * { grid-column: 3; }
  body[data-bd-edition="v10"] .bd-stats__item:nth-child(3) > * { grid-column: 1; }
  body[data-bd-edition="v10"] .bd-stats__item:nth-child(4) > * { grid-column: 3; }

  body[data-bd-edition="v10"] .bd-stats__item:nth-child(1) .bd-stats__kicker,
  body[data-bd-edition="v10"] .bd-stats__item:nth-child(2) .bd-stats__kicker { grid-row: 1; }
  body[data-bd-edition="v10"] .bd-stats__item:nth-child(1) .bd-stats__figure,
  body[data-bd-edition="v10"] .bd-stats__item:nth-child(2) .bd-stats__figure { grid-row: 2; }
  body[data-bd-edition="v10"] .bd-stats__item:nth-child(1) .bd-stats__caption,
  body[data-bd-edition="v10"] .bd-stats__item:nth-child(2) .bd-stats__caption { grid-row: 3; }

  body[data-bd-edition="v10"] .bd-stats__item:nth-child(3) .bd-stats__kicker,
  body[data-bd-edition="v10"] .bd-stats__item:nth-child(4) .bd-stats__kicker { grid-row: 5; }
  body[data-bd-edition="v10"] .bd-stats__item:nth-child(3) .bd-stats__figure,
  body[data-bd-edition="v10"] .bd-stats__item:nth-child(4) .bd-stats__figure { grid-row: 6; }
  body[data-bd-edition="v10"] .bd-stats__item:nth-child(3) .bd-stats__caption,
  body[data-bd-edition="v10"] .bd-stats__item:nth-child(4) .bd-stats__caption { grid-row: 7; }

  body[data-bd-edition="v10"] .bd-stats__item:nth-child(1)::after {
    grid-column: 2;
    grid-row: 1 / 4;
  }

  body[data-bd-edition="v10"] .bd-stats__item:nth-child(2)::after {
    content: none;
  }

  body[data-bd-edition="v10"] .bd-stats__item:nth-child(3)::after {
    content: "";
    grid-column: 2;
    grid-row: 5 / 8;
  }
}

@media (max-width: 767px) {
  body[data-bd-edition="v10"] .bd-stats__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  body[data-bd-edition="v10"] .bd-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    gap: var(--bd-stats-gap, 12px);
    padding-block: var(--bd-space-4, 16px);
  }

  body[data-bd-edition="v10"] .bd-stats__item:not(:last-child) {
    border-bottom: 1px solid var(--bd-stats-rule, #d5d7da);
  }

  body[data-bd-edition="v10"] .bd-stats__item::after {
    content: none;
  }
}

/* Solution cards: header title (Tokenization and siblings). */
body[data-bd-edition="v10"] .bd-eco__label {
  font-size: 20px;
  font-weight: 500;
  font-variation-settings: "wght" 500;
}

/* V3 ambient glow — the base elevation for cards and future containers.
   Even on all four sides (no offset): reads as glow, not a drop shadow.
   Frame tokens: white plate + 10px inward frame, 12px outer / 8px inner. */
body[data-bd-edition="v10"] {
  --bd-v10-glow: var(--bd-glow);
  --bd-v10-frame: 10px;
  --bd-v10-frame-radius: 12px;
  --bd-v10-frame-in-radius: 8px;
}

/* White plate with a 10px inward frame. The frame is real geometry, not
   an overlay: the media is physically inset by the frame width, so the
   fill can never bleed past the frame's inner edge. Explicit sizes (not
   inset + auto) because the SVG's intrinsic ratio would otherwise win
   and overflow the bottom edge. Inner radius 8px (12 + 6 − 10) keeps
   the fill's corners rounded and concentric with the card.
   Edge padding is grown by the frame width: the original 32px is kept
   from the inner edge of the fill. */
body[data-bd-edition="v10"] .bd-eco__card {
  --bd-eco-frame: var(--bd-v10-frame, 10px);
  --bd-eco-frame-in-radius: var(--bd-v10-frame-in-radius, 8px);
  --bd-eco-inset-pad: calc(var(--bd-eco-pad, 32px) + var(--bd-eco-frame, 10px));
  background: var(--bd-surface, #fff);
  border: 0;
  box-shadow: var(--bd-v10-glow);
}

/* Let the ambient shadow paint past the section edge; shadows are ink
   overflow and cannot create horizontal scroll. */
body[data-bd-edition="v10"] .bd-eco {
  overflow-x: visible;
}

body[data-bd-edition="v10"] .bd-eco__media {
  inset: var(--bd-eco-frame, 10px);
  width: calc(100% - var(--bd-eco-frame, 10px) * 2);
  height: calc(100% - var(--bd-eco-frame, 10px) * 2);
  overflow: hidden;
  border-radius: var(--bd-eco-frame-in-radius, 8px);
}

/* Inner fill follows the capsule-corner morph, same timing as the card. */
body[data-bd-edition="v10"] .bd-eco__card[data-cta="capsule-corner"] .bd-eco__media {
  transition:
    border-top-left-radius var(--bd-eco-cta-expand-out, 360ms)
      var(--bd-eco-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    border-bottom-right-radius var(--bd-eco-cta-expand-out, 360ms)
      var(--bd-eco-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

body[data-bd-edition="v10"] .bd-eco__card[data-cta="capsule-corner"].is-open .bd-eco__media {
  border-top-left-radius: calc(
    var(--bd-eco-corner, 50px) - var(--bd-eco-frame, 10px) + 6px
  );
  border-bottom-right-radius: calc(
    var(--bd-eco-corner, 50px) - var(--bd-eco-frame, 10px) + 6px
  );
  transition:
    border-top-left-radius var(--bd-eco-cta-expand, 720ms)
      var(--bd-eco-ease, cubic-bezier(0.16, 1, 0.3, 1)) var(--bd-eco-in, 1080ms),
    border-bottom-right-radius var(--bd-eco-cta-expand, 720ms)
      var(--bd-eco-ease, cubic-bezier(0.16, 1, 0.3, 1)) var(--bd-eco-in, 1080ms);
}

body[data-bd-edition="v10"] .bd-eco__card-head {
  padding: var(--bd-eco-inset-pad);
}

body[data-bd-edition="v10"] .bd-eco__card-head::after {
  left: var(--bd-eco-inset-pad);
  right: var(--bd-eco-inset-pad);
}

body[data-bd-edition="v10"] .bd-eco__card-body {
  padding: var(--bd-eco-inset-pad);
  padding-bottom: calc(
    var(--bd-eco-inset-pad) + var(--bd-eco-cta-pill) + var(--bd-eco-pad, 32px)
  );
}

body[data-bd-edition="v10"] .bd-eco__cta {
  right: var(--bd-eco-inset-pad);
  bottom: var(--bd-eco-inset-pad);
}

/* Ecosystems V10: four white cards. Glow lives on the component so the
   Webflow embed matches; the edition token is the same pair as Solutions. */
body[data-bd-edition="v10"] .bd-ekos {
  overflow-x: visible;
}

body[data-bd-edition="v10"] .bd-ekos__card {
  box-shadow: var(--bd-v10-glow);
}

/* Sandbox: kit dark page-bg band. No rules — Contact’s 1px is dropped
   so the colour change is the only join. Style-kit dark tokens:
   page-bg #0c0c0d, brand-link #B9A7FB, link #3B82F6. */
body[data-bd-edition="v10"] .bd-sand {
  background: #0c0c0d;
  color: #fff;
  overflow: hidden;
  border-radius: var(--bd-v10-frame-radius, 12px);
}

body[data-bd-edition="v10"] .bd-sand .bd-wrap {
  max-width: var(--bd-content, 1440px);
  border-top: 0;
  border-bottom: 0;
  padding-top: calc(var(--bd-space-8, 32px) * 2);
  padding-bottom: calc(var(--bd-space-8, 32px) * 2);
  padding-inline: clamp(24px, 4vw, 48px);
}

body[data-bd-edition="v10"] .bd-sand__eyebrow {
  color: #b9a7fb;
}

body[data-bd-edition="v10"] .bd-sand__title {
  color: #fff;
}

body[data-bd-edition="v10"] .bd-sand__lead {
  color: #fff;
  font-size: 18px;
  font-weight: var(--bd-weight-display, 300);
  font-variation-settings: "wght" var(--bd-weight-display, 300);
}

body[data-bd-edition="v10"] .bd-sand__more {
  color: #3b82f6;
}

body[data-bd-edition="v10"] .bd-sand__more:focus-visible {
  outline-color: #3b82f6;
}

body[data-bd-edition="v10"] .bd-sand + .bd-contact .bd-wrap {
  border-top: 0;
}

body[data-bd-edition="v10"] .bd-foot .bd-wrap {
  padding-top: calc(var(--bd-space-8, 32px) * 2);
}

@media (max-width: 1023px) {
  body[data-bd-edition="v10"] .bd-sand .bd-wrap {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  body[data-bd-edition="v10"] .bd-foot .bd-wrap {
    padding-top: 48px;
  }
}