/* Connect: registered product owners → the tools a brand already uses. Heading above, one
   full-width stage below. The stage is a container: from 920px of stage width it reads
   left to right, below that it stacks with a downward line.
   On desktop the destinations have fixed row heights, so the branch drawing (an inline
   SVG, 56 × 304) lines up with each group's cards without measuring anything.
   The pulse runs only while the scene is on screen ([data-on], set by home-motion.tsx)
   and never with reduced motion. */

html body #jellybean-q-refined #jq-connect-marketing {
  --cx-line: #b9c4aa;
  --cx-pulse: #5f7f2c;
  --cx-glow: #d8f87f;
  --cx-lab: 28px;   /* a group's name plus the space under it */
  --cx-card: 64px;  /* a destination card */
  --cx-gap: 14px;   /* between groups */
  --cx-h: calc(3 * (var(--cx-lab) + var(--cx-card)) + 2 * var(--cx-gap)); /* 304px, the SVG's height */
  --cx-cycle: 6.4s;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.2vw, 44px);
  padding-block: clamp(48px, 6vw, 88px) clamp(32px, 4vw, 56px);
}

/* Copy */
html body #jellybean-q-refined #jq-connect-marketing .capability-copy {
  width: 100%;
  max-width: 760px;
  margin-inline: 0;
  text-align: left;
}
html body #jellybean-q-refined #jq-connect-marketing .capability-copy h2 {
  max-width: 15.5em;
}
html body #jellybean-q-refined #jq-connect-marketing .capability-copy .jq-section-intro {
  max-width: 36em;
  margin-inline: 0;
}
html body #jellybean-q-refined .connect-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--pl-olive);
}
html body #jellybean-q-refined .connect-note svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Stage */
html body #jellybean-q-refined .cx-stage {
  margin: 0;
  padding: clamp(18px, 3.4vw, 48px);
  border: 1px solid var(--pl-hair);
  border-radius: 28px;
  background: #eef2e6;
  container: cx-stage / inline-size;
}
html body #jellybean-q-refined .cx-stage figcaption {
  margin-top: clamp(20px, 2.6vw, 32px);
  font-size: 13px;
  line-height: 1.5;
  color: var(--jq-muted);
}
html body #jellybean-q-refined .cx {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 56px minmax(0, 1.9fr);
  grid-template-rows: var(--cx-h);
  align-items: center;
}
html body #jellybean-q-refined .cx :is(p, ul) {
  margin: 0;
}
html body #jellybean-q-refined .cx ul {
  padding: 0;
  list-style: none;
}

/* The customer card and its line centre on the middle group's cards: a top margin of one
   group label moves their centre down by half a label. */
html body #jellybean-q-refined :is(.cx-source, .cx-link-in) {
  margin-top: var(--cx-lab);
}

/* Registered product owners */
html body #jellybean-q-refined .cx-source {
  padding: 16px 18px 8px;
  border: 1px solid var(--pl-hair);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--pl-card-shadow);
}
html body #jellybean-q-refined .cx-source-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pl-hair);
}
html body #jellybean-q-refined .cx-source-head img {
  width: auto;
  height: 20px;
}
html body #jellybean-q-refined .cx-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 7px;
  background: #eef1e6;
  box-shadow: inset 0 0 0 1px var(--pl-hair);
  font-size: 12px;
  color: var(--pl-olive);
  white-space: nowrap;
}
html body #jellybean-q-refined .cx-title {
  padding: 12px 0 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pl-olive);
}
html body #jellybean-q-refined .cx-owners li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding-block: 8px;
}
html body #jellybean-q-refined .cx-owners li + li {
  border-top: 1px solid var(--pl-hair);
}
html body #jellybean-q-refined .cx-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e8f6bd;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #263522;
}
html body #jellybean-q-refined .cx-who {
  display: grid;
  min-width: 0;
  margin-right: auto;
  line-height: 1.3;
}
html body #jellybean-q-refined .cx-who strong {
  font-size: 15px;
  font-weight: 500;
}
html body #jellybean-q-refined .cx-who span {
  font-size: 13px;
  color: var(--jq-muted);
}
/* Lines */
html body #jellybean-q-refined .cx-link {
  position: relative;
  display: block;
  height: 1px;
  background: var(--cx-line);
}
html body #jellybean-q-refined .cx-link::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -16px;
  width: 16px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgb(95 127 44 / 0), var(--cx-pulse));
  box-shadow: 4px 0 8px var(--cx-glow);
  opacity: 0;
}
html body #jellybean-q-refined .cx-branch {
  display: block;
  width: 56px;
  height: var(--cx-h);
  overflow: visible;
}
html body #jellybean-q-refined .cx-branch path {
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
}
html body #jellybean-q-refined .cx-branch-lines path {
  stroke: var(--cx-line);
}
html body #jellybean-q-refined .cx-branch-pulse path {
  stroke: var(--cx-pulse);
  stroke-width: 2;
  stroke-dasharray: 16 400;
  stroke-dashoffset: 16;
  opacity: 0;
  filter: drop-shadow(0 0 3px var(--cx-glow));
}

