/* Before / after: a patchwork of files vs one business tool (includes/visuals/beforeafter.php) */
.ba { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.12fr); align-items: stretch; }
.ba-side { min-width: 0; border-radius: var(--radius); padding: 28px; padding: clamp(20px, 2.4vw, 36px); }
.ba-before { position: relative; background: var(--paper); display: flex; flex-direction: column; }
.ba-after { background: var(--forest); color: var(--white); }
.ba-title { margin: 0 0 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.ba-tag { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--white); color: var(--ink-2); }
.ba-after .ba-tag { background: var(--green); color: var(--forest); }
.ba-sub { font-family: var(--font-serif); font-size: 21px; line-height: 1.25; color: var(--forest); }
.ba-after .ba-sub { color: var(--white); }

/* divider between the two halves */
.ba-divider { position: relative; display: flex; align-items: center; justify-content: center; }
.ba-divider::before { content: ""; position: absolute; top: 12%; bottom: 12%; left: 50%; border-left: 1.5px dashed #7d8a80; }
.ba-divider span { position: relative; width: 42px; height: 42px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px var(--white); }
.ba-divider span::before { content: ""; position: absolute; left: 12px; top: 20px; width: 16px; height: 2.5px; background: var(--forest); border-radius: 2px; }
.ba-divider span::after { content: ""; position: absolute; left: 20px; top: 15px; width: 9px; height: 9px; border-top: 2.5px solid var(--forest); border-right: 2.5px solid var(--forest); transform: rotate(45deg); }

/* the mess */
.ba-mess { position: relative; flex: 1; min-height: 470px; }
.ba-tangle { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ba-tangle path { fill: none; stroke: #7d8a80; stroke-width: 1.6; stroke-dasharray: 5 6; }
.ba-items { list-style: none; margin: 0; padding: 0; }
.ba-it { position: absolute; display: inline-flex; align-items: center; gap: 9px; max-width: 78%; padding: 9px 13px; border-radius: 6px; background: var(--white); color: var(--ink);
  font-size: 13.5px; line-height: 1.35; box-shadow: 0 1px 2px rgba(12, 43, 21, .1), 0 6px 16px rgba(12, 43, 21, .08);
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)); }
.ba-it--note { width: 168px; max-width: 46%; min-height: 86px; align-items: flex-start; padding: 14px 14px 16px; border-radius: 2px; background: var(--green); color: var(--forest);
  font-family: var(--font-serif); font-size: 16px; font-style: italic; line-height: 1.3; box-shadow: 0 8px 14px -6px rgba(12, 43, 21, .35); }
.ba-it--retype { background: var(--white); box-shadow: 0 0 0 1.5px var(--green-text) inset; border-radius: 999px; font-weight: 600; color: var(--forest); }
.ba-ic { position: relative; flex: none; width: 16px; height: 16px; }
.ba-it--note .ba-ic { display: none; }
.ba-it--sheet .ba-ic { border: 1.5px solid var(--green-text); border-radius: 2px;
  background: linear-gradient(var(--green-text), var(--green-text)) 0 4px / 100% 1.5px no-repeat, linear-gradient(var(--green-text), var(--green-text)) 4px 0 / 1.5px 100% no-repeat, linear-gradient(var(--green-text), var(--green-text)) 0 8.5px / 100% 1.5px no-repeat; }
.ba-it--mail .ba-ic { height: 13px; width: 18px; border: 1.5px solid var(--ink-2); border-radius: 2px;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ink-2) calc(50% - 1px) calc(50% + .6px), transparent calc(50% + .6px)) 0 0 / 50% 85% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), var(--ink-2) calc(50% - 1px) calc(50% + .6px), transparent calc(50% + .6px)) 100% 0 / 50% 85% no-repeat; }
.ba-it--doc .ba-ic { width: 14px; height: 17px; border: 1.5px solid var(--forest-2); border-radius: 2px;
  background: linear-gradient(var(--forest-2), var(--forest-2)) 2px 4px / 7px 1.5px no-repeat, linear-gradient(var(--forest-2), var(--forest-2)) 2px 8px / 7px 1.5px no-repeat, linear-gradient(var(--forest-2), var(--forest-2)) 2px 12px / 5px 1.5px no-repeat; }
