/* V4-only. original.html, v2.html and index.html (V3) must not load this file. */

:root {
  --bd-bg-page: #FCFCFD;
  --bd-content: 1280px;
}

/* Partner marquee: one-color duotone (#495261) via SVG filter in v4.html.
   url() from this file is resolved against the stylesheet, so the
   working rule is the <style> in v4.html (url(#bd-logos-duotone)). */
body[data-bd-edition="v4"] .bd-v4-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* V4 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.
   The --bd-v3-* names are the contract shared components (platform-v3)
   read — do not rename them. */
body[data-bd-edition="v4"] {
  --bd-v3-glow: var(--bd-glow);
  --bd-v3-frame: 10px;
  --bd-v3-frame-radius: 12px;
  --bd-v3-frame-in-radius: 8px;
}

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

/* 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="v4"] .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="v4"] .bd-eco {
  overflow-x: visible;
}

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

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

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

/* Ecosystems deck as a 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="v4"] .bd-ekos {
  overflow-x: visible;
}

body[data-bd-edition="v4"] .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="v4"] .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="v4"] .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="v4"] .bd-ekos--white .bd-ekos__deck {
  padding: 0;
}

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

body[data-bd-edition="v4"] .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="v4"] .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="v4"] .bd-ekos--white .bd-ekos__role:not(:first-child) {
  position: relative;
}

body[data-bd-edition="v4"] .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="v4"] .bd-ekos--white .bd-ekos__role:not(:first-child)::before {
    display: none;
  }
}