/* ==========================================================================
   Solutions cards — Webflow Component (V10)
   Intro + four Cards Lab cards (angle mask, capsule CTA).
   V10-only copy of the shared components/ecosystems/ component — the other
   editions keep loading that one; class names (.bd-eco*) are unchanged.
   Card backgrounds: blue / green / purple / orange.
   Self-contained: does not need base.css. Tokens used with fallbacks.
   ========================================================================== */

.bd-eco,
.bd-eco *,
.bd-eco *::before,
.bd-eco *::after {
  box-sizing: border-box;
}

.bd-eco {
  --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));
  --bd-eco-radius: 12px;
  --bd-eco-border: #f1f1f1;
  --bd-eco-rule: #d5d7da;
  --bd-eco-chip-bg: #efe8ff;
  --bd-eco-chip-text: #5025b8;
  --bd-eco-in: 1080ms;
  --bd-eco-out: 540ms;
  --bd-eco-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bd-eco-rule-delay: 1s;
  --bd-eco-pad: 32px;
  --bd-eco-tray-h: 140px;
  --bd-eco-header-ratio: 25%;
  --bd-eco-header-trim: 10px;
  --bd-eco-icon-size: 2.5rem;
  --bd-eco-cta-size: 4rem;
  --bd-eco-cta-circle: calc(var(--bd-eco-cta-size) * 0.75);
  --bd-eco-cta-pill: calc(var(--bd-eco-cta-size) * 0.75);
  --bd-eco-cta-icon: 2rem;
  --bd-eco-cta-expanded: 11.5rem;
  --bd-eco-cta-expand: 720ms;
  --bd-eco-cta-expand-out: 360ms;
  --bd-eco-corner: 50px;
  --bd-eco-schema-grow: 40px;
  --bd-eco-schema-icon: 3.25rem;
  --bd-eco-schema-key: 1.75rem;
  --bd-eco-fact-height: calc(
    2rem + (var(--bd-text-sm, 14px) * 1.3) + var(--bd-space-2, 8px) +
      (var(--bd-space-2, 8px) * 2) + 2px
  );
  --bd-eco-schema-height: calc(var(--bd-eco-fact-height) + var(--bd-eco-schema-grow));
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  padding: 64px 0;
  font-family: var(--bd-font, InterVariable, sans-serif);
  font-feature-settings: "liga" 1, "calt" 1, "cv02", "cv03", "cv04", "cv11";
  font-optical-sizing: auto;
  color: var(--bd-text, #000);
}

.bd-eco .bd-wrap {
  width: 100%;
  max-width: var(--bd-content, 1280px);
  margin-inline: auto;
}

.bd-eco__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bd-space-6, 24px);
  width: 100%;
  margin: 0 0 var(--bd-space-8, 32px);
}

.bd-eco__intro-copy {
  min-width: 0;
}