.ba-it--retype .ba-ic { width: 16px; height: 16px; border: 2px solid var(--green-text); border-right-color: transparent; border-radius: 50%; }
.ba-it--retype .ba-ic::after { content: ""; position: absolute; right: -3px; top: -1px; border: 4px solid transparent; border-top: 5px solid var(--green-text); border-bottom-width: 0; }
/* scattered positions (the final, disordered state) */
.ba-p1 { top: 1%; left: 1%; --r: -3deg; --x: -4px; --y: 4px; z-index: 2; }
.ba-p2 { top: 13%; right: 2%; --r: 2.5deg; --x: 6px; --y: -2px; z-index: 3; }
.ba-p3 { top: 26%; left: 7%; --r: 2deg; --x: 8px; --y: 6px; }
.ba-p4 { top: 39%; right: 7%; --r: -2.5deg; --x: -6px; --y: 4px; z-index: 2; }
.ba-p5 { top: 52%; left: 2%; --r: -5deg; --x: -4px; --y: 6px; z-index: 3; }
.ba-p6 { top: 61%; right: 4%; --r: 1.5deg; --x: 4px; --y: -4px; z-index: 4; }
.ba-p7 { top: 74%; right: 8%; --r: 4deg; --x: 6px; --y: 2px; z-index: 2; }
.ba-p8 { top: 89%; left: 2%; --r: -1.5deg; --x: -2px; --y: -6px; z-index: 5; }

