/* =============================================================
   BizlumoAI — landing.css
   Shared by the problem-focused landing pages
   (/employee-attendance-software, /face-recognition-attendance-system,
   /payroll-software-india). Loaded after site.css; everything here is
   lp- prefixed except the WhatsApp float, which mirrors the block the
   other public pages carry inline.
   ============================================================= */

/* ── READABILITY ─────────────────────────────────── */
/* site.css sets card copy at 14px in --text-3, which is fine for the
   homepage's short blurbs but too dim and small for pages people are
   meant to read top to bottom. Everything under body.lp gets large,
   bright, plain type: no italic serif accents, no tiny mono labels,
   no all-caps. The homepage is untouched. */
.lp { --lp-body: #dfe2ee; }
.lp section { padding-top: 72px; padding-bottom: 72px; }

/* Section heading: title, then one plain sentence under it. */
.lp-head { max-width: 760px; margin-bottom: 36px; }
.lp-head h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; letter-spacing: -0.02em; }
.lp-head p { font-size: 19px; line-height: 1.6; color: var(--lp-body); margin-top: 12px; }

.lp .page-head .eyebrow { font-size: 13px; letter-spacing: 0.12em; }
.lp .page-head h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.12; }
.lp .page-head .lede { font-size: 20px; line-height: 1.6; color: var(--lp-body); max-width: 600px; }
.lp .hero-note { font-size: 15px; color: var(--lp-body); }
.lp .btn-lg { font-size: 17px; padding: 16px 28px; }

.lp .problems-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .lp .problems-grid { grid-template-columns: 1fr; } }
.lp .problem-card { padding: 32px; gap: 10px; }
.lp .problem-title,
.lp .feat-title,
.lp .howit-title,
.lp .pillar-title,
.lp .lp-step-title { font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; }
.lp .problem-body,
.lp .feat-body,
.lp .howit-body,
.lp .pillar-body,
.lp .lp-step-body { font-size: 17px; line-height: 1.65; color: var(--lp-body); }
.lp .feat-body a,
.lp .howit-body a { display: inline-block; margin-top: 8px; color: var(--cyan); font-weight: 500; }

/* Plain "1", "2", "3" badges instead of small mono "/01" labels. */
.lp-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 17px; font-weight: 700;
  margin-bottom: 6px;
}

.lp .compare-table { font-size: 17px; }
.lp .compare-table thead th { font-size: 15px; text-transform: none; letter-spacing: 0; }
.lp .compare-table th, .lp .compare-table td { padding: 18px 20px; }
.lp .compare-table td { color: var(--lp-body); line-height: 1.55; }
.lp .compare-table tbody td:first-child { color: var(--text); font-weight: 600; }
.lp .compare-table td.us { color: #fff; font-weight: 600; }
.lp .compare-note { font-size: 16px; line-height: 1.6; color: var(--lp-body); font-family: var(--body); letter-spacing: 0; }
.lp .compare-note a { color: var(--cyan); }

.lp .faq-q { font-size: 20px; }
.lp .faq-a { font-size: 17px; line-height: 1.65; color: var(--lp-body); }
.lp .faq-a a { color: var(--cyan); }

.lp .cta-final h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.15; }

/* ── HERO ────────────────────────────────────────── */
.lp-hero { padding-bottom: 72px; }
.lp-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 980px) { .lp-hero-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ── HERO VISUAL — illustrative product panel ────── */
.lp-visual {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), 0 0 60px -20px rgba(0, 217, 255, 0.25);
}
.lp-visual-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.lp-visual-title { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--text); }
.lp-visual-sub { font-size: 14px; color: var(--text-2); }

.lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 480px) { .lp-stats { grid-template-columns: repeat(2, 1fr); } }
.lp-stat { background: var(--ink-3); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.lp-stat-label { font-size: 13px; color: var(--text-2); }
.lp-stat-value { font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1.2; margin-top: 4px; }

.lp-rows { display: flex; flex-direction: column; }
.lp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.lp-row-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0, 217, 255, 0.1);
  color: var(--cyan);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 13px; font-weight: 600;
}
.lp-row-main { flex: 1; min-width: 0; }
.lp-row-name { font-size: 16px; font-weight: 600; color: var(--text); }
.lp-row-meta { font-size: 14px; color: #dfe2ee; }
.lp-row-end { font-size: 14px; font-weight: 600; color: var(--green); white-space: nowrap; }

.lp-cam {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 40%, #1f2a4a 0%, var(--ink) 75%);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--cyan);
  overflow: hidden;
  margin-bottom: 16px;
}
.lp-cam::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%; top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation: lp-scan 2.6s ease-in-out infinite;
}
@keyframes lp-scan {
  0%, 100% { transform: translateY(-60px); opacity: 0.2; }
  50%      { transform: translateY(60px);  opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) { .lp-cam::after { animation: none; } }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lp-chip {
  font-size: 14px;
  font-weight: 500;
  color: var(--green);
  background: rgba(20, 209, 138, 0.1);
  border-radius: 999px;
  padding: 6px 14px;
}

.lp-hero h1 { max-width: 900px; }
.lp-hero h1 em {
  font-style: italic;
  font-family: 'Georgia', serif;
  font-weight: 400;
  color: var(--cream);
}
.lp-hero .hero-cta { margin: 32px 0 0; }
.lp-hero .hero-note { margin-top: 16px; }

/* ── "WHICH ONE FITS" TABLE ──────────────────────── */
.lp-fit-table { min-width: 640px; }
.lp-fit-table td { vertical-align: top; line-height: 1.55; color: var(--text-2); }

/* ── NUMBERED STEPS ──────────────────────────────── */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  counter-reset: lp-step;
}
@media (max-width: 900px) { .lp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .lp-steps { grid-template-columns: 1fr; } }
.lp-step {
  counter-increment: lp-step;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.lp-step::before {
  content: counter(lp-step);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 17px; font-weight: 700;
  margin-bottom: 16px;
}
.lp-step-title {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.lp-step-body { font-size: 14px; color: var(--text-3); line-height: 1.6; }

/* ── PRICING STRIP ───────────────────────────────── */
.lp-price-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  background: var(--ink-2);
  border: 1px solid var(--cyan);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.lp-price-strip h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; margin-bottom: 10px; }
.lp-price-strip p { font-size: 18px; color: #dfe2ee; line-height: 1.6; max-width: 640px; }
.lp-price-strip a:not(.btn) { color: var(--cyan); }

/* ── RELATED PAGES ───────────────────────────────── */
.lp-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .lp-related { grid-template-columns: 1fr; } }
a.lp-related-card { text-decoration: none; }
.lp-related-card .feat-body { margin-bottom: 0; }
.lp-related-more {
  font-size: 16px;
  font-weight: 500;
  color: var(--cyan);
  margin-top: auto;
  padding-top: 12px;
}

/* ── FLOATING WHATSAPP ICON — Help & support ─────── */
.wa-float-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.45);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-float-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 26px -4px rgba(0, 0, 0, 0.55);
}
.wa-float-btn[hidden] { display: none; }
@media (max-width: 768px) {
  .wa-float-btn { right: 14px; bottom: 14px; width: 50px; height: 50px; }
  .wa-float-btn svg { width: 26px; height: 26px; }
}

/* ── COMPARE TABLE CELLS ─────────────────────────── */
/* site.css draws "no" and "partial" answers small and dim, which makes
   the other tools' columns hard to read. Same size for every answer. */
.lp .compare-yes,
.lp .compare-no,
.lp .compare-partial { font-size: 16px; font-weight: 500; }
.lp .compare-no { color: var(--text-2); }