/* No horizontal lines between any sections by default (Hero, Trusted by, 3 steps, CRM icons, etc.) */
section { border-top: none !important; }
.cl-sections { --mockup-max-width: 440px; }
/* Dividers only between the 8 feature subsections (by id), so page sections wrongly nested in .cl-sections do not get a line */
.cl-sections > #find-leads + section,
.cl-sections > #auto-pilot + section,
.cl-sections > #co-pilot + section,
.cl-sections > #crm + section,
.cl-sections > #unified-inbox + section,
.cl-sections > #multiple-senders + section,
.cl-sections > #integrations + section { border-top: 1px solid #F0F0F0 !important; }
/* UI mockup style: same as Revised Feature Design (#7B61FF only) */
.revised-feature-bg { background: #F7F7F7; }
.revised-task-card { background: #F8F8F8; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.06); padding: 20px; }
.revised-task-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #EEEEEE; }
.revised-task-item:last-child { border-bottom: 0; }
.revised-task-bar { width: 4px; border-radius: 2px; flex-shrink: 0; background: #7B61FF; min-height: 44px; }
.revised-task-content { flex: 1; min-width: 0; }
.revised-task-title { font-size: 16px; font-weight: 700; color: #333; margin-bottom: 2px; }
.revised-task-desc { font-size: 14px; color: #666; margin-bottom: 6px; }
.revised-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.revised-badge { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #E8E3FF; color: #5a4ab5; font-weight: 500; }
.revised-due { font-size: 12px; color: #333; }
.revised-dashboard-card { background: #fff; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.06); padding: 24px; }
.revised-dashboard-icon { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #E8E3FF 0%, #7B61FF 100%); margin-bottom: 12px; }
.revised-dashboard-title { font-size: 18px; font-weight: 700; color: #1A1A1A; margin-bottom: 16px; }
.revised-metric { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #F5F5F5; border-radius: 10px; margin-bottom: 10px; }
.revised-metric:last-child { margin-bottom: 0; }
.revised-metric-bar { width: 4px; border-radius: 2px; flex-shrink: 0; background: #7B61FF; min-height: 36px; }
.revised-metric-label { flex: 1; font-size: 14px; color: #333; }
.revised-metric-value { font-size: 14px; font-weight: 700; color: #1A1A1A; }
/* Find leads: search UI mockup — search bar + list only, reference style */
.mockup-search-wrap { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.06); padding: 20px; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: var(--mockup-max-width); }
.mockup-search-main { flex: 1; display: flex; flex-direction: column; min-w-0; gap: 16px; }
.mockup-search-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: #F5F5F5; border: none; }
.mockup-search-bar > svg { width: 14px; height: 14px; flex-shrink: 0; color: #7B61FF; }
.mockup-search-bar input { flex: 1; background: transparent; border: none; color: #1A1A1A; font-size: 14px; outline: none; min-width: 0; }
.mockup-search-bar input::placeholder { color: #999; }
.mockup-search-btn { position: relative; width: 36px; height: 36px; border-radius: 10px; background: #7B61FF; border: none; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; overflow: visible; }
.mockup-search-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255,255,255,0.9) 0%, rgba(220,210,255,0.5) 35%, rgba(123,97,255,0.2) 60%, transparent 75%);
  opacity: 0;
}
.mockup-search-btn.mockup-search-btn-pressed::after { animation: mockup-search-burst 0.85s ease-out forwards; }
@keyframes mockup-search-burst {
  0% {
    transform: scale(0.7) rotate(0deg);
    opacity: 0;
    box-shadow:
      0 -5px 0 0 rgba(255,255,255,0.98),
      4px -2.5px 0 0 rgba(255,255,255,0.95),
      4px 2.5px 0 0 rgba(255,248,240,0.95),
      0 5px 0 0 rgba(255,255,255,0.98),
      -4px 2.5px 0 0 rgba(255,255,255,0.95),
      -4px -2.5px 0 0 rgba(255,248,240,0.95);
  }
  12% { opacity: 1; }
  100% {
    transform: scale(1.5) rotate(8deg);
    opacity: 0;
    box-shadow:
      0 -20px 0 0 rgba(255,255,255,0),
      17px -10px 0 0 rgba(255,255,255,0),
      17px 10px 0 0 rgba(255,248,240,0),
      0 20px 0 0 rgba(255,255,255,0),
      -17px 10px 0 0 rgba(255,255,255,0),
      -17px -10px 0 0 rgba(255,248,240,0);
  }
}
.mockup-search-btn svg { width: 20px; height: 20px; position: relative; z-index: 1; }
.mockup-search-list { flex: 1; min-h-0; overflow: auto; display: flex; flex-direction: column; gap: 0; }
.mockup-search-list-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #FAFAFA; border-radius: 10px; margin-bottom: 8px; }
.mockup-search-list-item:last-child { margin-bottom: 0; }
.mockup-search-list-bar { width: 4px; border-radius: 2px; flex-shrink: 0; background: #7B61FF; min-height: 40px; }
.mockup-search-list-content { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.mockup-search-list-text { display: flex; flex-direction: column; gap: 2px; }
.mockup-search-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; background: #E8E3FF; }
.mockup-search-list-name { font-size: 14px; font-weight: 600; color: #1A1A1A; }
.mockup-search-list-title { font-size: 13px; color: #666; }
.mockup-search-count { font-size: 12px; color: #666; margin-top: -4px; }
.mockup-search-results { transition: opacity 0.25s ease; }
.mockup-search-results.mockup-search-results-hidden { opacity: 0; }
.mockup-search-results.mockup-search-items-hidden .mockup-search-list-item { opacity: 0; transform: translateY(-6px); }
.mockup-search-btn { animation: mockup-search-btn-glow 2.5s ease-in-out infinite; transition: transform 0.12s ease, opacity 0.12s ease; }
.mockup-search-btn.mockup-search-btn-pressed { transform: scale(0.92); opacity: 0.9; animation: none; }
@keyframes mockup-search-btn-glow { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(123, 97, 255, 0.3); } 50% { opacity: 1; box-shadow: 0 0 0 4px rgba(123, 97, 255, 0.15); } }
@keyframes mockup-fan-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.mockup-search-results.mockup-search-fan-in .mockup-search-list-item { animation: mockup-fan-in 0.2s ease-out backwards; }
.mockup-search-results.mockup-search-fan-in .mockup-search-list-item:nth-child(1) { animation-delay: 0ms; }
.mockup-search-results.mockup-search-fan-in .mockup-search-list-item:nth-child(2) { animation-delay: 45ms; }
.mockup-search-results.mockup-search-fan-in .mockup-search-list-item:nth-child(3) { animation-delay: 90ms; }
.mockup-search-results.mockup-search-fan-in .mockup-search-list-item:nth-child(4) { animation-delay: 135ms; }
.mockup-search-results.mockup-search-fan-in .mockup-search-list-item:nth-child(5) { animation-delay: 180ms; }

/* Auto-pilot mockup: workflow + metrics — original node style, beautified (one shadow, 12px radius, 12px rhythm), 1:1 safe */
.mockup-autopilot-workflow {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.workflow-metrics {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  width: 100%;
  justify-content: center;
}
.workflow-metric {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 12px;
  min-width: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  border: 1px solid #E5E5E5;
}
.workflow-metric-bar { width: 4px; border-radius: 2px; flex-shrink: 0; background: #7B61FF; height: 24px; }
.workflow-metric-label { font-size: 11px; color: #666; white-space: nowrap; }
.workflow-metric-value { font-size: 13px; font-weight: 700; color: #1A1A1A; min-width: 2.5ch; text-align: right; }
.mockup-autopilot-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.workflow-start {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 12px;
  width: 100%;
  max-width: 280px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  border: 1px solid #E5E5E5;
}
.workflow-start-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #E8E3FF;
  flex-shrink: 0;
}
.workflow-start-label { font-size: 13px; font-weight: 600; color: #1A1A1A; }
.workflow-connector-v { width: 2px; height: 10px; background: #E8E3FF; border-radius: 1px; margin: 0 auto 12px; }
.workflow-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  font-size: 12px;
  color: #333;
  margin-bottom: 12px;
  position: relative;
  width: 100%;
  max-width: 280px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.workflow-node-icon { width: 16px; height: 16px; flex-shrink: 0; color: #7B61FF; }
.workflow-node-close { margin-left: auto; width: 14px; height: 14px; color: #999; flex-shrink: 0; }
.workflow-node-avatars {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
}
.workflow-node-avatars span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -4px;
  background: #E8E3FF;
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.workflow-node-avatars span:nth-child(1) { background-image: url('https://randomuser.me/api/portraits/women/12.jpg'); }
.workflow-node-avatars span:nth-child(2) { background-image: url('https://randomuser.me/api/portraits/men/22.jpg'); }
.workflow-node-avatars span:nth-child(3) { background-image: url('https://randomuser.me/api/portraits/women/44.jpg'); }
.workflow-node-avatars span:nth-child(4) { background-image: url('https://randomuser.me/api/portraits/men/32.jpg'); }
.workflow-branches { display: flex; gap: 16px; width: 100%; max-width: 320px; justify-content: center; margin-top: 12px; }
.workflow-branch { flex: 1; max-width: 140px; display: flex; flex-direction: column; align-items: center; }
.workflow-branch .workflow-connector-v { margin-bottom: 12px; }
.workflow-branch .workflow-node { max-width: 100%; }
.workflow-add-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: #7B61FF;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  margin-top: 12px;
  cursor: default;
  box-shadow: 0 2px 8px rgba(123,97,255,0.2);
}
.workflow-end-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  font-size: 12px;
  color: #666;
  margin-top: 16px;
  width: 100%;
  max-width: 280px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.workflow-end-node svg { width: 14px; height: 14px; color: #7B61FF; flex-shrink: 0; }

/* Auto-pilot simple: one card (connection requests, messages, meetings) + Maya floating beside it */
@keyframes mockup-maya-sparkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
@keyframes mockup-maya-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(110, 64, 215, 0.35), 0 0 12px 2px rgba(110, 64, 215, 0.25); }
  50% { box-shadow: 0 0 0 2px rgba(110, 64, 215, 0.5), 0 0 20px 6px rgba(110, 64, 215, 0.45); }
}
@keyframes mockup-maya-float {
  0%, 100% { transform: translateX(-50%) translateY(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-50%) translateY(-6px); }
}
@keyframes mockup-copilot-maya-float {
  0%, 100% { transform: translateY(-50%) translateY(0); }
  50% { transform: translateY(-50%) translateY(-6px); }
}
.mockup-autopilot-simple {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: var(--mockup-max-width);
  min-height: 200px;
}
.mockup-autopilot-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  padding: 36px 44px;
  border: 1px solid #E5E5E5;
  z-index: 1;
  width: 100%;
  max-width: 100%;
}
.mockup-autopilot-card-title {
  font-size: 18px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 22px;
}
.mockup-autopilot-card-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #EEEEEE;
}
.mockup-autopilot-card-metric:last-child { border-bottom: 0; }
.mockup-autopilot-card-metric-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.mockup-autopilot-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #EDE9F5 0%, #E0D9F8 100%);
  color: #7B61FF;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mockup-autopilot-card-icon svg {
  width: 22px;
  height: 22px;
}
.mockup-autopilot-card-label { font-size: 16px; color: #333; white-space: nowrap; }
.mockup-autopilot-card-value {
  font-size: 26px;
  font-weight: 700;
  color: #1A1A1A;
  min-width: 5ch;
  text-align: right;
  flex-shrink: 0;
}
.mockup-autopilot-maya {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%) translateY(-50%);
  z-index: 2;
  animation: mockup-maya-float 3s ease-in-out infinite;
}
.mockup-autopilot-maya-wrap {
  position: relative;
  display: inline-block;
}
.mockup-autopilot-maya-wrap .magic-star {
  position: absolute;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(110, 64, 215, 0.6);
  animation: mockup-maya-sparkle 2s ease-in-out infinite;
}
.mockup-autopilot-maya-wrap .magic-star:nth-child(1) { top: -8px; right: 8px; color: #6E40D7; animation-delay: 0s; }
.mockup-autopilot-maya-wrap .magic-star:nth-child(2) { top: 8px; right: -10px; color: #E6DFFD; font-size: 10px; animation-delay: 0.3s; }
.mockup-autopilot-maya-wrap .magic-star:nth-child(3) { bottom: 10px; right: 6px; color: #FFE066; animation-delay: 0.6s; }
.mockup-autopilot-maya-wrap .magic-star:nth-child(4) { bottom: -6px; left: 14px; color: #6E40D7; font-size: 11px; animation-delay: 0.9s; }
.mockup-autopilot-maya-wrap .magic-star:nth-child(5) { top: 12px; left: -8px; color: #E6DFFD; animation-delay: 1.2s; }
.mockup-autopilot-maya-wrap .magic-star:nth-child(6) { top: -6px; left: 10px; color: #FFE066; font-size: 10px; animation-delay: 1.5s; }
.mockup-autopilot-maya-wrap .magic-star:nth-child(7) { top: -12px; right: -4px; color: #6E40D7; font-size: 9px; animation-delay: 0.2s; }
.mockup-autopilot-maya-wrap .magic-star:nth-child(8) { bottom: -10px; right: -8px; color: #FFE066; animation-delay: 1s; }
.mockup-autopilot-maya-wrap .magic-star:nth-child(9) { bottom: -8px; left: -10px; color: #E6DFFD; font-size: 10px; animation-delay: 1.8s; }
.mockup-autopilot-maya-wrap img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  animation: mockup-maya-glow 2.5s ease-in-out infinite;
  display: block;
}

/* Co-pilot mockup – Message Preview style (aligned with co-pilot-ui.png) */
.mockup-copilot-wrap { position: relative; background: #fff; border-radius: 16px; overflow: visible; box-shadow: 0 4px 20px rgba(0,0,0,0.06); padding: 32px 34px; max-width: var(--mockup-max-width); }
.mockup-copilot-message-title { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.mockup-copilot-message-title-icon { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg, #EDE9F5 0%, #E0D9F8 100%); color: #7B61FF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mockup-copilot-message-title-icon svg { width: 14px; height: 14px; }
.mockup-copilot-message-title-text { font-size: 15px; font-weight: 600; color: #1A1A1A; }
.mockup-copilot-thread { display: flex; flex-direction: column; gap: 0; padding: 0; border-radius: 10px; background: #F8F8FA; border: 1px solid #EEEEEE; margin-bottom: 22px; overflow: hidden; }
.mockup-copilot-thread-from, .mockup-copilot-thread-to { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 16px; }
.mockup-copilot-thread-from { border-top: 1px solid #EEEEEE; }
.mockup-copilot-thread-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #E8E3FF; transition: opacity 0.35s ease; }
.mockup-copilot-btn-icon-only { width: 32px; padding: 0; justify-content: center; min-width: 32px; }
.mockup-copilot-btn-options { background: transparent; color: #666; border: 1px solid #E5E5E5; }
.mockup-copilot-thread-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #888; margin-bottom: 1px; }
.mockup-copilot-thread-name { font-size: 13px; font-weight: 600; color: #1A1A1A; }
.mockup-copilot-preview { border-radius: 12px; padding: 14px 18px 12px; background: #FAFAFC; border: 1px solid #EEEEEE; margin-bottom: 24px; font-size: 14px; line-height: 1.5; color: #333; min-height: 0; max-height: 220px; overflow-y: auto; overflow-x: hidden; word-wrap: break-word; }
.mockup-copilot-preview .mockup-copilot-highlight { background: linear-gradient(135deg, #EDE9F5 0%, #E0D9F8 100%); color: #5a4ab5; padding: 2px 6px; border-radius: 6px; font-weight: 500; }
@keyframes mockup-copilot-ai-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123, 97, 255, 0); border-color: #EEEEEE; }
  50% { box-shadow: 0 0 0 3px rgba(123, 97, 255, 0.15); border-color: #E0D9F8; }
}
.mockup-copilot-preview.animating-ai { animation: mockup-copilot-ai-pulse 0.5s ease-out; }
.mockup-copilot-actions { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: nowrap; }
.mockup-copilot-actions-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mockup-copilot-actions-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.mockup-copilot-btn { height: 32px; padding: 0 14px; border-radius: 16px; font-size: 12px; font-weight: 600; border: none; cursor: default; background: #7B61FF; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.mockup-copilot-btn:disabled { opacity: 0.7; }
.mockup-copilot-btn-secondary { background: transparent; color: #666; border: 1px solid #E5E5E5; }
.mockup-copilot-actions .mockup-copilot-btn:hover,
.mockup-copilot-actions .mockup-copilot-btn:focus,
.mockup-copilot-actions .mockup-copilot-btn:active { background: #7B61FF; color: #fff; border: none; outline: none; }
.mockup-copilot-actions .mockup-copilot-btn-secondary:hover,
.mockup-copilot-actions .mockup-copilot-btn-secondary:focus,
.mockup-copilot-actions .mockup-copilot-btn-secondary:active { background: transparent; color: #666; border: 1px solid #E5E5E5; outline: none; }
.mockup-copilot-btn .mockup-copilot-btn-icon { width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mockup-copilot-btn .mockup-copilot-btn-icon svg { width: 14px; height: 14px; }
.mockup-copilot-container { position: relative; }
.mockup-copilot-maya {
  position: absolute;
  top: 32px;
  right: -20px;
  z-index: 2;
  animation: mockup-copilot-maya-float 3s ease-in-out infinite;
}
.mockup-copilot-maya .mockup-autopilot-maya-wrap img {
  width: 72px;
  height: 72px;
}

/* CRM mockup – 1:1 aspect, table-style with columns, 5 leads */
.mockup-crm-wrap { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.06); padding: 18px 20px; width: 100%; max-width: var(--mockup-max-width); display: flex; flex-direction: column; min-height: 0; }
.mockup-crm-header { margin-bottom: 10px; flex-shrink: 0; }
.mockup-crm-title { font-size: 17px; font-weight: 700; color: #1A1A1A; }
/* CRM tabs */
.mockup-crm-tabs { display: flex; gap: 3px; margin-bottom: 12px; padding: 3px; background: #F5F5F5; border-radius: 10px; flex-shrink: 0; }
.mockup-crm-tab { flex: 1; font-size: 11px; font-weight: 600; color: #666; padding: 7px 4px; border-radius: 8px; text-align: center; transition: background 0.2s ease, color 0.2s ease; cursor: pointer; }
.mockup-crm-tab.active { background: #fff; color: #5a4ab5; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
/* CRM table header */
.mockup-crm-thead { position: relative; z-index: 0; display: grid; grid-template-columns: 1fr 72px 36px; gap: 8px; padding: 8px 14px 10px; font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.02em; border-bottom: 1px solid #EEE; align-items: center; background: #fff; }
.mockup-crm-thead span:nth-child(2) { text-align: right; }
/* CRM panels */
.mockup-crm-panels { position: relative; z-index: 1; min-height: 0; flex: 1; overflow: hidden; min-height: 300px; }
.mockup-crm-panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.mockup-crm-panel.active { position: relative; opacity: 1; visibility: visible; }
.mockup-crm-panel-list { display: flex; flex-direction: column; gap: 6px; }
.mockup-crm-row { display: grid; grid-template-columns: 1fr 72px 36px; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 10px; }
.mockup-crm-row.active { background: #EDE9F5; }
.mockup-crm-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mockup-crm-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #E8E3FF; }
.mockup-crm-name { font-size: 14px; font-weight: 600; color: #1A1A1A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mockup-crm-meta { font-size: 12px; color: #666; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mockup-crm-cell.m-cell-status { justify-content: flex-end; }
.mockup-crm-badge { font-size: 11px; padding: 4px 8px; border-radius: 999px; font-weight: 500; }
.mockup-crm-badge.follow-up { background: #FFEDD5; color: #9A3412; }
.mockup-crm-panel[data-panel="0"] .mockup-crm-badge { opacity: 0; transform: translateX(-10px); }
#crm.crm-animation-triggered .mockup-crm-panel[data-panel="0"] .mockup-crm-badge { animation: mockup-crm-pill-in 2.5s ease-in-out forwards; }
#crm.crm-animation-triggered .mockup-crm-panel[data-panel="0"] .mockup-crm-panel-list .mockup-crm-row:nth-child(1) .mockup-crm-badge { animation-delay: 0s; }
#crm.crm-animation-triggered .mockup-crm-panel[data-panel="0"] .mockup-crm-panel-list .mockup-crm-row:nth-child(2) .mockup-crm-badge { animation-delay: 0.5s; }
#crm.crm-animation-triggered .mockup-crm-panel[data-panel="0"] .mockup-crm-panel-list .mockup-crm-row:nth-child(3) .mockup-crm-badge { animation-delay: 1s; }
#crm.crm-animation-triggered .mockup-crm-panel[data-panel="0"] .mockup-crm-panel-list .mockup-crm-row:nth-child(4) .mockup-crm-badge { animation-delay: 1.5s; }
#crm.crm-animation-triggered .mockup-crm-panel[data-panel="0"] .mockup-crm-panel-list .mockup-crm-row:nth-child(5) .mockup-crm-badge { animation-delay: 2s; }
@keyframes mockup-crm-pill-in {
  0% { opacity: 0; transform: translateX(-10px); }
  16% { opacity: 1; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(0); }
}
.mockup-crm-badge.unread { background: #DBEAFE; color: #1D4ED8; }
.mockup-crm-badge.won { background: #DCFCE7; color: #166534; }
.mockup-crm-badge.lost { background: #FEE2E2; color: #B91C1C; }
.mockup-crm-btn-msg { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #E8E8E8; background: #FAFAFA; color: #999; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mockup-crm-btn-msg svg { width: 14px; height: 14px; }
/* Unified Inbox mockup */
.mockup-inbox-wrap { background: #fff; border-radius: 16px; overflow: visible; box-shadow: 0 4px 20px rgba(0,0,0,0.06); padding: 24px; max-width: var(--mockup-max-width); }
.mockup-inbox-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.mockup-inbox-title { font-size: 18px; font-weight: 700; color: #1A1A1A; }
.mockup-inbox-choose-sender { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mockup-inbox-choose-sender-label { font-size: 12px; color: #666; font-weight: 500; }
.mockup-inbox-account-dropdown-wrap { position: relative; }
.mockup-inbox-account-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid #E5E5E5; border-radius: 10px; background: #FAFAFA; font-size: 13px; color: #333; font-weight: 500; min-width: 100px; }
.mockup-inbox-account-trigger-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; border: 2px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.mockup-inbox-account-trigger-name { flex: 1; min-width: 0; text-align: left; }
.mockup-inbox-account-trigger-chevron { width: 14px; height: 14px; color: #999; flex-shrink: 0; }
.mockup-inbox-account-panel { position: absolute; top: calc(100% + 6px); right: 0; min-width: 100%; width: max-content; max-width: 220px; background: #fff; border: 1px solid #E5E5E5; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); overflow: hidden; z-index: 10; }
.mockup-inbox-account-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; color: #333; font-weight: 500; border: none; width: 100%; text-align: left; cursor: default; background: #fff; border-bottom: 1px solid #EEE; transition: background 0.25s ease; }
.mockup-inbox-account-option:last-child { border-bottom: 0; }
.mockup-inbox-account-option.selected { background: #EDE9F5; color: #5a4ab5; }
.mockup-inbox-account-option.selected .mockup-inbox-account-option-name { color: #5a4ab5; }
.mockup-inbox-account-option-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; }
.mockup-inbox-account-option-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mockup-inbox-account-option-name { font-weight: 600; color: #1A1A1A; }
.mockup-inbox-account-option-role { font-size: 11px; color: #666; font-weight: 400; }
.mockup-inbox-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 12px; margin-bottom: 8px; transition: background 0.25s ease; }
.mockup-inbox-row.active { background: #EDE9F5; }
.mockup-inbox-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; background: #E8E3FF; }
.mockup-inbox-body { flex: 1; min-width: 0; }
.mockup-inbox-name { font-size: 15px; font-weight: 600; color: #1A1A1A; }
.mockup-inbox-snippet { font-size: 13px; color: #666; margin-top: 4px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.mockup-inbox-snippet-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mockup-inbox-scheduled { display: inline-flex; align-items: center; gap: 4px; color: #7B61FF; font-weight: 500; flex-shrink: 0; }
.mockup-inbox-scheduled svg { width: 12px; height: 12px; }
.mockup-inbox-time { font-size: 12px; color: #999; flex-shrink: 0; }

/* Multiple senders mockup: card left, senders column right of card – scale to fill cell like other mockups */
.multiple-senders-cell { overflow: hidden; }
.mockup-senders-container { display: flex; align-items: stretch; justify-content: center; gap: 12px; flex-wrap: nowrap; width: 84%; max-width: 84%; position: relative; transform: scale(1.19); transform-origin: center center; }
.mockup-senders-wrap { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.06); padding: 16px; width: 100%; max-width: 460px; display: flex; flex-direction: column; min-height: 0; flex: 0 1 460px; }
.mockup-senders-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: nowrap; min-width: 0; }
.mockup-senders-header-left { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.mockup-senders-title { font-size: 15px; font-weight: 700; color: #1A1A1A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.mockup-senders-list-size { font-size: 12px; font-weight: 600; color: #64748B; flex-shrink: 0; }
.mockup-senders-connected { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: #5a4ab5; font-weight: 600; padding: 4px 8px; border-radius: 999px; background: #EDE9F5; flex-shrink: 0; }
.mockup-senders-connected svg { width: 10px; height: 10px; flex-shrink: 0; color: #7B61FF; }
.mockup-senders-list-wrap { min-width: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mockup-senders-thead { display: grid; grid-template-columns: minmax(0, 1fr) 56px 68px; gap: 10px; padding: 0 2px 8px 2px; margin-bottom: 2px; font-size: 9px; font-weight: 600; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid #E2E8F0; align-items: center; }
.mockup-senders-thead span:nth-child(2),
.mockup-senders-thead span:nth-child(3) { text-align: center; }
.mockup-senders-leads { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; justify-content: flex-start; }
.mockup-senders-lead-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 68px; gap: 10px; align-items: center; padding: 10px 8px; border-radius: 10px; transition: background 0.2s ease; min-width: 0; }
.mockup-senders-lead-row:hover { background: #F8FAFC; }
.mockup-senders-lead-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mockup-senders-lead-row .mockup-senders-lead-cell:nth-child(2),
.mockup-senders-lead-row .mockup-senders-lead-cell:nth-child(3) { justify-content: center; }
/* Fan-in: sender and status columns animate in from top when section in view */
.mockup-senders-leads .mockup-senders-lead-row .mockup-senders-lead-cell:nth-child(2),
.mockup-senders-leads .mockup-senders-lead-row .mockup-senders-lead-cell:nth-child(3) { opacity: 0; transform: translateX(12px); }
#multiple-senders.senders-fan-in-triggered .mockup-senders-leads .mockup-senders-lead-row .mockup-senders-lead-cell:nth-child(2),
#multiple-senders.senders-fan-in-triggered .mockup-senders-leads .mockup-senders-lead-row .mockup-senders-lead-cell:nth-child(3) { animation: mockup-senders-fan-in 0.35s ease-out forwards; }
#multiple-senders.senders-fan-in-triggered .mockup-senders-leads .mockup-senders-lead-row:nth-child(1) .mockup-senders-lead-cell:nth-child(2),
#multiple-senders.senders-fan-in-triggered .mockup-senders-leads .mockup-senders-lead-row:nth-child(1) .mockup-senders-lead-cell:nth-child(3) { animation-delay: 0ms; }
#multiple-senders.senders-fan-in-triggered .mockup-senders-leads .mockup-senders-lead-row:nth-child(2) .mockup-senders-lead-cell:nth-child(2),
#multiple-senders.senders-fan-in-triggered .mockup-senders-leads .mockup-senders-lead-row:nth-child(2) .mockup-senders-lead-cell:nth-child(3) { animation-delay: 500ms; }
#multiple-senders.senders-fan-in-triggered .mockup-senders-leads .mockup-senders-lead-row:nth-child(3) .mockup-senders-lead-cell:nth-child(2),
#multiple-senders.senders-fan-in-triggered .mockup-senders-leads .mockup-senders-lead-row:nth-child(3) .mockup-senders-lead-cell:nth-child(3) { animation-delay: 1000ms; }
#multiple-senders.senders-fan-in-triggered .mockup-senders-leads .mockup-senders-lead-row:nth-child(4) .mockup-senders-lead-cell:nth-child(2),
#multiple-senders.senders-fan-in-triggered .mockup-senders-leads .mockup-senders-lead-row:nth-child(4) .mockup-senders-lead-cell:nth-child(3) { animation-delay: 1500ms; }
#multiple-senders.senders-fan-in-triggered .mockup-senders-leads .mockup-senders-lead-row:nth-child(5) .mockup-senders-lead-cell:nth-child(2),
#multiple-senders.senders-fan-in-triggered .mockup-senders-leads .mockup-senders-lead-row:nth-child(5) .mockup-senders-lead-cell:nth-child(3) { animation-delay: 2000ms; }
@keyframes mockup-senders-fan-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
.mockup-senders-lead-cell .mockup-senders-lead-name { font-size: 12px; font-weight: 600; color: #1A1A1A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.mockup-senders-lead-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #E2E8F0; }
.mockup-senders-lead-cell > div { min-width: 0; }
.mockup-senders-lead-badge { font-size: 9px; padding: 3px 6px; border-radius: 4px; font-weight: 600; white-space: nowrap; }
.mockup-senders-lead-badge.pending { background: #FEF3C7; color: #92400E; }
.mockup-senders-lead-badge.connected { background: #D1FAE5; color: #065F46; }
.mockup-senders-lead-sender-cell { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.mockup-senders-lead-sender-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #E2E8F0; }
.mockup-senders-lead-sender { font-size: 11px; font-weight: 500; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mockup-senders-side { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: #F8FAFC; border-radius: 10px; border: 1px solid #E2E8F0; flex: 1 1 auto; min-width: 0; }
.mockup-senders-rotate-label { font-size: 10px; font-weight: 600; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.04em; }
.mockup-senders-column { display: flex; flex-direction: column; gap: 10px; align-items: center; flex: 1; justify-content: center; }
.mockup-senders-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mockup-senders-avatar { width: 38px; height: 38px; border-radius: 50%; background: #E2E8F0; object-fit: cover; display: block; }
.mockup-senders-avatar-add { width: 38px; height: 38px; background: #fff; border: 2px dashed #CBD5E1; display: flex; align-items: center; justify-content: center; color: #94A3B8; flex-shrink: 0; }
.mockup-senders-avatar-add svg { width: 18px; height: 18px; }
.mockup-senders-label { font-size: 11px; font-weight: 500; color: #334155; }
.mockup-senders-safe { font-size: 10px; color: #5a4ab5; font-weight: 600; }
.mockup-senders-sync-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; }
.mockup-senders-sync-wheel { width: 28px; height: 28px; border: 2px solid #E2E8F0; border-top-color: #7B61FF; border-radius: 50%; animation: mockup-senders-sync-spin 1.2s linear infinite; }
@keyframes mockup-senders-sync-spin { to { transform: rotate(360deg); } }
.mockup-senders-container { position: relative; }

/* Integrations mockup */
.mockup-int-wrap { background: #fff; border-radius: 18px; overflow: visible; box-shadow: 0 4px 20px rgba(0,0,0,0.06); padding: 24px; max-width: 600px; }
.mockup-int-title { font-size: 18px; font-weight: 700; color: #1A1A1A; margin-bottom: 16px; text-align: center; }
.mockup-int-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mockup-int-tile { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #F5F5F5; border-radius: 12px; transition: background 0.2s ease; min-width: 0; }
.mockup-int-tile .mockup-int-meta { flex: 1; min-width: 0; }
.mockup-int-toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; background: #E0E0E0; border-radius: 11px; cursor: pointer; transition: background 0.2s ease; }
.mockup-int-toggle.on { background: #7B61FF; }
.mockup-int-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 0.2s ease; }
.mockup-int-toggle.on::after { transform: translateX(18px); }
.mockup-int-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.mockup-int-tile.connected { background: #EDE9F5; }
.mockup-int-icon { width: 32px; height: 32px; border-radius: 6px; background: #E0E0E0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #666; }
.mockup-int-tile.connected .mockup-int-icon { background: #7B61FF; color: #fff; }
.mockup-int-icon img { width: 100%; height: 100%; object-fit: contain; }
.mockup-int-icon:has(img) { background: #fff; padding: 4px; }
.mockup-int-tile.connected .mockup-int-icon:has(img) { background: #fff; }
.mockup-int-name { font-size: 13px; font-weight: 600; color: #333; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mockup-int-status { font-size: 11px; color: #666; margin-top: 2px; }
.mockup-int-tile.connected .mockup-int-status { color: #5a4ab5; }

/* Analytics mockup */
.mockup-analytics-wrap { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.08); padding: 28px; max-width: var(--mockup-max-width); }
.mockup-analytics-title { font-size: 20px; font-weight: 700; color: #1A1A1A; margin-bottom: 16px; }
.mockup-analytics-filters { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: nowrap; min-width: 0; }
.mockup-analytics-dropdown { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; flex: 1; padding: 11px 16px; background: #F5F5F5; border: 1px solid #E0E0E0; border-radius: 10px; font-size: 14px; color: #333; cursor: default; pointer-events: none; }
.mockup-analytics-dropdown span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mockup-analytics-dropdown svg { flex-shrink: 0; width: 16px; height: 16px; color: #666; }
.mockup-analytics-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.mockup-analytics-metric { padding: 16px 18px; background: #F5F5F5; border-radius: 12px; min-width: 0; }
.mockup-analytics-label { font-size: 13px; color: #666; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mockup-analytics-value { font-size: 28px; font-weight: 700; color: #1A1A1A; white-space: nowrap; }
.mockup-analytics-chart { height: 145px; border-radius: 12px; overflow: hidden; background: #F9F9F9; }
.mockup-analytics-chart svg { width: 100%; height: 100%; display: block; }

/* Feature sections: at 1092px breakpoint switch to single column, text then image */
@media (max-width: 1091px) {
  .cl-sections .feature-section-grid {
    grid-template-columns: 1fr;
  }
  .cl-sections .feature-section-text {
    order: 1;
  }
  .cl-sections .feature-section-image {
    order: 2;
  }
}

/* CRM mockup: smaller below 570px */
@media (max-width: 569px) {
  #crm .feature-section-image {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #crm .feature-section-image .mockup-crm-wrap {
    transform: scale(0.82);
    transform-origin: center;
  }
}

/* Find leads mockup: smaller below 570px */
@media (max-width: 569px) {
  #find-leads .feature-section-image {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #find-leads .feature-section-image .mockup-search-wrap {
    transform: scale(0.82);
    transform-origin: center;
  }
}

/* Auto-pilot mockup: smaller below 570px */
@media (max-width: 569px) {
  #auto-pilot .feature-section-image {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #auto-pilot .feature-section-image .mockup-autopilot-simple {
    transform: scale(0.82);
    transform-origin: center;
  }
}

/* Co-pilot mockup: smaller below 570px */
@media (max-width: 569px) {
  #co-pilot .feature-section-image {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #co-pilot .feature-section-image .mockup-copilot-wrap {
    transform: scale(0.82);
    transform-origin: center;
  }
}

/* Unified Inbox mockup: smaller below 570px */
@media (max-width: 569px) {
  #unified-inbox .feature-section-image {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #unified-inbox .feature-section-image .mockup-inbox-wrap {
    transform: scale(0.82);
    transform-origin: center;
  }
}

/* Multiple senders mockup: slightly smaller below 570px */
@media (max-width: 569px) {
  #multiple-senders .feature-section-image {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #multiple-senders .feature-section-image .mockup-senders-container {
    transform: scale(0.95);
    transform-origin: center;
  }
}

/* Integrations mockup below 570px: less bunched – smaller type and toggle */
@media (max-width: 569px) {
  #integrations .feature-section-image {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #integrations .mockup-int-wrap {
    padding: 18px 20px;
  }
  #integrations .mockup-int-title {
    font-size: 16px;
    margin-bottom: 12px;
  }
  #integrations .mockup-int-grid {
    gap: 8px;
  }
  #integrations .mockup-int-tile {
    padding: 10px 12px;
    gap: 8px;
  }
  #integrations .mockup-int-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }
  #integrations .mockup-int-name {
    font-size: 11px;
  }
  #integrations .mockup-int-status {
    font-size: 10px;
    margin-top: 1px;
  }
  #integrations .mockup-int-toggle {
    width: 34px;
    height: 18px;
    border-radius: 9px;
  }
  #integrations .mockup-int-toggle::after {
    width: 14px;
    height: 14px;
    top: 2px;
    left: 2px;
  }
  #integrations .mockup-int-toggle.on::after {
    transform: translateX(16px);
  }
}