/* ==========================================================================
   The Platform — proposed IA (V10 comparison only)
   Reuses the V10 plate / deploy tiles via .bd-plat3. Left column is three
   product tiles + hops. Do not load from V9. Not a Webflow paste yet.
   ========================================================================== */

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

.bd-plat3b {
  --p8-ok: var(--bd-green, #038664);
  --p8-border: var(--bd-plat3-rule, #d5d7da);
  --p8-muted: var(--bd-text-2, #252b37);
  --p8-wash: #f9f9f9;
  --p8-pad: 16px;
  --p8-gap: 16px;
  --p8-hop-w: 18px;
  --p8-hop-cy: 9px;
  --p8-hop-h: calc(var(--p8-gap) + 2 * var(--p8-hop-cy));
  overflow-x: hidden;
}

.bd-plat3b .bd-plat3__lead {
  max-width: 46rem;
}

.bd-plat3b__flag {
  margin: 0 0 var(--bd-space-3, 12px);
  font-size: var(--bd-text-sm, 14px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--bd-text-2, #252B37);
}

.bd-plat3b .bd-plat3__col-label {
  margin-bottom: var(--bd-space-6, 24px);
  text-transform: none;
}

.bd-plat3b__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  grid-template-areas:
    "tx    data"
    "infra infra";
  gap: var(--p8-gap);
  width: 100%;
  min-width: 0;
}

.bd-plat3b__box--tx { grid-area: tx; }
.bd-plat3b__box--data { grid-area: data; }
.bd-plat3b__box--infra { grid-area: infra; }

.bd-plat3b__box {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  padding: var(--p8-pad);
  background: var(--p8-wash);
  border: 1px solid var(--p8-border);
  border-radius: 6px;
}

.bd-plat3b__head {
  margin: 0;
  padding: 0 0 var(--p8-pad);
  font-size: 14px;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--bd-text, #000);
  border-bottom: 1px solid var(--p8-border);
}

.bd-plat3b__head-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  color: var(--bd-link, #2563eb);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--bd-dur, 0.3s) var(--bd-ease, ease);
}

.bd-plat3b__head-text {
  min-width: 0;
  flex: 0 1 auto;
}

.bd-plat3b__head-link:hover,
.bd-plat3b__head-link:focus-visible {
  color: var(--bd-link, #2563eb);
  opacity: 0.7;
  text-decoration: none;
}

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

.bd-plat3b__head-arrow {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  overflow: visible;
  color: inherit;
  pointer-events: none;
  animation: bd-plat3b-head-nudge 1.2s ease-in-out infinite;
}

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

@keyframes bd-plat3b-head-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

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

.bd-plat3b__badges {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin: auto 0 0;
  padding: 12px 0 0;
  list-style: none;
}

.bd-plat3b__badges li {
  margin: 0;
  padding: 8px 8px;
  flex: 0 0 auto;
  font-size: var(--bd-text-sm, 14px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--bd-text, #000);
  white-space: nowrap;
  background: #E9EBEE;
  border: 0;
  border-radius: 4px;
}

.bd-plat3b__hop {
  position: absolute;
  z-index: 4;
  display: block;
  width: var(--p8-hop-w);
  height: var(--p8-hop-h);
  color: var(--bd-text, #000);
  pointer-events: none;
}

.bd-plat3b__hop svg {
  display: block;
  width: var(--p8-hop-w);
  height: var(--p8-hop-h);
  overflow: visible;
}

.bd-plat3b__hop--down {
  top: 100%;
  transform: translate(-50%, calc(-1 * var(--p8-hop-cy)));
}

.bd-plat3b__hop--mid {
  left: 50%;
}

@media (min-width: 1024px) {
  .bd-plat3b .bd-plat3__col:first-child {
    align-self: stretch;
  }

  .bd-plat3b__grid {
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 0;
    align-items: stretch;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }

  .bd-plat3b__box {
    height: 100%;
    min-height: 0;
    align-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bd-plat3b__head-arrow {
    animation: none;
  }
}

@media (max-width: 1023px) {
  .bd-plat3b.bd-plat3--tiles.bd-plat3--flow .bd-plat3__panel {
    grid-template-columns: 1fr;
    row-gap: var(--bd-space-8, 32px);
  }

  .bd-plat3b.bd-plat3--tiles.bd-plat3--flow .bd-plat3__col:first-child {
    padding-right: 0;
  }

  .bd-plat3b.bd-plat3--tiles.bd-plat3--flow .bd-plat3__col--deploy {
    padding-top: var(--bd-space-8, 32px);
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--bd-plat3-rule, #d5d7da);
  }
}

@media (max-width: 767px) {
  .bd-plat3b__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tx"
      "data"
      "infra";
  }

  .bd-plat3b__hop {
    display: none;
  }
}