/* "Moving Your Client Data to quipp" page.
   Loads after budgety-pro.css and vs-wealthbox.css; adds only bp-mig- pieces.
   Motion runs only under .bp-motion (set by budgety-pro.js when the visitor
   hasn't asked for reduced motion). Without it every visual shows a static frame. */

/* ---------- Hero: sources flowing into quipp ---------- */
.budgety-pro-page .bp-mig-hero .bp-hero__title { text-wrap: balance; }
.budgety-pro-page .bp-mig-sources { display: flex; align-items: center; width: 100%; max-width: 520px; margin-inline: auto; }
.budgety-pro-page .bp-mig-sources__list { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
.budgety-pro-page .bp-mig-sources__row { display: flex; align-items: center; }
.budgety-pro-page .bp-mig-chip { display: flex; align-items: center; gap: 10px; flex: none; padding: 12px 14px; border-radius: 14px; background: var(--bp-paper); border: 1px solid var(--bp-line); box-shadow: 0 14px 30px -22px rgba(18, 26, 38, 0.4); }
.budgety-pro-page .bp-mig-chip > .bp-i { width: 18px; height: 18px; color: var(--bp-navy); }
.budgety-pro-page .bp-mig-chip span { display: flex; flex-direction: column; }
.budgety-pro-page .bp-mig-chip b { font-size: 15px; line-height: 1.2; color: var(--bp-ink); }
.budgety-pro-page .bp-mig-chip small { font-size: 12px; line-height: 1.3; color: var(--bp-soft); }
.budgety-pro-page .bp-mig-wire { position: relative; flex: 1; min-width: 28px; height: 2px; container-type: inline-size; background: repeating-linear-gradient(90deg, rgba(15, 41, 90, 0.28) 0 6px, transparent 6px 12px); }
.budgety-pro-page .bp-mig-wire i { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--bp-yellow); box-shadow: 0 0 0 3px rgba(245, 194, 66, 0.25); opacity: 0; }
.budgety-pro-page .bp-mig-hub { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: none; }
.budgety-pro-page .bp-mig-hub__tile { display: block; width: clamp(96px, 14vw, 150px); aspect-ratio: 1; border-radius: 26%; overflow: hidden; box-shadow: 0 24px 48px -24px rgba(15, 41, 90, 0.6); }
.budgety-pro-page .bp-mig-hub__tile img { display: block; width: 100%; height: 100%; }
.budgety-pro-page .bp-mig-hub__tag { padding: 6px 12px; border-radius: 999px; background: var(--bp-navy); color: var(--bp-paper); font-size: 12px; font-weight: 600; font-style: normal; white-space: nowrap; }

.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-wire i { animation: bp-mig-packet 2.6s var(--bp-ease) infinite; animation-delay: calc(var(--d, 0) * 0.55s + 0.9s); }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-hub__tile { animation: bp-mig-pulse 2.6s ease-out 1.9s infinite; }
@keyframes bp-mig-packet {
  0% { opacity: 0; transform: translateX(0); }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(100cqi - 8px)); }
}
@keyframes bp-mig-pulse {
  0% { box-shadow: 0 24px 48px -24px rgba(15, 41, 90, 0.6), 0 0 0 0 rgba(245, 194, 66, 0.45); }
  70%, 100% { box-shadow: 0 24px 48px -24px rgba(15, 41, 90, 0.6), 0 0 0 14px rgba(245, 194, 66, 0); }
}

/* ---------- Two migration paths ---------- */
.budgety-pro-page .bp-mig-metric { font-size: clamp(30px, 4vw, 40px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--bp-navy); }
.budgety-pro-page .bp-mig-aside { margin-top: 28px; text-align: center; }
#bp-page .bp-mig-link { color: var(--bp-navy); font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }

