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

/* Partner marquee: one-color duotone (#495261) via SVG filter in index.html.
   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="v3"] .bd-v3-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   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="v3"] .bd-stats {
  overflow: visible;
  contain: none;
}

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

body[data-bd-edition="v3"] .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="v3"] .bd-stats__item {
  display: contents;
}

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

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

body[data-bd-edition="v3"] .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="v3"] .bd-stats__item:nth-child(1)::after { grid-column: 2; }
body[data-bd-edition="v3"] .bd-stats__item:nth-child(2)::after { grid-column: 4; }
body[data-bd-edition="v3"] .bd-stats__item:nth-child(3)::after { grid-column: 6; }

@media (max-width: 1199px) {
  body[data-bd-edition="v3"] .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="v3"] .bd-stats__item:nth-child(1) > * { grid-column: 1; }
  body[data-bd-edition="v3"] .bd-stats__item:nth-child(2) > * { grid-column: 3; }
  body[data-bd-edition="v3"] .bd-stats__item:nth-child(3) > * { grid-column: 1; }
  body[data-bd-edition="v3"] .bd-stats__item:nth-child(4) > * { grid-column: 3; }

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

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

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

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

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

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

  body[data-bd-edition="v3"] .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="v3"] .bd-stats__item:not(:last-child) {
    border-bottom: 1px solid var(--bd-stats-rule, #d5d7da);
  }

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

/* Solution cards: header title (Tokenization and siblings). */
body[data-bd-edition="v3"] .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="v3"] {
  --bd-v3-glow: var(--bd-glow);
  --bd-v3-frame: 10px;
  --bd-v3-frame-radius: 12px;
  --bd-v3-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="v3"] .bd-eco__card {
  --bd-eco-frame: var(--bd-v3-frame, 10px);
  --bd-eco-frame-in-radius: var(--bd-v3-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-v3-glow);
}

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

body[data-bd-edition="v3"] .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="v3"] .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="v3"] .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="v3"] .bd-eco__card-head {
  padding: var(--bd-eco-inset-pad);
}

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

body[data-bd-edition="v3"] .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="v3"] .bd-eco__cta {
  right: var(--bd-eco-inset-pad);
  bottom: var(--bd-eco-inset-pad);
}

/* Ecosystems deck as a V3 framed container: white plate, the grey
   tabs + board inset by the frame width, same glow as the cards.
   The deck's own padding is the frame, so board padding (48px) is
   unchanged from the inner edge — same rule as the cards. */
body[data-bd-edition="v3"] .bd-ekos {
  overflow-x: visible;
}

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

body[data-bd-edition="v3"] .bd-ekos__tabs {
  border-radius: var(--bd-v3-frame-in-radius, 8px)
    var(--bd-v3-frame-in-radius, 8px) 0 0;
}

body[data-bd-edition="v3"] .bd-ekos__board {
  background: var(--bd-ekos-board-bg, #f4f4f4);
  border-radius: 0 0 var(--bd-v3-frame-in-radius, 8px)
    var(--bd-v3-frame-in-radius, 8px);
}

/* White deck variant (preview): no inner frame, no grey — one white card
   plus the glow. The 4px tab bars alone mark the seam between the tab row
   and the board. The deck's own overflow:hidden clips the corners. */
body[data-bd-edition="v3"] .bd-ekos--white .bd-ekos__deck {
  padding: 0;
}

body[data-bd-edition="v3"] .bd-ekos--white .bd-ekos__tabs,
body[data-bd-edition="v3"] .bd-ekos--white .bd-ekos__tab {
  background: var(--bd-surface, #fff);
  border-radius: 0;
}

body[data-bd-edition="v3"] .bd-ekos--white .bd-ekos__board {
  background: transparent;
  border-radius: 0;
}

/* White deck: hairline between the three role columns. The line sits in
   the middle of the 48px gap, so it keeps 24px clear on each side. */
body[data-bd-edition="v3"] .bd-ekos--white .bd-ekos__roles {
  --bd-ekos-white-roles-gap: calc(var(--bd-space-6, 24px) * 2);
  gap: var(--bd-ekos-white-roles-gap);
}

body[data-bd-edition="v3"] .bd-ekos--white .bd-ekos__role:not(:first-child) {
  position: relative;
}

body[data-bd-edition="v3"] .bd-ekos--white .bd-ekos__role:not(:first-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--bd-ekos-white-roles-gap, 48px) / -2);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--bd-plat3-rule, #d5d7da);
}

@media (max-width: 1023px) {
  body[data-bd-edition="v3"] .bd-ekos--white .bd-ekos__role:not(:first-child)::before {
    display: none;
  }
}