/* Motion stays inside artwork. All reading and interaction surfaces stay fixed. */
@property --bc-pointer-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --bc-pointer-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
.bc-site [data-bc-motion-kind="photo"],
.bc-site [data-bc-motion-kind="object"] {
  translate: var(--bc-pointer-x, 0px) calc(var(--bc-pointer-y, 0px) + var(--bc-scroll-y, 0px));
}
.bc-site .bc-motion-frame {
  overflow: hidden;
  isolation: isolate;
}
.bc-site img[data-bc-motion-kind="photo"] {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.bc-site [data-bc-motion-kind="object"] {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.bc-site [data-bc-motion-state="active"] {
  will-change: transform;
}
.bc-site .bc-flow-tracer[data-bc-motion-state="static"] { visibility: hidden; }
.bc-site .bc-flow-tracer {
  pointer-events: none;
  stroke-linecap: round;
  stroke-opacity: .88;
  filter: drop-shadow(0 0 2px #b6cbdc66);
}
.bc-site .hero-word,
.family-home .hero-signup,
.bc-site .trust-phrase,
.bc-site .story-rise,
.bc-site .agentic-terminal-line,
.bc-site .agentic-terminal-text,
.bc-site .visual-panel .story,
.bc-site .expandable-container.opened .expandable-body {
  animation: none !important;
}
.family-home .hero-signup {
  opacity: 1 !important;
  transform: none !important;
}
.bc-site .hero-word,
.bc-site .trust-phrase,
.bc-site .story-rise,
.bc-site .agentic-terminal-line,
.bc-site .visual-panel .story {
  opacity: 1;
  transform: none;
  filter: none;
}
.bc-site .suite-card:hover .suite-surface,
.bc-site .suite-card:focus-within .suite-surface {
  transform: none;
}
.bc-site .plan-shine {
  animation: none;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .bc-site [data-bc-motion-kind] {
    animation: none !important;
    translate: none !important;
    will-change: auto;
  }
}
html[data-preview-motion="reduced"] .bc-site [data-bc-motion-kind] {
  animation: none !important;
  translate: none !important;
  will-change: auto;
}

/* A fine payment rail, with a moving point instead of a solid bronze block. */
.family-home .payment-story .settlement-track .track-rail,
.family-home .payment-story .settlement-track.is-settled .track-rail {
  background: transparent;
}
.family-home .payment-story .track-rail > svg > path {
  stroke: #81949d;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.family-home .payment-story .track-rail > svg > .transfer-line {
  stroke: #8d6748;
  stroke-width: 2;
  stroke-linecap: round;
}
.family-home .payment-story .track-rail::before,
.family-home .payment-story .track-rail::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8d6748;
  transform: translateY(-50%);
}
.family-home .payment-story .track-rail::before { left: -2px; }
.family-home .payment-story .track-rail::after { right: -2px; }
.family-home .payment-story .comet-tail {
  background: linear-gradient(90deg, transparent, #a77b55);
}
.family-home .payment-story .comet-head {
  background: #f7f5ef;
  box-shadow: 0 0 0 2px #a77b55, 0 0 14px #a77b5570;
  width: 6px;
  height: 6px;
}
/* The three calm segments retain the whole journey while the active one fills. */
.family-home .payment-story .story-steps .step-item { padding-bottom: 27px; }
.family-home .payment-story .bc-story-meter {
  left: 14px;
  right: 14px;
  bottom: 10px;
  height: 3px;
  border-radius: 2px;
}
.family-home .payment-story .bc-story-meter .pill-progress {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: #ffffff24;
}
.family-home .payment-story .step-item[aria-pressed=true] .pill-progress { background: #0b1b3a22; }
.family-home .payment-story .bc-story-meter .pill-fill {
  display: block;
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #a77b55, #c3a180);
  transform-origin: left center;
}
.family-home .payment-story .step-item[aria-pressed=true] .pill-fill { background: linear-gradient(90deg, #8d6748, #0b1b3a); }
@media (max-width: 650px) {
  .family-home .payment-story .bc-story-meter { left: 8px; right: 8px; bottom: 9px; }
  .family-home .payment-story .story-steps .step-item { padding-bottom: 24px; }
}