/* ---------- Readiness checklist ---------- */
.budgety-pro-page .bp-mig-checks { display: flex; flex-direction: column; gap: 10px; }
.budgety-pro-page .bp-mig-check { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 10px; border: 1px solid var(--bp-line); background: var(--bp-paper); }
.budgety-pro-page .bp-mig-check b { display: block; font-size: 13px; line-height: 1.35; color: var(--bp-ink); }
.budgety-pro-page .bp-mig-check p { margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--bp-soft); }
.budgety-pro-page .bp-mig-check__mark { display: flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--bp-ok); color: var(--bp-paper); }
.budgety-pro-page .bp-mig-check__mark .bp-i { width: 13px; height: 13px; stroke-width: 3; }
.budgety-pro-page .bp-mig-count { display: inline-grid; grid-template-columns: auto auto; }
.budgety-pro-page .bp-mig-count__a { display: none; }

.budgety-pro-page.bp-motion .bp-reveal .bp-mig-check__mark { background: var(--bp-paper); box-shadow: inset 0 0 0 1.5px var(--bp-line); }
.budgety-pro-page.bp-motion .bp-reveal .bp-mig-check__mark .bp-i { stroke-dasharray: 24; stroke-dashoffset: 24; }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-check__mark { animation: bp-mig-fill 0.35s var(--bp-ease) forwards; animation-delay: calc(var(--d) * 260ms + 450ms); }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-check__mark .bp-i { animation: bp-mig-draw 0.4s var(--bp-ease) forwards; animation-delay: calc(var(--d) * 260ms + 550ms); }
.budgety-pro-page.bp-motion .bp-reveal .bp-mig-count__a { display: inline; grid-area: 1 / 1; }
.budgety-pro-page.bp-motion .bp-reveal .bp-mig-count__b { grid-area: 1 / 1; opacity: 0; }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-count__a { animation: bp-mig-hide 0.2s ease 2.1s forwards; }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-count__b { animation: bp-rise 0.3s ease 2.1s forwards; }
@keyframes bp-mig-fill { to { background: var(--bp-ok); box-shadow: none; color: var(--bp-paper); } }
@keyframes bp-mig-draw { to { stroke-dashoffset: 0; } }
@keyframes bp-mig-hide { to { opacity: 0; } }

/* ---------- How to import: step list + live Import Contacts flow ---------- */
.budgety-pro-page .bp-mig-how { display: flex; flex-direction: column; gap: 28px; }
.budgety-pro-page .bp-mig-list { display: flex; flex-direction: column; gap: 8px; }
.budgety-pro-page .bp-mig-list__item { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 16px; border: 1px solid transparent; }
.budgety-pro-page .bp-mig-list__item .bp-body { font-size: 15px; }
.budgety-pro-page .bp-mig-list__n { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--bp-mist); color: var(--bp-navy); font-size: 14px; font-weight: 700; }
.budgety-pro-page .bp-mig-list__title { margin-bottom: 4px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--bp-ink); }

.budgety-pro-page .bp-mig-flow { margin: 0; min-width: 0; }
.budgety-pro-page .bp-mig-page { gap: 12px; }
.budgety-pro-page .bp-mig-note { font-size: 12px; line-height: 1.5; }
.budgety-pro-page .bp-mig-note b { color: var(--bp-ink); }

.budgety-pro-page .bp-mig-stepper { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.budgety-pro-page .bp-mig-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--bp-line); background: var(--bp-paper); color: var(--bp-soft); font-size: 11px; font-weight: 500; white-space: nowrap; }
.budgety-pro-page .bp-mig-pill__n { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 12px; }
.budgety-pro-page .bp-mig-pill__ok { position: absolute; inset: -2px; display: flex; align-items: center; justify-content: center; background: var(--ui-active); opacity: 0; }
.budgety-pro-page .bp-mig-pill__ok .bp-i { width: 12px; height: 12px; stroke-width: 2.5; }
@media (max-width: 559px) { .budgety-pro-page .bp-mig-pill__label { display: none; } }