/* the tool */
.ba-win { border-radius: 10px; background: var(--white); color: var(--ink); overflow: hidden; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); }
.ba-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--paper); border-bottom: 1px solid var(--line); }
.ba-dots { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #c4beb5; box-shadow: 13px 0 0 #c4beb5, 26px 0 0 #c4beb5; margin-right: 26px; }
.ba-name { font-weight: 700; font-size: 14px; color: var(--forest); }
.ba-role { position: relative; margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--mint); color: var(--forest); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ba-nav { list-style: none; margin: 0; padding: 0 14px; display: flex; flex-wrap: wrap; gap: 0 18px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.ba-nav li { padding: 9px 0 8px; border-bottom: 2.5px solid transparent; }
.ba-nav li.is-on { color: var(--forest); font-weight: 700; border-bottom-color: var(--green-2); }
.ba-main { padding: 14px; }
.ba-kpiw { position: relative; }
.ba-kpis { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ba-kpis li { padding: 9px 11px; border-radius: 8px; background: var(--paper); }
.ba-kpis b { display: block; font-family: var(--font-serif); font-size: 24px; font-weight: 500; line-height: 1.1; color: var(--forest); }
.ba-kpis span { display: block; font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.ba-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ba-table th { padding: 0 6px 6px 0; text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.ba-table td { padding: 8px 6px 8px 0; border-bottom: 1px solid #ece8e3; color: var(--forest); vertical-align: middle; }
.ba-table td:first-child { font-weight: 600; }
.ba-table th:last-child, .ba-table td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.ba-st { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ba-st--1 { box-shadow: 0 0 0 1px var(--line) inset; color: var(--ink-2); }
.ba-st--2 { background: var(--mint); color: var(--forest); }
.ba-st--3 { background: var(--green); color: var(--forest); }
.ba-st--4 { background: var(--forest); color: var(--white); }
.ba-who { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sage); color: var(--forest); font-size: 11px; font-weight: 700; }
.ba-hist { position: relative; margin: 12px 0 0; padding: 8px 10px; border-left: 3px solid var(--green-2); background: var(--paper); border-radius: 0 6px 6px 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.ba-db { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 0; padding: 10px; border-radius: 10px; border: 1.5px dashed rgba(150, 248, 120, .6); color: var(--white); font-size: 14px; font-weight: 600; }
.ba-dbi { width: 22px; height: 22px; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linejoin: round; }
.ba-n { position: absolute; top: -9px; right: -9px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--forest); color: var(--green); font-size: 12px; font-weight: 700; box-shadow: 0 0 0 2px var(--green); }
.ba-role .ba-n { top: 50%; right: auto; left: -30px; margin-top: -11px; }
.ba-kpiw .ba-n { top: -8px; right: -6px; }
.ba-hist .ba-n { top: 50%; margin-top: -11px; right: -6px; }
.ba-db .ba-n { position: static; margin-left: 2px; background: var(--green); color: var(--forest); box-shadow: none; }
.ba-points { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; font-size: 14.5px; line-height: 1.35; }
.ba-points li { display: flex; align-items: center; gap: 10px; }
.ba-points .ba-n { position: static; flex: none; background: var(--green); color: var(--forest); box-shadow: none; }

/* animation: the left drifts into disorder, the right assembles piece by piece */
.js .vz-figure .ba-it { transform: none; transition: transform 1.2s cubic-bezier(.3, .7, .3, 1) .3s; }
.js .vz-figure .ba-tangle { opacity: 0; transition: opacity 1s ease .7s; }
.js .vz-figure .ba-bar, .js .vz-figure .ba-nav, .js .vz-figure .ba-kpis li, .js .vz-figure .ba-r, .js .vz-figure .ba-hist, .js .vz-figure .ba-db, .js .vz-figure .ba-points li { opacity: 0; transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .ba-bar { transform: translateY(-14px); transition-delay: .7s; }
.js .vz-figure .ba-nav { transform: translateX(-16px); transition-delay: .9s; }
.js .vz-figure .ba-kpis li { transform: scale(.85); }
.js .vz-figure .ba-kpis li:nth-child(1) { transition-delay: 1.1s; }
.js .vz-figure .ba-kpis li:nth-child(2) { transition-delay: 1.2s; }
.js .vz-figure .ba-kpis li:nth-child(3) { transition-delay: 1.3s; }
.js .vz-figure .ba-r { transform: translateX(18px); }
.js .vz-figure .ba-r1 { transition-delay: 1.45s; }
.js .vz-figure .ba-r2 { transition-delay: 1.55s; }
.js .vz-figure .ba-r3 { transition-delay: 1.65s; }
.js .vz-figure .ba-r4 { transition-delay: 1.75s; }
.js .vz-figure .ba-hist { transform: translateY(8px); transition-delay: 2s; }
.js .vz-figure .ba-db { transform: translateY(12px); transition-delay: 2.2s; }
.js .vz-figure .ba-points li { transform: translateY(8px); transition-delay: 2.4s; }
.js .vz-figure .ba-n { transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1) 2.5s; }
.js .vz-figure.is-visible .ba-it { transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)); }
.js .vz-figure.is-visible .ba-tangle { opacity: 1; }
.js .vz-figure.is-visible .ba-bar, .js .vz-figure.is-visible .ba-nav, .js .vz-figure.is-visible .ba-kpis li, .js .vz-figure.is-visible .ba-r,
.js .vz-figure.is-visible .ba-hist, .js .vz-figure.is-visible .ba-db, .js .vz-figure.is-visible .ba-points li { opacity: 1; transform: none; }
.js .vz-figure.is-visible .ba-n { transform: none; }
.js .vz-figure.is-visible .ba-tangle path { animation: ba-flow 2.4s linear 1.7s infinite; }
@keyframes ba-flow { to { stroke-dashoffset: -22; } }

@media (max-width: 1100px) and (min-width: 861px) {
  .ba-points { grid-template-columns: minmax(0, 1fr); }
  .ba-it { max-width: 88%; }
  .ba-p6 { top: 64%; }
}
@media (max-width: 860px) {
  .ba { grid-template-columns: minmax(0, 1fr); }
  .ba-divider { height: 64px; }
  .ba-divider::before { top: 0; bottom: 0; left: 12%; right: 12%; border-left: 0; border-top: 1.5px dashed #7d8a80; top: 50%; bottom: auto; }
  .ba-divider span { transform: rotate(90deg); }
  .ba-mess { min-height: 0; padding: 6px 0 4px; }
  .ba-items { position: relative; display: flex; flex-wrap: wrap; gap: 12px 10px; }
  .ba-it { position: relative; top: auto; left: auto; right: auto; max-width: 100%; }
  .ba-it--note { width: auto; max-width: 62%; min-height: 0; }
  .ba-sub { font-size: 19px; }
}
@media (max-width: 480px) {
  .ba-table td:first-child { font-size: 12.5px; }
  .ba-points { grid-template-columns: minmax(0, 1fr); }
  .ba-bar { flex-wrap: wrap; gap: 8px; }
  .ba-dots { display: none; }
}