.bd-eco__eyebrow {
  margin: 0 0 var(--bd-space-2, 8px);
  font-size: var(--bd-text-sm, 14px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--bd-accent, #6434d8);
}

.bd-eco__title {
  margin: 0;
  font-size: 32px;
  font-weight: var(--bd-weight-heading, 500);
  font-variation-settings: "wght" var(--bd-weight-heading, 500);
  line-height: 1.2;
  color: var(--bd-text, #000);
  hyphens: none;
  overflow-wrap: normal;
}

.bd-eco__more {
  flex-shrink: 0;
  margin: 0;
  padding-bottom: 0.15em;
  color: var(--bd-link, #2563EB);
  font-size: var(--bd-text-base, 16px);
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.bd-eco__more:hover {
  opacity: 0.7;
}

.bd-eco__more:focus-visible {
  outline: 2px solid var(--bd-link, #2563EB);
  outline-offset: 3px;
}

.bd-eco__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--bd-space-6, 24px);
  width: 100%;
  min-width: 0;
}

.bd-eco__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--bd-eco-border);
  border-radius: var(--bd-eco-radius);
  background: var(--bd-surface, #fff);
  cursor: default;
}

.bd-eco__card:focus {
  outline: none;
}

.bd-eco__card:focus-visible {
  outline: 2px solid var(--bd-accent, #6434d8);
  outline-offset: 3px;
}

.bd-eco__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bd-eco__photo {
  transform-origin: 50% 100%;
  transform: scale(1);
  opacity: 0.5;
  transition: opacity var(--bd-eco-out) var(--bd-eco-ease);
}

.bd-eco__card.is-open .bd-eco__photo {
  opacity: 1;
  transition-duration: var(--bd-eco-in);
}

.bd-eco__card-head,
.bd-eco__card-body {
  position: relative;
  z-index: 1;
}

.bd-eco__card-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--bd-space-4, 16px);
  padding: var(--bd-eco-pad, 32px);
}

.bd-eco__card-head::after {
  content: "";
  position: absolute;
  left: var(--bd-space-8, 32px);
  right: var(--bd-space-8, 32px);
  bottom: 0;
  height: 1px;
  background: color-mix(in srgb, var(--bd-text, #000) 50%, transparent);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--bd-eco-out) var(--bd-eco-ease);
}

.bd-eco__card.is-open .bd-eco__card-head::after {
  transform: scaleX(1);
  transition: transform var(--bd-eco-in) var(--bd-eco-ease) var(--bd-eco-rule-delay);
}

.bd-eco__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--bd-eco-icon-size);
  height: var(--bd-eco-icon-size);
  color: var(--bd-text, #000);
  overflow: visible;
}

.bd-eco__icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bd-eco__icon :is(path, circle, line, rect, ellipse, polyline, polygon),
.bd-eco__diagram svg :is(path, circle, line, rect, ellipse, polyline, polygon),
.bd-eco__fact-value :is(path, circle, line, rect, ellipse, polyline, polygon),
.bd-eco__cta :is(path, circle, line, rect, ellipse, polyline, polygon),
.bd-eco__schema-icon :is(path, circle, line, rect, ellipse, polyline, polygon),
.bd-eco__schema-key :is(path, circle, line, rect, ellipse, polyline, polygon) {
  vector-effect: non-scaling-stroke;
}

.bd-eco__label {
  min-width: 0;
  color: var(--bd-text, #000);
  font-size: 1.125rem;
  font-weight: 400;
  font-variation-settings: "wght" 400;
  letter-spacing: 0;
  line-height: 1.3;
}

.bd-eco__card-body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--bd-eco-pad, 32px);
  min-height: 0;
  padding: var(--bd-eco-pad, 32px);
  padding-bottom: calc(
    var(--bd-eco-pad, 32px) + var(--bd-eco-cta-pill) + var(--bd-eco-pad, 32px)
  );
  overflow: hidden;
}

.bd-eco__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 100%;
  pointer-events: none;
  color: #fff;
  opacity: 0.5;
  transform: translate(-50%, -50%) scale(1.5);
  transform-origin: center center;
  transition: transform var(--bd-eco-out) var(--bd-eco-ease);
}

.bd-eco__card.is-open .bd-eco__mark {
  transform: translate(-50%, -50%) rotate(-30deg) scale(1);
  transition-duration: var(--bd-eco-in);
}

.bd-eco__mark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bd-eco__mark :is(path, circle, line, rect, ellipse, polyline, polygon) {
  vector-effect: non-scaling-stroke;
}