/* Static frame (no motion): step 2 active, step 1 done, Map columns showing. */
.budgety-pro-page .bp-mig-pill--0 { background: var(--ui-active); color: var(--ui-blue); }
.budgety-pro-page .bp-mig-pill__ok--0 { opacity: 1; }
.budgety-pro-page .bp-mig-pill--1 { background: var(--ui-blue); border-color: var(--ui-blue); color: var(--bp-paper); }
.budgety-pro-page .bp-mig-list__item:nth-child(2) { background: var(--bp-paper); border-color: var(--bp-line); box-shadow: 0 18px 36px -28px rgba(18, 26, 38, 0.45); }
.budgety-pro-page .bp-mig-list__item:nth-child(2) .bp-mig-list__n { background: var(--bp-navy); color: var(--bp-paper); }

.budgety-pro-page .bp-mig-stage { display: grid; }
.budgety-pro-page .bp-mig-panel { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; border: 1px solid var(--bp-line); background: var(--bp-paper); visibility: hidden; }
.budgety-pro-page .bp-mig-panel--1 { visibility: visible; }

.budgety-pro-page .bp-mig-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px; border-radius: 10px; border: 1.5px dashed rgba(15, 41, 90, 0.25); text-align: center; }
.budgety-pro-page .bp-mig-drop b { font-size: 13px; color: var(--bp-ink); }
.budgety-pro-page .bp-mig-drop small { font-size: 11px; color: var(--bp-soft); }
.budgety-pro-page .bp-mig-drop__ico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 50%; background: var(--ui-active); color: var(--ui-blue); }
.budgety-pro-page .bp-mig-drop__ico .bp-i { width: 18px; height: 18px; }
.budgety-pro-page .bp-mig-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bp-mist); }
.budgety-pro-page .bp-mig-file > .bp-i { width: 18px; height: 18px; color: var(--ui-blue); }
.budgety-pro-page .bp-mig-file div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.budgety-pro-page .bp-mig-file b { font-size: 12px; color: var(--bp-ink); }
.budgety-pro-page .bp-mig-file small { font-size: 11px; color: var(--bp-soft); }

.budgety-pro-page .bp-mig-banner { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--bp-line); background: var(--bp-mist); font-size: 12px; color: var(--bp-ink); }
.budgety-pro-page .bp-mig-banner .bp-i { color: var(--ui-blue); }
.budgety-pro-page .bp-mig-table { display: flex; flex-direction: column; border-radius: 10px; border: 1px solid var(--bp-line); overflow: hidden; font-size: 12px; }
.budgety-pro-page .bp-mig-table__head, .budgety-pro-page .bp-mig-table__row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; padding: 7px 12px; }
.budgety-pro-page .bp-mig-table__head { background: var(--bp-mist); color: var(--bp-soft); font-size: 11px; }
.budgety-pro-page .bp-mig-table__row + .bp-mig-table__row, .budgety-pro-page .bp-mig-table__head + .bp-mig-table__row { border-top: 1px solid var(--bp-line); }
.budgety-pro-page .bp-mig-table__row { color: var(--bp-ink); }
.budgety-pro-page .bp-mig-select { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--bp-line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.budgety-pro-page .bp-mig-select .bp-i { width: 12px; height: 12px; stroke-width: 2.5; color: var(--bp-ok); }
.budgety-pro-page .bp-mig-select--custom { border-style: dashed; color: var(--bp-soft); }

.budgety-pro-page .bp-mig-table__row--rec { grid-template-columns: auto 1fr auto; }
.budgety-pro-page .bp-mig-box { position: relative; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid rgba(18, 26, 38, 0.3); }
.budgety-pro-page .bp-mig-box__on { position: absolute; inset: -1.5px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--ui-blue); color: var(--bp-paper); }
.budgety-pro-page .bp-mig-box__on .bp-i { width: 10px; height: 10px; stroke-width: 3; }
.budgety-pro-page .bp-mig-rec { display: flex; flex-direction: column; min-width: 0; }
.budgety-pro-page .bp-mig-rec b { font-weight: 600; }
.budgety-pro-page .bp-mig-rec small { font-size: 11px; color: var(--bp-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.budgety-pro-page .bp-mig-summary { display: flex; align-items: baseline; gap: 8px; padding: 12px; border-radius: 10px; background: var(--bp-mist); }
.budgety-pro-page .bp-mig-summary b { font-size: 26px; line-height: 1; color: var(--ui-blue); }
.budgety-pro-page .bp-mig-summary span { font-size: 12px; color: var(--bp-soft); }
.budgety-pro-page .bp-mig-options { display: flex; flex-direction: column; gap: 8px; }
.budgety-pro-page .bp-mig-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bp-line); }
.budgety-pro-page .bp-mig-option i { flex: none; width: 14px; height: 14px; margin-top: 1px; border-radius: 50%; border: 1.5px solid rgba(18, 26, 38, 0.3); }
.budgety-pro-page .bp-mig-option.is-on { border-color: var(--ui-blue); background: var(--ui-active); }
.budgety-pro-page .bp-mig-option.is-on i { border: 4px solid var(--ui-blue); }
.budgety-pro-page .bp-mig-option span { display: flex; flex-direction: column; }
.budgety-pro-page .bp-mig-option b { font-size: 12px; color: var(--bp-ink); }
.budgety-pro-page .bp-mig-option small { font-size: 11px; color: var(--bp-soft); }
.budgety-pro-page .bp-mig-import { align-self: flex-end; font-size: 12px; }
.budgety-pro-page .bp-ui__toast.bp-mig-toast { position: static; align-self: flex-start; font-size: 12px; }