/* Destinations */
html body #jellybean-q-refined .cx-dests {
  display: grid;
  grid-template-rows: repeat(3, calc(var(--cx-lab) + var(--cx-card)));
  gap: var(--cx-gap);
  align-self: start;
}
html body #jellybean-q-refined .cx-group {
  display: grid;
  grid-template-rows: var(--cx-lab) var(--cx-card);
}
html body #jellybean-q-refined .cx-group-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--pl-olive);
}
html body #jellybean-q-refined .cx-group ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
html body #jellybean-q-refined .cx-dest {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--pl-hair);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--pl-card-shadow);
  transition: border-color 0.5s var(--pl-ease), box-shadow 0.5s var(--pl-ease);
}
html body #jellybean-q-refined .cx-logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--pl-hair);
}
html body #jellybean-q-refined .cx-logo img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
html body #jellybean-q-refined [data-dest="klaviyo"] .cx-logo img {
  width: 20px;
}
html body #jellybean-q-refined .cx-dest-text {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}
html body #jellybean-q-refined .cx-dest-text strong {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
html body #jellybean-q-refined .cx-dest-text span {
  font-size: 12.5px;
  color: var(--jq-muted);
}

/* Stacked: the customer card above the destinations, joined by a downward line. */
@container cx-stage (max-width: 919px) {
  html body #jellybean-q-refined .cx {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    justify-items: center;
  }
  html body #jellybean-q-refined :is(.cx-source, .cx-link-in) {
    margin-top: 0;
  }
  html body #jellybean-q-refined .cx-source {
    width: min(100%, 460px);
  }
  html body #jellybean-q-refined .cx-link {
    display: block;
    width: 1px;
    height: 32px;
  }
  html body #jellybean-q-refined .cx-link::after {
    top: -16px;
    left: -1px;
    width: 3px;
    height: 16px;
    background: linear-gradient(180deg, rgb(95 127 44 / 0), var(--cx-pulse));
    box-shadow: 0 4px 8px var(--cx-glow);
  }
  html body #jellybean-q-refined .cx-branch {
    display: none;
  }
  html body #jellybean-q-refined .cx-dests {
    grid-template-rows: none;
    gap: 18px;
    width: 100%;
    padding: 18px;
    border: 1px solid var(--pl-hair);
    border-radius: 18px;
    background: rgb(255 255 255 / 0.45);
  }
  html body #jellybean-q-refined .cx-group {
    grid-template-rows: none;
    gap: 8px;
  }
  html body #jellybean-q-refined .cx-dest {
    min-height: 60px;
    padding-block: 10px;
  }
}
/* Phones: each group is one card of rows, like the customer card. */
@container cx-stage (max-width: 560px) {
  html body #jellybean-q-refined .cx-dests {
    gap: 16px;
    padding: 0;
    border: 0;
    background: none;
  }
  html body #jellybean-q-refined .cx-group ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-inline: 14px;
    border: 1px solid var(--pl-hair);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--pl-card-shadow);
  }
  html body #jellybean-q-refined .cx-dest {
    gap: 12px;
    min-height: 52px;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  html body #jellybean-q-refined .cx-dest + .cx-dest {
    border-top: 1px solid var(--pl-hair);
  }
  html body #jellybean-q-refined .cx-logo {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  html body #jellybean-q-refined .cx-logo img {
    width: 19px;
    height: 19px;
  }
  html body #jellybean-q-refined .cx-dest-text {
    display: flex;
    flex: 1;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  html body #jellybean-q-refined .cx-dest-text span {
    font-size: 12.5px;
    text-align: right;
  }
  html body #jellybean-q-refined .cx-source {
    padding-inline: 14px;
  }
  html body #jellybean-q-refined .cx-owners li {
    gap: 10px;
  }
}

