/* ============================================================
   Product cards — three motion mockups for "How Enroll Works"
   Extracted from styles.css to keep the main sheet readable.
   Driven by .product-section[data-active-card="0|1|2"]
   ============================================================ */

/* ── 7b. Card 1 motion — Auto-resolve (DM with Enroll) ───── */
.workspace {
  width: 80%;
  height: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  display: grid;
  grid-template-columns: 140px 1fr;
  overflow: hidden;
  font-family: 'Inter', 'Manrope', sans-serif;
  position: relative;
}
.ws-sidebar {
  background: #f7f5f1;
  border-right: 1px solid #ebe7df;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ws-workspace-name {
  font-size: 11px;
  font-weight: 700;
  color: #212121;
  padding: 4px 8px 10px;
}
.ws-channel-label {
  font-size: 9px;
  font-weight: 600;
  color: #999;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 8px 4px;
}
.ws-dm {
  font-size: 11px;
  color: var(--ink-soft);
  padding: 5px 8px;
  border-radius: 4px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ws-dm-avatar {
  width: 14px; height: 14px;
  border-radius: 3px;
  background: #d4d0c8;
  flex-shrink: 0;
}
.ws-dm.enroll .ws-dm-avatar {
  background: #212121;
  color: #F3FFF4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  font-family: 'Manrope', sans-serif;
}
.ws-dm.active {
  background: var(--surface-soft);
  color: var(--black);
  font-weight: 600;
}
.ws-app-badge {
  font-size: 8px;
  font-weight: 700;
  background: rgba(33,33,33,0.08);
  color: var(--ink-soft);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: auto;
  letter-spacing: 0.3px;
}
.ws-dm.active .ws-app-badge { background: rgba(33,33,33,0.15); color: var(--black); }

.ws-main-area {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 0fr;
  transition: grid-template-columns 0.5s cubic-bezier(0.16,1,0.3,1);
}
/* Open thread - infinite loop */
.product-section[data-active-card="0"] .ws-main-area {
  animation: open-thread 6.5s linear infinite;
}
@keyframes open-thread {
  0%, 67%   { grid-template-columns: 1fr 0fr; }
  72%, 92%  { grid-template-columns: 1fr 140px; }
  100%      { grid-template-columns: 1fr 0fr; }
}

.ws-main {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  transition: opacity 0.4s;
}
.product-section[data-active-card="0"] .ws-main {
  animation: dim-main 6.5s linear infinite;
}
@keyframes dim-main {
  0%, 67%   { opacity: 1; }
  72%, 92%  { opacity: 0.6; }
  100%      { opacity: 1; }
}

.ws-dm-header {
  height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ws-dm-header-avatar {
  width: 22px; height: 22px;
  border-radius: 4px;
  background: #212121;
  color: #F3FFF4;
  font-size: 12px;
  font-weight: 800;
  font-family: 'Manrope', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ws-dm-header-name {
  font-size: 13px;
  font-weight: 700;
  color: #212121;
}
.ws-dm-header-app {
  font-size: 9px;
  font-weight: 700;
  background: var(--line);
  color: var(--ink-soft);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
  flex-shrink: 0;
}

.ws-messages {
  flex: 1;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  position: relative;
}

.ws-message {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  animation-fill-mode: forwards;
}
.ws-avatar {
  width: 24px; height: 24px;
  border-radius: 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  position: relative;
}
.ws-avatar.user-a { background: #d4c8a8; color: #6b5530; }
.ws-avatar.agent {
  background: #212121;
  color: #F3FFF4;
}
.ws-avatar.agent::after {
  content: "";
  position: absolute;
  bottom: -2px; right: -2px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #F3FFF4;
  border: 1.5px solid #fff;
}
.ws-msg-body { flex: 1; min-width: 0; }
.ws-msg-name { font-size: 10px; font-weight: 700; color: #212121; margin-bottom: 4px; }
.ws-bar { display: block; height: 7px; background: #d4cdc1; border-radius: 3px; margin: 3px 0; }
.ws-bar.short { width: 30%; }
.ws-bar.med { width: 40%; }
.ws-bar.long { width: 50%; }
.ws-bar.tiny { width: 25%; }
.ws-bar.q1 { width: 40%; }
.ws-bar.q2-1 { width: 50%; }
.ws-bar.q2-2 { width: 30%; }
.ws-bar.q3 { width: 35%; }
.ws-bar.r1-1 { width: 50%; }
.ws-bar.r1-2 { width: 35%; }
.ws-bar.r2-1 { width: 30%; }
.ws-message.agent .ws-bar { background: #dbe6dc; }

.ws-thread-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  margin-left: 30px;
  padding: 3px 8px;
  background: var(--line);
  border-radius: 12px;
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(4px);
  animation-fill-mode: forwards;
  width: fit-content;
}
.ws-thread-indicator::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--surface-soft);
}

/* Composer */
.ws-composer {
  margin: 8px 16px 14px;
  border: 1px solid #e0dcd2;
  border-radius: 6px;
  padding: 10px 12px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  position: relative;
}
.ws-composer-cursor {
  width: 1px;
  height: 14px;
  background: var(--ink-soft);
  animation: cursor-blink 1s infinite;
  flex-shrink: 0;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.ws-composer-bar {
  height: 5px;
  border-radius: 3px;
  background: #d8d4cc;
  width: 0;
}

/* Cursor sprite */
.ws-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  opacity: 0;
  z-index: 10;
}
.ws-cursor svg { display: block; }

/* Thread panel */
.ws-thread {
  background: #fafaf6;
  border-left: 1px solid #ebe7df;
  padding: 14px 12px;
  overflow: hidden;
  opacity: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product-section[data-active-card="0"] .ws-thread {
  animation: thread-fade 6.5s linear infinite;
}
@keyframes thread-fade {
  0%, 67%   { opacity: 0; }
  72%, 92%  { opacity: 1; }
  100%      { opacity: 0; }
}
.ws-thread-header { font-size: 9px; font-weight: 700; color: #888; letter-spacing: 0.5px; text-transform: uppercase; }
.ws-thread-parent {
  padding-bottom: 8px;
  border-bottom: 1px solid #ebe7df;
}

/* All animated bits paused unless card 0 active */
.ws-message, .ws-thread-indicator, .ws-cursor { animation-play-state: paused; }

@keyframes ws-in {
  0%   { opacity: 0; transform: translateY(6px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes ws-fade-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes type-fill {
  0%   { width: 0; }
  100% { width: 100%; }
}
@keyframes type-clear {
  0%   { width: var(--end-w, 60%); opacity: 1; }
  1%   { width: 0; opacity: 1; }
  100% { width: 0; opacity: 1; }
}
@keyframes cursor-move {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes click-pulse {
  0%, 50% { box-shadow: 0 0 0 0 rgba(243,255,244,0); }
  60%     { box-shadow: 0 0 0 4px rgba(243,255,244,0.5); }
  100%    { box-shadow: 0 0 0 0 rgba(243,255,244,0); }
}

/* Single-keyframe lifecycles for each element across the 6.5s loop
   Time→percent reference (6.5s base):
   0.3s=4.6% 0.8s=12.3% 1.0s=15.4% 1.2s=18.5% 1.6s=24.6% 1.8s=27.7%
   2.0s=30.8% 2.4s=36.9% 2.8s=43.1% 3.0s=46.2% 3.8s=58.5% 3.9s=60%
   4.2s=64.6% 4.4s=67.7% 4.7s=72.3% 5.0s=76.9% 5.4s=83.1% 6.0s=92.3% */

@keyframes life-q1 {
  0%, 12%       { opacity: 0; transform: translateY(6px) scale(0.98); }
  16%, 92%      { opacity: 1; transform: translateY(0)   scale(1); }
  100%          { opacity: 0; }
}
@keyframes life-q1r {
  0%, 18%       { opacity: 0; transform: translateY(4px); box-shadow: 0 0 0 0 rgba(243,255,244,0); }
  21%, 64%      { opacity: 1; transform: translateY(0);   box-shadow: 0 0 0 0 rgba(243,255,244,0); }
  65%           { box-shadow: 0 0 0 4px rgba(243,255,244,0.5); }
  68%, 92%      { opacity: 1; transform: translateY(0); box-shadow: 0 0 0 0 rgba(243,255,244,0); }
  100%          { opacity: 0; }
}
@keyframes life-q2 {
  0%, 24%       { opacity: 0; transform: translateY(6px) scale(0.98); }
  28%, 92%      { opacity: 1; transform: translateY(0)   scale(1); }
  100%          { opacity: 0; }
}
@keyframes life-q2r {
  0%, 30%       { opacity: 0; transform: translateY(4px); }
  34%, 92%      { opacity: 1; transform: translateY(0); }
  100%          { opacity: 0; }
}
@keyframes life-q3 {
  0%, 36%       { opacity: 0; transform: translateY(6px) scale(0.98); }
  40%, 92%      { opacity: 1; transform: translateY(0)   scale(1); }
  100%          { opacity: 0; }
}
@keyframes life-q3r {
  0%, 42%       { opacity: 0; transform: translateY(4px); }
  46%, 92%      { opacity: 1; transform: translateY(0); }
  100%          { opacity: 0; }
}
@keyframes life-comp-q1 {
  0%, 4%        { width: 0; opacity: 1; }
  12%           { width: 100%; opacity: 1; }
  13%           { width: 0; opacity: 1; }
  100%          { width: 0; opacity: 1; }
}
@keyframes life-comp-q2 {
  0%, 15%       { width: 0; opacity: 1; }
  24%           { width: 100%; opacity: 1; }
  25%           { width: 0; opacity: 1; }
  100%          { width: 0; opacity: 1; }
}
@keyframes life-comp-q3 {
  0%, 27%       { width: 0; opacity: 1; }
  36%           { width: 100%; opacity: 1; }
  37%           { width: 0; opacity: 1; }
  100%          { width: 0; opacity: 1; }
}
@keyframes life-cursor {
  0%, 58%       { opacity: 0; left: 88%; top: 80%; }
  60%           { opacity: 1; left: 88%; top: 80%; transform: scale(1); }
  64%           { opacity: 1; left: 32%; top: 22%; transform: scale(1); }
  65%           { transform: scale(0.85); }
  67%           { transform: scale(1); }
  90%           { opacity: 1; left: 32%; top: 22%; }
  100%          { opacity: 0; }
}
@keyframes life-thread-q1 {
  0%, 69%       { opacity: 0; transform: translateY(6px) scale(0.98); }
  73%, 92%      { opacity: 1; transform: translateY(0)   scale(1); }
  100%          { opacity: 0; }
}
@keyframes life-thread-agent1 {
  0%, 71%       { opacity: 0; transform: translateY(6px) scale(0.98); }
  75%, 92%      { opacity: 1; transform: translateY(0)   scale(1); }
  100%          { opacity: 0; }
}
@keyframes life-thread-agent2 {
  0%, 76%       { opacity: 0; transform: translateY(6px) scale(0.98); }
  80%, 92%      { opacity: 1; transform: translateY(0)   scale(1); }
  100%          { opacity: 0; }
}

.product-section[data-active-card="0"] .m-q1         { animation: life-q1         6.5s cubic-bezier(0.16,1,0.3,1) infinite; }
.product-section[data-active-card="0"] .m-q1-reply   { animation: life-q1r        6.5s cubic-bezier(0.16,1,0.3,1) infinite; }
.product-section[data-active-card="0"] .m-q2         { animation: life-q2         6.5s cubic-bezier(0.16,1,0.3,1) infinite; }
.product-section[data-active-card="0"] .m-q2-reply   { animation: life-q2r        6.5s cubic-bezier(0.16,1,0.3,1) infinite; }
.product-section[data-active-card="0"] .m-q3         { animation: life-q3         6.5s cubic-bezier(0.16,1,0.3,1) infinite; }
.product-section[data-active-card="0"] .m-q3-reply   { animation: life-q3r        6.5s cubic-bezier(0.16,1,0.3,1) infinite; }
.product-section[data-active-card="0"] .ws-comp-q1   { animation: life-comp-q1    6.5s cubic-bezier(0.4,0,0.2,1) infinite; }
.product-section[data-active-card="0"] .ws-comp-q2   { animation: life-comp-q2    6.5s cubic-bezier(0.4,0,0.2,1) infinite; }
.product-section[data-active-card="0"] .ws-comp-q3   { animation: life-comp-q3    6.5s cubic-bezier(0.4,0,0.2,1) infinite; }
.product-section[data-active-card="0"] .ws-cursor    { animation: life-cursor     6.5s cubic-bezier(0.45,0,0.55,1) infinite; }
.product-section[data-active-card="0"] .m-thread-q1      { animation: life-thread-q1      6.5s cubic-bezier(0.16,1,0.3,1) infinite; }
.product-section[data-active-card="0"] .m-thread-agent   { animation: life-thread-agent1  6.5s cubic-bezier(0.16,1,0.3,1) infinite; }
.product-section[data-active-card="0"] .m-thread-agent-2 { animation: life-thread-agent2  6.5s cubic-bezier(0.16,1,0.3,1) infinite; }

/* ── 7c. Card 2 motion — Accelerate (inline assistant) ──── */
.workbench {
  width: 80%;
  height: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  overflow: hidden;
  position: relative;
  font-family: 'Inter', 'Manrope', sans-serif;
  display: none;
  padding: 16px 20px;
}
.product-section[data-active-card="1"] .workbench { display: flex; flex-direction: column; }
.product-section[data-active-card="1"] .workspace { display: none; }

.wb-conv-header {
  font-size: 10px;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.wb-conv {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

/* Employee message at top */
.wb-emp-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  position: relative;
}
.wb-emp-msg .ws-avatar { width: 24px; height: 24px; font-size: 11px; }
.wb-emp-msg .ws-msg-name { font-size: 10px; font-weight: 700; color: #212121; margin-bottom: 4px; }
.wb-emp-msg .ws-bar { background: #e8e4dc; }

.wb-pulse {
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(243,255,244,0);
}
.product-section[data-active-card="1"] .wb-pulse {
  animation: wb-pulse 7s linear infinite;
}
@keyframes wb-pulse {
  0%, 4%   { box-shadow: 0 0 0 0   rgba(243,255,244,0); }
  6%       { box-shadow: 0 0 0 3px rgba(243,255,244,0.4); }
  10%, 100%{ box-shadow: 0 0 0 0   rgba(243,255,244,0); }
}

/* Assistant block — inline, distinct */
.wb-assistant {
  margin-left: 32px;
  margin-right: 4%;
  background: var(--surface-soft);
  border: 1px solid #d9ecdd;
  border-left: 3px solid var(--surface-soft);
  border-radius: 8px;
  padding: 12px;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  position: relative;
}
.product-section[data-active-card="1"] .wb-assistant {
  animation: assistant-life 7s cubic-bezier(0.16,1,0.3,1) infinite;
}
@keyframes assistant-life {
  0%, 9%    { opacity: 0; transform: translateY(6px) scale(0.98); }
  13%, 92%  { opacity: 1; transform: translateY(0)   scale(1); }
  100%      { opacity: 0; }
}

.wb-asst-header {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  margin-bottom: 8px;
}
.wb-asst-mark {
  width: 14px; height: 14px;
  border-radius: 3px;
  background: #212121;
  color: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  font-family: 'Manrope', sans-serif;
  position: relative;
}
.wb-asst-mark::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--surface-soft);
  border: 1.5px solid var(--surface-soft);
}
.wb-asst-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.2px;
}

.wb-asst-cards {
  display: flex;
  gap: 8px;
}

.wb-source-card {
  flex: 1;
  background: #fff;
  border: 1px solid #e8e4dc;
  border-radius: 6px;
  padding: 10px;
  position: relative;
  opacity: 0;
  transform: scale(0.94);
  max-height: 80px;
  overflow: hidden;
}
.wb-source-card-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}
.wb-source-card-icon {
  width: 14px; height: 14px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  font-family: 'Manrope', sans-serif;
}
.wb-source-card-name {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.3px;
}
.wb-source-card .ws-bar { height: 6px; margin: 3px 0; }

/* Per-card bar widths */
.wb-source-card.hris .ws-bar.b1 { width: 70%; }
.wb-source-card.hris .ws-bar.b2 { width: 45%; }
.wb-source-card.kb   .ws-bar.b1 { width: 75%; }
.wb-source-card.kb   .ws-bar.b2 { width: 50%; }

.wb-source-card.hris {
  border-left: 2px solid #9a9a9a;
}
.wb-source-card.hris .wb-source-card-icon { background: #9a9a9a; }
.wb-source-card.hris .ws-bar { background: #d8d4cc; }

.wb-source-card.kb {
  border-left: 2px solid #9a9a9a;
}
.wb-source-card.kb .wb-source-card-icon { background: #9a9a9a; }
.wb-source-card.kb .ws-bar { background: #d8d4cc; }

.product-section[data-active-card="1"] .wb-source-card.hris {
  animation: source-card-hris 7s cubic-bezier(0.16,1,0.3,1) infinite;
}
.product-section[data-active-card="1"] .wb-source-card.kb {
  animation: source-card-kb 7s cubic-bezier(0.16,1,0.3,1) infinite;
}
@keyframes source-card-hris {
  0%, 15%   { opacity: 0; transform: scale(0.94); }
  19%, 92%  { opacity: 1; transform: scale(1); }
  100%      { opacity: 0; }
}
@keyframes source-card-kb {
  0%, 22%   { opacity: 0; transform: scale(0.94); }
  26%, 92%  { opacity: 1; transform: scale(1); }
  100%      { opacity: 0; }
}

/* Reading sweep — soft highlight passes over each card */
.wb-source-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent, rgba(243,255,244,0.15), transparent);
  opacity: 0;
  pointer-events: none;
}
.product-section[data-active-card="1"] .wb-source-card.hris::before {
  animation: read-sweep 7s ease infinite;
}
.product-section[data-active-card="1"] .wb-source-card.kb::before {
  animation: read-sweep-kb 7s ease infinite;
}
@keyframes read-sweep {
  0%, 33%   { opacity: 0; transform: translateX(-100%); }
  37%       { opacity: 1; transform: translateX(0); }
  41%       { opacity: 0; transform: translateX(100%); }
  100%      { opacity: 0; }
}
@keyframes read-sweep-kb {
  0%, 36%   { opacity: 0; transform: translateX(-100%); }
  40%       { opacity: 1; transform: translateX(0); }
  44%       { opacity: 0; transform: translateX(100%); }
  100%      { opacity: 0; }
}

/* Composer */
.wb-composer {
  margin-top: auto;
  border: 1px solid #e0dcd2;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  position: relative;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.product-section[data-active-card="1"] .wb-composer {
  animation: composer-focus 7s linear infinite;
}
@keyframes composer-focus {
  0%, 41%  { border-color: #e0dcd2; box-shadow: 0 0 0 0 rgba(243,255,244,0); }
  44%, 92% { border-color: var(--surface-soft); box-shadow: 0 0 0 2px rgba(243,255,244,0.4); }
  100%     { border-color: #e0dcd2; box-shadow: 0 0 0 0 rgba(243,255,244,0); }
}
.wb-comp-cursor {
  width: 1px;
  height: 14px;
  background: var(--ink-soft);
  flex-shrink: 0;
  opacity: 0;
}
.product-section[data-active-card="1"] .wb-comp-cursor {
  animation: comp-cursor 7s linear infinite;
}
@keyframes comp-cursor {
  0%, 41%   { opacity: 0; }
  44%, 60%  { opacity: 1; }
  61%, 100% { opacity: 0; }
}

.wb-comp-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wb-comp-bar {
  height: 5px;
  border-radius: 3px;
  background: #d8d4cc;
  width: 0;
}
.product-section[data-active-card="1"] .wb-comp-bar.b1 { animation: comp-fill-1 7s ease-out infinite; }
.product-section[data-active-card="1"] .wb-comp-bar.b2 { animation: comp-fill-2 7s ease-out infinite; }
.product-section[data-active-card="1"] .wb-comp-bar.b3 { animation: comp-fill-3 7s ease-out infinite; }
@keyframes comp-fill-1 {
  0%, 44% { width: 0; }
  53%     { width: 50%; }
  85%     { width: 50%; }
  86%, 100%{ width: 0; }
}
@keyframes comp-fill-2 {
  0%, 47% { width: 0; }
  57%     { width: 38%; }
  85%     { width: 38%; }
  86%, 100%{ width: 0; }
}
@keyframes comp-fill-3 {
  0%, 50% { width: 0; }
  62%     { width: 25%; }
  85%     { width: 25%; }
  86%, 100%{ width: 0; }
}

.wb-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: var(--line);
  color: #aaa;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  flex-shrink: 0;
  transition: all 0.3s;
}
.product-section[data-active-card="1"] .wb-send-btn {
  animation: send-btn-life 7s ease infinite;
}
@keyframes send-btn-life {
  0%, 63%   { background: var(--line); color: #aaa; box-shadow: 0 0 0 0 rgba(243,255,244,0); transform: scale(1); }
  66%       { background: #212121; color: var(--surface-soft); box-shadow: 0 0 12px 2px rgba(243,255,244,0.6); transform: scale(1); }
  68%, 80%  { background: #212121; color: var(--surface-soft); box-shadow: 0 0 0 0 rgba(243,255,244,0); transform: scale(1); }
  82%       { transform: scale(0.92); }
  84%       { transform: scale(1); box-shadow: 0 0 0 4px rgba(243,255,244,0.5); }
  86%, 92%  { box-shadow: 0 0 0 0 rgba(243,255,244,0); }
  100%      { background: var(--line); color: #aaa; }
}

/* Cursor moving to Send */
.wb-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}
.product-section[data-active-card="1"] .wb-cursor {
  animation: wb-cursor-life 7s cubic-bezier(0.45,0,0.55,1) infinite;
}
@keyframes wb-cursor-life {
  0%, 72%   { opacity: 0; left: 105%; top: 100%; }
  74%       { opacity: 1; left: 105%; top: 100%; }
  82%       { opacity: 1; left: 86%;  top: 86%; }
  92%       { opacity: 1; left: 86%;  top: 86%; }
  100%      { opacity: 0; }
}

/* Sent message — flies up from composer into conversation */
.wb-sent-msg {
  background: #fafaf6;
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 32px;
  border: 1px solid var(--line);
  opacity: 0;
  transform: translateY(60px) scale(0.95);
  position: relative;
}
.wb-sent-msg .ws-msg-name { font-size: 9px; margin-bottom: 2px; }
.wb-sent-msg .ws-bar { background: #d8d4cc; height: 6px; margin: 1px 0; }
.wb-sent-msg-check {
  position: absolute;
  top: 6px; right: 8px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--black);
}
.product-section[data-active-card="1"] .wb-sent-msg {
  animation: sent-msg-life 7s cubic-bezier(0.16,1,0.3,1) infinite;
}
@keyframes sent-msg-life {
  0%, 84%   { opacity: 0; transform: translateY(60px) scale(0.95); }
  88%, 92%  { opacity: 1; transform: translateY(0) scale(1); }
  100%      { opacity: 0; transform: translateY(60px) scale(0.95); }
}



/* ── 7d. Card 3 motion — Learn (chat → KB capture) ──────── */
.learnbench {
  width: 80%;
  height: 100%;
  display: none;
  margin: 0 auto;
  position: relative;
  font-family: 'Inter', 'Manrope', sans-serif;
  gap: 18px;
}
.product-section[data-active-card="2"] .learnbench {
  display: flex;
  align-items: stretch;
}
.product-section[data-active-card="2"] .workspace,
.product-section[data-active-card="2"] .workbench { display: none; }

/* === System 1: Chat app === */
.lb-chat {
  flex: 0 0 60%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  display: grid;
  grid-template-columns: 32% 1fr;
  overflow: hidden;
  position: relative;
}

.lb-chat-sidebar {
  background: #f7f5f1;
  border-right: 1px solid #ebe7df;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lb-ws-name {
  font-size: 10px;
  font-weight: 700;
  color: #212121;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 6px;
}
.lb-section-label {
  font-size: 8px;
  font-weight: 700;
  color: #999;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  margin-top: 2px;
}
.lb-dm-row {
  font-size: 10px;
  color: var(--ink-soft);
  padding: 0 6px;
  border-radius: 4px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  flex-shrink: 0;
}
.lb-dm-avatar {
  width: 14px; height: 14px;
  border-radius: 3px;
  background: #d4d0c8;
  flex-shrink: 0;
}
.lb-dm-name-bar {
  height: 5px;
  background: #d4d0c8;
  border-radius: 3px;
  width: 50px;
}
.lb-dm-row.enroll {
  background: var(--surface-soft);
  color: var(--black);
  font-weight: 600;
}
.lb-dm-row.enroll .lb-dm-avatar {
  background: #212121;
  color: var(--lin);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  font-family: 'Manrope', sans-serif;
}
.lb-app-badge-sm {
  font-size: 7px;
  font-weight: 700;
  background: rgba(33,33,33,0.15);
  color: var(--black);
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: auto;
  letter-spacing: 0.3px;
  line-height: 1;
}

/* Chat main column */
.lb-chat-main {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.lb-chat-header {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.lb-chat-header-icon {
  width: 22px; height: 22px;
  border-radius: 4px;
  background: #212121;
  color: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  font-family: 'Manrope', sans-serif;
  flex-shrink: 0;
}
.lb-chat-header-name {
  font-size: 13px;
  font-weight: 700;
  color: #212121;
}
.lb-app-badge-lg {
  font-size: 9px;
  font-weight: 700;
  background: var(--line);
  color: var(--ink-soft);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
  flex-shrink: 0;
}

.lb-chat-body {
  flex: 1;
  padding: 14px 14px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  position: relative;
  min-width: 0;
}

/* Employee question */
.lb-emp-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
}
.lb-emp-avatar {
  width: 24px; height: 24px;
  border-radius: 5px;
  background: #d4c8a8;
  color: #6b5530;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  flex-shrink: 0;
}
.lb-msg-body { flex: 1; min-width: 0; }
.lb-name-bar {
  height: 7px;
  background: #cec8bb;
  border-radius: 3px;
  width: 70px;
  margin-bottom: 5px;
}
.lb-msg-bar {
  display: block;
  height: 8px;
  background: #d4cdc1;
  border-radius: 3px;
  margin: 3px 0;
}

/* Thread reply badge */
.lb-thread-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 8px;
  background: var(--line);
  border-radius: 12px;
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  opacity: 0;
}
.lb-thread-pill::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--surface-soft);
}

/* HR reply (aligned under question, no thread indent) */
.lb-hr-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  position: relative;
  opacity: 0;
  transform: translateY(6px);
}
.lb-hr-avatar {
  width: 22px; height: 22px;
  border-radius: 5px;
  background: #4a5562;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  flex-shrink: 0;
}
.lb-hr-body { flex: 1; min-width: 0; position: relative; }
.lb-hr-name-bar {
  height: 6px;
  background: #cec8bb;
  border-radius: 3px;
  width: 60px;
  margin-bottom: 5px;
}
.lb-hr-bar {
  display: block;
  height: 7px;
  background: #cfc8bc;
  border-radius: 3px;
  margin: 3px 0;
  width: 18%;
}

/* Enroll AI mark on HR reply */
.lb-ai-mark {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-soft);
  border: 1.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--lin);
  font-family: 'Manrope', sans-serif;
  opacity: 0;
  transform: scale(0.7);
  box-shadow: 0 2px 6px rgba(243,255,244,0.3);
}

/* Highlight sweep on HR reply */
.lb-hr-sweep {
  position: absolute;
  inset: -4px;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent 0%, rgba(243,255,244,0.5) 50%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
}

/* Composer */
.lb-chat-composer {
  height: 36px;
  margin: 8px 14px 12px;
  border: 1px solid #e0dcd2;
  border-radius: 6px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 10px;
  flex-shrink: 0;
  position: relative;
}
.lb-composer-cursor {
  width: 1px;
  height: 14px;
  background: var(--ink-soft);
  opacity: 0;
}
.lb-composer-send {
  margin-left: auto;
  width: 16px; height: 16px;
  border-radius: 4px;
  background: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  font-size: 10px;
  font-weight: 800;
}

/* Flying policy card */
.lb-fly {
  position: absolute;
  width: 150px;
  height: 40px;
  background: #F3FFF4;
  border: 1px solid #F3FFF4;
  border-left: 2px solid #F3FFF4;
  border-radius: 6px;
  padding: 8px 10px;
  opacity: 0;
  z-index: 50;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(243,255,244,0.2);
}
.lb-fly-row {
  display: flex; align-items: center; gap: 5px; margin-bottom: 5px;
}
.lb-fly-icon { width: 10px; height: 10px; border-radius: 2px; background: var(--surface-soft); }
.lb-fly-label { height: 5px; background: var(--surface-soft); opacity: 0.6; border-radius: 2px; width: 50%; }
.lb-fly-content { height: 4px; background: var(--surface-soft); border-radius: 2px; width: 70%; }

/* === System 2: Knowledge Base === */
.lb-kb {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.lb-kb-header {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.lb-kb-icon {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: #212121;
  color: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  font-family: 'Manrope', sans-serif;
  flex-shrink: 0;
}
.lb-kb-label {
  font-size: 12px;
  font-weight: 700;
  color: #212121;
}
.lb-kb-counter {
  margin-left: auto;
  background: var(--line);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  font-family: 'Manrope', sans-serif;
}
.lb-kb-counter::after { content: "24"; }

.lb-kb-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  flex: 1;
}

.lb-kb-entry {
  background: #fafaf6;
  border: 1px solid #ebe7df;
  border-radius: 6px;
  padding: 9px 10px;
  height: 44px;
  flex-shrink: 0;
  position: relative;
}
.lb-kb-entry-row {
  display: flex; align-items: center; gap: 5px; margin-bottom: 6px;
}
.lb-kb-entry-icon {
  width: 12px; height: 12px;
  border-radius: 2px;
  background: #d8d4cc;
}
.lb-kb-entry-label { height: 5px; background: #cec8bb; border-radius: 3px; min-width: 44px; }
.lb-kb-entry-content { height: 4px; background: #d8d1c5; border-radius: 2px; min-width: 66px; }

/* New entry — initially hidden, materializes during Act 2 */
.lb-kb-entry.new {
  background: var(--surface-soft);
  border-color: var(--surface-soft);
  border-left: 2px solid var(--surface-soft);
  opacity: 0;
  height: 0;
  padding: 0 10px;
  border-width: 0 0 0 2px;
  overflow: hidden;
}
.lb-kb-entry.new .lb-kb-entry-icon { background: var(--surface-soft); }
.lb-kb-entry.new .lb-kb-entry-label { background: var(--surface-soft); opacity: 0.6; }
.lb-kb-entry.new .lb-kb-entry-content { background: var(--surface-soft); }

/* === ANIMATIONS (7s loop) ============================== */
/* Time→percent:
   0.4s=5.7%  0.9s=12.9%  1.2s=17.1%  1.4s=20%   2.6s=37.1%
   2.8s=40%   3.0s=42.9%  3.2s=45.7%  3.7s=52.9% 4.0s=57.1%
   4.7s=67.1% 4.9s=70%    5.0s=71.4%  5.6s=80%   6.0s=85.7%
   6.5s=92.9% */

.product-section[data-active-card="2"] .lb-emp-row {
  animation: emp-life 7s cubic-bezier(0.16,1,0.3,1) infinite;
}
@keyframes emp-life {
  0%, 5%    { opacity: 0; transform: translateY(6px) scale(0.98); }
  9%, 86%   { opacity: 1; transform: translateY(0) scale(1); }
  93%, 100% { opacity: 0; }
}

/* Composer cursor blink during the brief pause */
.product-section[data-active-card="2"] .lb-composer-cursor {
  animation: cursor-blink-life 7s linear infinite;
}
@keyframes cursor-blink-life {
  0%, 11%, 18%, 100% { opacity: 0; }
  13%, 16%           { opacity: 1; }
  14%, 15%           { opacity: 0.3; }
}

.product-section[data-active-card="2"] .lb-hr-row {
  animation: hr-row-life 7s cubic-bezier(0.16,1,0.3,1) infinite;
}
@keyframes hr-row-life {
  0%, 16%   { opacity: 0; transform: translateY(6px); }
  20%, 86%  { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; }
}

.product-section[data-active-card="2"] .lb-hr-bar.b1 { animation: hr-bar-1 7s cubic-bezier(0.4,0,0.2,1) infinite; }
.product-section[data-active-card="2"] .lb-hr-bar.b2 { animation: hr-bar-2 7s cubic-bezier(0.4,0,0.2,1) infinite; }
.product-section[data-active-card="2"] .lb-hr-bar.b3 { animation: hr-bar-3 7s cubic-bezier(0.4,0,0.2,1) infinite; }
@keyframes hr-bar-1 {
  0%, 20%   { width: 18%; }
  26%, 86%  { width: 55%; }
  93%, 100% { width: 18%; }
}
@keyframes hr-bar-2 {
  0%, 24%   { width: 12%; }
  30%, 86%  { width: 40%; }
  93%, 100% { width: 12%; }
}
@keyframes hr-bar-3 {
  0%, 30%   { width: 8%; }
  36%, 86%  { width: 25%; }
  93%, 100% { width: 8%; }
}

.product-section[data-active-card="2"] .lb-thread-pill {
  animation: thread-pill-life 7s cubic-bezier(0.16,1,0.3,1) infinite;
}
@keyframes thread-pill-life {
  0%, 36%   { opacity: 0; transform: scale(0.85) translateY(2px); }
  40%, 86%  { opacity: 1; transform: scale(1) translateY(0); }
  93%, 100% { opacity: 0; }
}

.product-section[data-active-card="2"] .lb-ai-mark {
  animation: ai-mark-life 7s cubic-bezier(0.16,1,0.3,1) infinite;
}
@keyframes ai-mark-life {
  0%, 42%   { opacity: 0; transform: scale(0.7); }
  46%, 86%  { opacity: 1; transform: scale(1); }
  93%, 100% { opacity: 0; }
}

.product-section[data-active-card="2"] .lb-hr-sweep {
  animation: hr-sweep-life 7s ease infinite;
}
@keyframes hr-sweep-life {
  0%, 45%    { opacity: 0; transform: translateX(-100%); }
  47%        { opacity: 1; transform: translateX(-100%); }
  53%        { opacity: 1; transform: translateX(100%); }
  54%, 100%  { opacity: 0; transform: translateX(100%); }
}

.product-section[data-active-card="2"] .lb-fly {
  animation: fly-life 7s cubic-bezier(0.45,0.05,0.55,0.95) infinite;
}
@keyframes fly-life {
  0%, 52%    { opacity: 0; left: 24%;  top: 90px; transform: scale(0.95); }
  55%        { opacity: 1; left: 24%;  top: 90px; transform: scale(1); }
  62%        { opacity: 1; left: 50%;  top: 50px; transform: scale(0.95); }
  67%        { opacity: 1; left: 78%;  top: 24px; transform: scale(0.92); }
  68%, 100%  { opacity: 0; }
}

.product-section[data-active-card="2"] .lb-kb-entry.new {
  animation: new-entry-life 7s cubic-bezier(0.16,1,0.3,1) infinite;
}
@keyframes new-entry-life {
  0%, 65%   { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; border-width: 0 0 0 2px; box-shadow: 0 0 0 0 rgba(243,255,244,0); }
  68%       { opacity: 1; height: 44px; padding: 9px 10px; border-width: 1px 1px 1px 2px; box-shadow: 0 0 14px 2px rgba(243,255,244,0.7); }
  76%       { box-shadow: 0 0 14px 2px rgba(243,255,244,0.7); }
  82%       { box-shadow: 0 0 0 0 rgba(243,255,244,0); }
  86%       { opacity: 1; height: 44px; padding: 9px 10px; border-width: 1px 1px 1px 2px; }
  93%, 100% { opacity: 0; height: 0; padding: 0 10px; border-width: 0 0 0 2px; }
}

.product-section[data-active-card="2"] .lb-kb-counter::after {
  animation: counter-life 7s steps(1, end) infinite;
}
@keyframes counter-life {
  0%, 69%   { content: "24"; }
  70%, 92%  { content: "25"; }
  93%, 100% { content: "24"; }
}