/* ============================================================
   followup.css — CxFollowup on /solutions/communications
   Follow-up calling + follow-up messaging, side by side. Two
   compact CSS-only animated demo cards under a centered header.
   Namespaced .cx-fu. Reuses comms/global tokens (--ink, --paper,
   --line, --mint, --mono, --r-mid, --r-pill, --shadow-1).
   ============================================================ */
.cx-fu {
  --fu-blue: #5a82c2;
  --fu-deep: #3d63a4;
  --fu-lite: #8aa6dd;
  --fu-t: 11s;
}

.cx-fu-head { max-width: 640px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.cx-fu-head .eyebrow { color: var(--fu-deep); }
.cx-fu-head .h2 { margin: 12px 0 10px; }
.cx-fu-head .lead { margin-inline: auto; max-width: 58ch; }

.cx-fu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 26px); align-items: stretch; }

/* ---------- shared card ---------- */
.cx-fu-card {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-xl, 22px);
  background: linear-gradient(168deg, #fff, var(--paper));
  box-shadow: var(--shadow-float, 0 30px 70px -40px rgba(40,52,74,.4));
  padding: clamp(18px, 2vw, 24px);
  overflow: hidden;
}
.cx-fu-cardhead { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cx-fu-ic {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 17px;
  background: color-mix(in srgb, var(--fu-blue) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--fu-blue) 20%, #fff);
}
.cx-fu-t { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.cx-fu-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-40);
}
.cx-fu-live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mint);
  animation: cxfu-pulse 2.2s ease-out infinite;
}

/* the booked chip (shared) */
.cx-fu-booked {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--mint) 16%, #fff);
  border: 1px solid color-mix(in srgb, var(--mint) 42%, #fff);
  color: color-mix(in srgb, var(--mint) 66%, var(--ink));
  font-size: 12.5px; font-weight: 600;
  animation: cxfu-booked var(--fu-t) cubic-bezier(.2,.85,.25,1) infinite;
}
.cx-fu-booked i {
  width: 16px; height: 16px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--mint); color: #fff; font-size: 9.5px; font-weight: 700;
  font-style: normal;
}

/* ---------- calling card ---------- */
.cx-fu-who { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.cx-fu-ava {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--fu-lite), var(--fu-deep));
  color: #fff; font-size: 12.5px; font-weight: 600;
}
.cx-fu-whoid { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cx-fu-whoid b { font-size: 14px; font-weight: 600; color: var(--ink); }
.cx-fu-whoid em { font-style: normal; font-size: 11px; color: var(--ink-40); }
.cx-fu-badge {
  margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--fu-deep);
  padding: 4px 9px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--fu-blue) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--fu-blue) 20%, #fff);
}
.cx-fu-wave {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  height: 30px; margin-bottom: 14px;
}
.cx-fu-wave i {
  width: 3px; height: 24px; border-radius: 2px;
  background: linear-gradient(180deg, var(--fu-lite), var(--fu-blue));
  transform-origin: center; transform: scaleY(.4);
  animation: cxfu-bar .7s ease-in-out infinite alternate;
}
.cx-fu-wave i:nth-child(1)  { animation-duration: .58s; animation-delay: -.05s; }
.cx-fu-wave i:nth-child(2)  { animation-duration: .74s; animation-delay: -.30s; }
.cx-fu-wave i:nth-child(3)  { animation-duration: .62s; animation-delay: -.18s; }
.cx-fu-wave i:nth-child(4)  { animation-duration: .86s; animation-delay: -.50s; }
.cx-fu-wave i:nth-child(5)  { animation-duration: .66s; animation-delay: -.10s; }
.cx-fu-wave i:nth-child(6)  { animation-duration: .80s; animation-delay: -.44s; }
.cx-fu-wave i:nth-child(7)  { animation-duration: .60s; animation-delay: -.27s; }
.cx-fu-wave i:nth-child(8)  { animation-duration: .76s; animation-delay: -.60s; }
.cx-fu-wave i:nth-child(9)  { animation-duration: .64s; animation-delay: -.13s; }
.cx-fu-wave i:nth-child(10) { animation-duration: .84s; animation-delay: -.38s; }
.cx-fu-wave i:nth-child(11) { animation-duration: .68s; animation-delay: -.55s; }
.cx-fu-wave i:nth-child(12) { animation-duration: .78s; animation-delay: -.22s; }
.cx-fu-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cx-fu-line {
  margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-70, #4a5568);
  padding: 9px 12px; border-radius: 12px;
}
.cx-fu-line b {
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-40); margin-right: 7px;
}
.cx-fu-line--ai { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.cx-fu-line--pt {
  background: color-mix(in srgb, var(--fu-blue) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--fu-blue) 18%, #fff);
  border-bottom-right-radius: 5px;
}
.cx-fu-line--ai { animation: cxfu-line-a var(--fu-t) ease infinite; }
.cx-fu-line--pt { animation: cxfu-line-b var(--fu-t) ease infinite; }

/* ---------- messaging card ---------- */
.cx-fu-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cx-fu-bubble { max-width: 88%; padding: 10px 13px; font-size: 13px; line-height: 1.45; border-radius: 15px; }
.cx-fu-bubble--out {
  align-self: flex-start;
  background: linear-gradient(135deg, var(--fu-blue), var(--fu-deep)); color: #fff;
  border-bottom-left-radius: 5px;
  animation: cxfu-line-a var(--fu-t) cubic-bezier(.2,.85,.25,1) infinite;
}
.cx-fu-bubble--in {
  align-self: flex-end;
  background: #eef1f6; border: 1px solid var(--line-2, #e6e9f2); color: var(--ink);
  border-bottom-right-radius: 5px;
  animation: cxfu-line-b var(--fu-t) cubic-bezier(.2,.85,.25,1) infinite;
}
.cx-fu-cadence { display: flex; gap: 8px; margin-bottom: 16px; }
.cx-fu-chip {
  font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--ink-60); background: #fff;
  opacity: .4; animation: cxfu-dim var(--fu-t) ease infinite;
}
.cx-fu-chip--on { opacity: 1; color: var(--fu-deep); border-color: color-mix(in srgb, var(--fu-blue) 40%, #fff); background: color-mix(in srgb, var(--fu-blue) 9%, #fff); animation: none; }

/* ---------- keyframes ---------- */
@keyframes cxfu-bar { from { transform: scaleY(.18); } to { transform: scaleY(1); } }
@keyframes cxfu-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes cxfu-line-a { 0%, 6% { opacity: 0; transform: translateY(8px); } 14%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes cxfu-line-b { 0%, 40% { opacity: 0; transform: translateY(8px); } 48%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes cxfu-booked { 0%, 62% { opacity: 0; transform: translateY(8px) scale(.96); } 70%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes cxfu-dim { 0%, 55% { opacity: 1; } 62%, 92% { opacity: .4; } 100% { opacity: 1; } }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .cx-fu-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 460px) {
  .cx-fu-card { padding: 16px; }
  .cx-fu-wave { height: 24px; }
  .cx-fu-wave i { height: 18px; }
  .cx-fu-bubble { max-width: 94%; }
}

/* ---------- reduced motion: freeze on the final scene ---------- */
@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  .cx-fu *, .cx-fu *::before, .cx-fu *::after { animation: none !important; opacity: 1 !important; transform: none !important; }
}