.bd-eco__card-lead {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

.bd-eco__tray {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: var(--bd-eco-tray-h);
  margin-top: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  color: var(--bd-text, #000);
}

/* Wrapper collapsed so it cannot pad the glyph; SVG is the tray flex child. */
.bd-eco__diagram {
  display: contents;
  pointer-events: none;
  color: var(--bd-text, #000);
  background: none;
}

.bd-eco__diagram svg {
  display: block;
  width: auto;
  height: auto;
  max-width: 60%;
  max-height: var(--bd-eco-tray-h);
  margin: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
  background: none;
}

/* Tokenization: native 300×140 in the 140px tray, not the 60% letterbox. */
.bd-eco__card.animated-card .bd-eco__tray {
  height: var(--bd-eco-tray-h);
}
.bd-eco__diagram--tk svg {
  width: auto;
  height: var(--bd-eco-tray-h);
  max-width: none;
  max-height: var(--bd-eco-tray-h);
}

/* Card 3: 91.2% of tray = 2× glyph size of the old 1000×500 / 60% letterbox. */
.bd-eco__diagram--sc svg {
  max-width: 91.2%;
}

.bd-eco__card .bd-eco__diagram svg * {
  animation-play-state: paused;
}

.bd-eco__card:hover .bd-eco__diagram svg *,
.bd-eco__card:focus-within .bd-eco__diagram svg * {
  animation-play-state: running;
}

[class^="eco1-"], [class*=" eco1-"] {
  --eco-p: var(--bd-text, #000);
  --eco-s: var(--bd-text-2, #252B37);
  vector-effect: non-scaling-stroke;
}

.eco1-mid {
  fill: none;
  stroke: var(--eco-s);
  stroke-width: 1;
}

.eco1-tk {
  fill: none;
  stroke: var(--eco-p);
  stroke-width: 1;
}

.eco1-d {
  fill: var(--eco-p);
  stroke: none;
}

.eco1-belt {
  fill: none;
  stroke: var(--eco-p);
  stroke-width: 1;
  stroke-dasharray: 6 6;
}

.eco1-block {
  transform: translateY(40px);
}

.eco1-sync {
  fill: var(--eco-p);
  stroke: none;
}

.bd-eco__card:hover .eco1-belt,
.bd-eco__card:focus-within .eco1-belt,
.bd-eco__card.is-open .eco1-belt {
  animation: eco1Belt 1.2s linear infinite;
}

.bd-eco__card:hover .eco1-block-a,
.bd-eco__card:focus-within .eco1-block-a,
.bd-eco__card.is-open .eco1-block-a {
  animation: eco1Block 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.bd-eco__card:hover .eco1-block-b,
.bd-eco__card:focus-within .eco1-block-b,
.bd-eco__card.is-open .eco1-block-b {
  animation: eco1Block 3.2s cubic-bezier(0.4, 0, 0.2, 1) 1.1s infinite;
}

.bd-eco__card:hover .eco1-block-c,
.bd-eco__card:focus-within .eco1-block-c,
.bd-eco__card.is-open .eco1-block-c {
  animation: eco1Block 3.2s cubic-bezier(0.4, 0, 0.2, 1) 2.2s infinite;
}

.bd-eco__card:hover .eco1-sync,
.bd-eco__card:focus-within .eco1-sync,
.bd-eco__card.is-open .eco1-sync {
  animation: eco1Sync 3s ease-in-out infinite;
}

@keyframes eco1Belt {
  to { stroke-dashoffset: -40; }
}

@keyframes eco1Block {
  0% { transform: translateY(0) scale(0.9); opacity: 0; }
  20% { opacity: 1; transform: translateY(0) scale(1); }
  80% { opacity: 1; transform: translateY(80px) scale(1); }
  100% { opacity: 0; transform: translateY(110px) scale(0.9); }
}

@keyframes eco1Sync {
  0%, 100% { width: 45px; }
  50% { width: 95px; }
}

.bd-eco__card-copy {
  display: flex;
  flex-direction: column;
  gap: var(--bd-space-4, 16px);
}

.bd-eco__card-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: var(--bd-weight-heading, 500);
  font-variation-settings: "wght" var(--bd-weight-heading, 500);
  line-height: 1.3;
  color: var(--bd-text, #000);
}

.bd-eco__card-lead {
  margin: 0;
  font-size: var(--bd-text-base, 16px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--bd-text, #000);
}

.bd-eco__facts {
  display: flex;
  align-items: stretch;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-eco__fact {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bd-space-2, 8px);
  min-width: 0;
  padding: var(--bd-space-2, 8px) var(--bd-space-1, 4px);
  text-align: center;
  border: 0;
  background: none;
}

.bd-eco__fact-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bd-text, #000);
  font-size: 2rem;
  font-weight: 300;
  font-variation-settings: "wght" 300;
  line-height: 1;
}

.bd-eco__fact-value svg {
  width: 2rem;
  height: 2rem;
  overflow: visible;
}

.bd-eco__fact-label {
  max-width: 100%;
  color: var(--bd-text, #000);
  font-size: var(--bd-text-sm, 14px);
  font-weight: 400;
  font-variation-settings: "wght" 400;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.bd-eco__schema {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: end;
  box-sizing: border-box;
  width: 100%;
  height: var(--bd-eco-schema-height);
  min-height: var(--bd-eco-schema-height);
  max-height: var(--bd-eco-schema-height);
  margin: auto 0 0;
  padding: var(--bd-space-2, 8px) var(--bd-space-4, 16px);
  overflow: visible;
  pointer-events: none;
}

.bd-eco__schema-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bd-space-2, 8px);
}

.bd-eco__schema-label {
  color: var(--bd-text, #000);
  font-size: var(--bd-text-sm, 14px);
  font-weight: 400;
  font-variation-settings: "wght" 400;
  line-height: 1.3;
}

.bd-eco__schema-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--bd-eco-schema-icon);
  height: var(--bd-eco-schema-icon);
  color: var(--bd-text, #000);
  overflow: visible;
}

.bd-eco__schema-icon svg,
.bd-eco__schema-key svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bd-eco__schema-link {
  display: flex;
  align-items: center;
  align-self: end;
  width: 100%;
  height: var(--bd-eco-schema-icon);
  min-width: 0;
}

.bd-eco__schema-key {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--bd-eco-schema-key);
  height: var(--bd-eco-schema-key);
  color: var(--bd-text, #000);
}

.bd-eco__schema-rail {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
  overflow: visible;
}

.bd-eco__schema svg {
  overflow: visible;
}

.bd-eco__schema svg,
.bd-eco__schema svg :is(circle, rect, line, path) {
  fill: none;
  stroke: var(--bd-text, #000);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.bd-eco__schema-key circle[fill="currentColor"] {
  fill: var(--bd-text, #000);
  stroke: none;
}

.bd-eco__rail {
  stroke-dasharray: 3 4;
  stroke-linecap: round;
}

.bd-eco__card:hover .bd-eco__rail,
.bd-eco__card.is-open .bd-eco__rail {
  animation: bd-eco-march 1.15s linear infinite;
}

.bd-eco__card:hover .bd-eco__rail--b,
.bd-eco__card.is-open .bd-eco__rail--b {
  animation-delay: 0.2s;
}

@keyframes bd-eco-march {
  to {
    stroke-dashoffset: -14;
  }
}

.bd-eco__cta {
  position: absolute;
  z-index: 2;
  right: var(--bd-eco-pad, 32px);
  bottom: var(--bd-eco-pad, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bd-eco-cta-size);
  height: var(--bd-eco-cta-size);
  overflow: hidden;
  border: none;
  border-radius: calc(var(--bd-eco-cta-size) / 2);
  background: #fff;
  color: #000;
  pointer-events: none;
  opacity: 0;
  transform: scale(0) rotate(0deg);
  transform-origin: 50% 50%;
  transition:
    opacity var(--bd-eco-out) var(--bd-eco-ease),
    transform var(--bd-eco-out) var(--bd-eco-ease);
}

.bd-eco__card.is-open .bd-eco__cta {
  opacity: 1;
  transform: scale(1) rotate(360deg);
  transition-duration: var(--bd-eco-in);
}

.bd-eco__card:not([data-cta^="capsule"]) .bd-eco__cta {
  width: var(--bd-eco-cta-circle);
  height: var(--bd-eco-cta-circle);
  border-radius: calc(var(--bd-eco-cta-circle) / 2);
}

.bd-eco__card[data-cta^="capsule"] .bd-eco__cta {
  justify-content: flex-end;
  gap: 0;
  width: var(--bd-eco-cta-pill);
  height: var(--bd-eco-cta-pill);
  padding-inline: calc((var(--bd-eco-cta-pill) - var(--bd-eco-cta-icon)) / 2);
  border-radius: calc(var(--bd-eco-cta-pill) / 2);
  transform: scale(0);
  transform-origin: calc(100% - (var(--bd-eco-cta-pill) / 2)) 50%;
  transition:
    opacity var(--bd-eco-out) var(--bd-eco-ease) var(--bd-eco-cta-expand-out),
    transform var(--bd-eco-out) var(--bd-eco-ease) var(--bd-eco-cta-expand-out),
    width var(--bd-eco-cta-expand-out) var(--bd-eco-ease),
    padding-inline var(--bd-eco-cta-expand-out) var(--bd-eco-ease),
    gap var(--bd-eco-cta-expand-out) var(--bd-eco-ease);
}

.bd-eco__card[data-cta^="capsule"].is-open .bd-eco__cta {
  width: var(--bd-eco-cta-expanded);
  padding-inline: var(--bd-space-4, 16px);
  gap: var(--bd-space-2, 8px);
  transform: scale(1);
  transition:
    opacity var(--bd-eco-in) var(--bd-eco-ease),
    transform var(--bd-eco-in) var(--bd-eco-ease),
    width var(--bd-eco-cta-expand) var(--bd-eco-ease) var(--bd-eco-in),
    padding-inline var(--bd-eco-cta-expand) var(--bd-eco-ease) var(--bd-eco-in),
    gap var(--bd-eco-cta-expand) var(--bd-eco-ease) var(--bd-eco-in);
}

.bd-eco__cta-label {
  flex: 0 1 0;
  max-width: 0;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  color: #000;
  font-size: var(--bd-text-sm, 14px);
  font-weight: 400;
  font-variation-settings: "wght" 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transition:
    opacity var(--bd-eco-cta-expand-out) var(--bd-eco-ease),
    max-width var(--bd-eco-cta-expand-out) var(--bd-eco-ease),
    flex-grow var(--bd-eco-cta-expand-out) var(--bd-eco-ease);
}

.bd-eco__card[data-cta^="capsule"].is-open .bd-eco__cta-label {
  flex: 1 1 auto;
  max-width: none;
  opacity: 1;
  transition-duration: var(--bd-eco-cta-expand);
  transition-delay: var(--bd-eco-in);
}

.bd-eco__cta svg {
  flex-shrink: 0;
  width: var(--bd-eco-cta-icon);
  height: var(--bd-eco-cta-icon);
  overflow: visible;
}

.bd-eco__card[data-cta="capsule-corner"] {
  border-bottom-right-radius: var(--bd-eco-radius);
  border-top-left-radius: var(--bd-eco-radius);
  transition:
    border-top-left-radius var(--bd-eco-cta-expand-out) var(--bd-eco-ease),
    border-bottom-right-radius var(--bd-eco-cta-expand-out) var(--bd-eco-ease);
}

.bd-eco__card[data-cta="capsule-corner"].is-open {
  border-top-left-radius: var(--bd-eco-corner);
  border-bottom-right-radius: var(--bd-eco-corner);
  transition:
    border-top-left-radius var(--bd-eco-cta-expand) var(--bd-eco-ease) var(--bd-eco-in),
    border-bottom-right-radius var(--bd-eco-cta-expand) var(--bd-eco-ease) var(--bd-eco-in);
}

@media (hover: none) {
  .bd-eco__rail {
    animation: bd-eco-march 1.15s linear 3;
  }

  .eco1-belt { animation: eco1Belt 1.2s linear 3; }
  .eco1-block-a { animation: eco1Block 3.2s cubic-bezier(0.4, 0, 0.2, 1) 3; }
  .eco1-block-b { animation: eco1Block 3.2s cubic-bezier(0.4, 0, 0.2, 1) 1.1s 3; }
  .eco1-block-c { animation: eco1Block 3.2s cubic-bezier(0.4, 0, 0.2, 1) 2.2s 3; }
  .eco1-sync { animation: eco1Sync 3s ease-in-out 2; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-eco__photo,
  .bd-eco__mark,
  .bd-eco__card-head::after,
  .bd-eco__schema,
  .bd-eco__cta,
  .bd-eco__cta-label,
  .bd-eco__card[data-cta="capsule-corner"] {
    transition: none;
  }

  .bd-eco__rail,
  [class^="eco1-"], [class*=" eco1-"] {
    animation: none !important;
  }

  .bd-eco__card .bd-eco__diagram svg *,
  .bd-eco__card:hover .bd-eco__diagram svg *,
  .bd-eco__card:focus-within .bd-eco__diagram svg * {
    animation-play-state: paused;
  }
}

@media (max-width: 1023px) {
  .bd-eco {
    padding: 48px 0;
  }

  .bd-eco__title {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .bd-eco__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bd-space-4, 16px);
  }

  .bd-eco__title {
    font-size: 24px;
  }

  .bd-eco__cards {
    grid-template-columns: 1fr;
  }
}