/* Looping timeline: 4 stages x 4.5s. Panels, children and list highlights share
   one keyframe each and are phase-shifted with --st (stage) and --k (stagger). */
.budgety-pro-page.bp-motion .bp-mig-how .bp-mig-panel { visibility: visible; pointer-events: none; }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-panel { animation: bp-mig-panel 18s var(--bp-ease) infinite both; animation-delay: calc(var(--st) * 4.5s); }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-c { animation: bp-mig-child 18s var(--bp-ease) infinite both; animation-delay: calc(var(--st) * 4.5s + 0.45s + var(--k, 0) * 0.3s); }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-c--drop { animation-name: bp-mig-drop; }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-import { animation-name: bp-mig-press; }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-drop__ico { animation: bp-mig-bob 18s ease infinite both; }

.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-pill { animation: 18s ease infinite both; }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-pill--0 { animation-name: bp-mig-pill-0; }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-pill--1 { animation-name: bp-mig-pill-1; }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-pill--2 { animation-name: bp-mig-pill-2; }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-pill--3 { animation-name: bp-mig-pill-3; }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-pill__ok { animation: 18s ease infinite both; }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-pill__ok--0 { animation-name: bp-mig-ok-0; }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-pill__ok--1 { animation-name: bp-mig-ok-1; }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-pill__ok--2 { animation-name: bp-mig-ok-2; }

.budgety-pro-page.bp-motion .bp-mig-how .bp-mig-list__item { background: transparent; border-color: transparent; box-shadow: none; }
.budgety-pro-page.bp-motion .bp-mig-how .bp-mig-list__item .bp-mig-list__n { background: var(--bp-mist); color: var(--bp-navy); }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-list__item { animation: bp-mig-hl 18s var(--bp-ease) infinite both; animation-delay: calc(var(--st) * 4.5s); }
.budgety-pro-page.bp-motion .bp-reveal.bp-in .bp-mig-list__item .bp-mig-list__n { animation: bp-mig-hl-n 18s var(--bp-ease) infinite both; animation-delay: calc(var(--st) * 4.5s); }