/* One pulse: out of the customer card, then on along every branch at the same speed (so it
   reaches the middle group first), and each destination card catches it as it arrives.
   It repeats every 6.4s while on screen. */
@media (prefers-reduced-motion: no-preference) {
  html body #jellybean-q-refined [data-scene="connect"][data-on] .cx-link-in::after {
    animation: cx-run-x var(--cx-cycle) linear infinite;
  }
  html body #jellybean-q-refined [data-scene="connect"][data-on] .cx-branch-pulse path {
    animation: cx-branch var(--cx-cycle) linear infinite;
  }
  html body #jellybean-q-refined [data-scene="connect"][data-on] .cx-group-mid .cx-dest {
    animation: cx-catch var(--cx-cycle) var(--pl-ease) infinite;
  }
  html body #jellybean-q-refined [data-scene="connect"][data-on] .cx-group:not(.cx-group-mid) .cx-dest {
    animation: cx-catch var(--cx-cycle) var(--pl-ease) calc(var(--cx-cycle) * 0.1) infinite;
  }
  @container cx-stage (max-width: 919px) {
    html body #jellybean-q-refined [data-scene="connect"][data-on] .cx-link-in::after {
      animation-name: cx-run-y;
    }
    html body #jellybean-q-refined [data-scene="connect"][data-on] .cx-group .cx-dest,
    html body #jellybean-q-refined [data-scene="connect"][data-on] .cx-group:not(.cx-group-mid) .cx-dest {
      animation: cx-catch var(--cx-cycle) var(--pl-ease) calc(var(--cx-cycle) * -0.07) infinite;
    }
  }
  @container cx-stage (max-width: 560px) {
    html body #jellybean-q-refined [data-scene="connect"][data-on] .cx-group .cx-dest,
    html body #jellybean-q-refined [data-scene="connect"][data-on] .cx-group:not(.cx-group-mid) .cx-dest {
      animation: none;
    }
    html body #jellybean-q-refined [data-scene="connect"][data-on] .cx-group ul {
      animation: cx-catch var(--cx-cycle) var(--pl-ease) calc(var(--cx-cycle) * -0.07) infinite;
    }
  }
}
@keyframes cx-run-x {
  0% { left: -16px; opacity: 0; }
  1% { opacity: 1; }
  9% { left: 100%; opacity: 1; }
  9.5%, 100% { left: 100%; opacity: 0; }
}
@keyframes cx-run-y {
  0% { top: -16px; opacity: 0; }
  1% { opacity: 1; }
  9% { top: 100%; opacity: 1; }
  9.5%, 100% { top: 100%; opacity: 0; }
}
@keyframes cx-branch {
  0%, 9% { stroke-dashoffset: 16; opacity: 0; }
  9.5% { opacity: 1; }
  29% { stroke-dashoffset: -170; opacity: 1; }
  29.5%, 100% { stroke-dashoffset: -170; opacity: 0; }
}
@keyframes cx-catch {
  0%, 16% { border-color: var(--pl-hair); box-shadow: var(--pl-card-shadow); }
  19% { border-color: #9dbb65; box-shadow: var(--pl-card-shadow), 0 0 0 3px rgb(216 248 127 / 0.6); }
  30%, 100% { border-color: var(--pl-hair); box-shadow: var(--pl-card-shadow); }
}