@keyframes bp-mig-panel {
  0% { opacity: 0; transform: translateY(8px); }
  2%, 23% { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; transform: none; }
}
@keyframes bp-mig-child {
  0% { opacity: 0; transform: translateY(6px); }
  2.5%, 24% { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; }
}
@keyframes bp-mig-drop {
  0% { opacity: 0; transform: translateY(-22px) scale(0.96); }
  4%, 24% { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; }
}
@keyframes bp-mig-press {
  0% { opacity: 0; transform: translateY(6px); }
  2.5% { opacity: 1; transform: none; }
  7% { transform: none; }
  8% { transform: scale(0.94); }
  9.5%, 24% { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; }
}
@keyframes bp-mig-bob {
  0%, 4% { transform: none; }
  7% { transform: translateY(-4px); }
  10%, 100% { transform: none; }
}
@keyframes bp-mig-hl {
  0% { background: transparent; border-color: transparent; box-shadow: none; }
  2%, 23% { background: var(--bp-paper); border-color: var(--bp-line); box-shadow: 0 18px 36px -28px rgba(18, 26, 38, 0.45); }
  25%, 100% { background: transparent; border-color: transparent; box-shadow: none; }
}
@keyframes bp-mig-hl-n {
  0% { background: var(--bp-mist); color: var(--bp-navy); }
  2%, 23% { background: var(--bp-navy); color: var(--bp-paper); }
  25%, 100% { background: var(--bp-mist); color: var(--bp-navy); }
}
/* Stepper: pending -> active (navy) -> done (soft blue with a tick). */
@keyframes bp-mig-pill-0 {
  0%, 24% { background: var(--bp-navy); border-color: var(--bp-navy); color: var(--bp-paper); }
  25%, 100% { background: #e8eef5; border-color: var(--bp-line); color: var(--bp-navy); }
}
@keyframes bp-mig-pill-1 {
  0%, 24% { background: var(--bp-paper); border-color: var(--bp-line); color: var(--bp-soft); }
  25%, 49% { background: var(--bp-navy); border-color: var(--bp-navy); color: var(--bp-paper); }
  50%, 100% { background: #e8eef5; border-color: var(--bp-line); color: var(--bp-navy); }
}
@keyframes bp-mig-pill-2 {
  0%, 49% { background: var(--bp-paper); border-color: var(--bp-line); color: var(--bp-soft); }
  50%, 74% { background: var(--bp-navy); border-color: var(--bp-navy); color: var(--bp-paper); }
  75%, 100% { background: #e8eef5; border-color: var(--bp-line); color: var(--bp-navy); }
}
@keyframes bp-mig-pill-3 {
  0%, 74% { background: var(--bp-paper); border-color: var(--bp-line); color: var(--bp-soft); }
  75%, 100% { background: var(--bp-navy); border-color: var(--bp-navy); color: var(--bp-paper); }
}
@keyframes bp-mig-ok-0 { 0%, 24% { opacity: 0; } 25%, 100% { opacity: 1; } }
@keyframes bp-mig-ok-1 { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes bp-mig-ok-2 { 0%, 74% { opacity: 0; } 75%, 100% { opacity: 1; } }

/* Final CTA sits on navy */
.budgety-pro-page .bp-mig-final-eyebrow { color: var(--bp-yellow); }

.budgety-pro-page .bp-mig-hero .bp-hero__title { font-size: clamp(34px, 5.4vw, 56px); line-height: 1.08; max-width: 18ch; }
.budgety-pro-page .bp-mig-hero .bp-mark { white-space: nowrap; }

@media (min-width: 960px) {
  .budgety-pro-page .bp-mig-hero .bp-hero__inner { align-items: center; gap: clamp(40px, 5vw, 72px); }
  .budgety-pro-page .bp-mig-hero .bp-hero__copy { flex: 1 1 54%; min-width: 0; }
  .budgety-pro-page .bp-mig-hero .bp-hero__title { font-size: clamp(38px, 4.1vw, 56px); max-width: 16ch; }
  .budgety-pro-page .bp-mig-sources { flex: 1 1 46%; max-width: 500px; min-width: 0; }
}
@media (min-width: 1024px) {
  .budgety-pro-page .bp-mig-how { flex-direction: row; align-items: center; gap: 40px; }
  .budgety-pro-page .bp-mig-list { flex: 0 0 36%; }
  .budgety-pro-page .bp-mig-flow { flex: 1; }
}