/* ══════════════════════════════════════════════════════
   VISUALAURA — Landing Pages
   Conversion-focused "growth studio" layer over the Website
   Design system (reuses device hero, stats, showcase, transform,
   timeline, pricing). Burgundy theme via branding.css.
   ══════════════════════════════════════════════════════ */

/* Floating metric chips over the hero device family */
.lp-float {
  position: absolute; z-index: 6; display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.9); border-radius: 16px; padding: 13px 17px;
  box-shadow: var(--shadow-lg);
}
.lp-float .big { font-family: var(--font-head); font-size: 1.5rem; font-weight: 500; color: var(--primary); line-height: 1; }
.lp-float .lbl { font-family: var(--font-body); font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-l); margin-top: 3px; }
.lp-float .spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.lp-float .spark span { width: 5px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--primary)); }
.lp-f1 { top: 4%; left: -6px; animation: brFloatB 6s ease-in-out infinite; }
.lp-f2 { bottom: 12%; right: -6px; animation: brFloatC 6.6s ease-in-out infinite .4s; }
.lp-dot { width: 9px; height: 9px; border-radius: 50%; background: #3f9d6b; box-shadow: 0 0 0 4px rgba(63,157,107,.18); flex-shrink: 0; }

@media (max-width: 860px) { .lp-float { display: none; } }

/* Numbered landing-page-type cards (reuse .wd-types-grid / .wd-type) */
.wd-type .lp-num { display: block; font-family: var(--font-head); font-size: 1.05rem; font-weight: 500; color: var(--accent); letter-spacing: .08em; margin-bottom: 14px; }

/* Result chip on testimonial cards */
.lp-result {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: var(--font-body); font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  color: var(--primary); background: rgba(110,20,35,.07); border: 1px solid rgba(110,20,35,.18);
  padding: 7px 14px; border-radius: 50px; margin-bottom: 18px;
}
.lp-result svg { width: 14px; height: 14px; }

/* "What's Included" — let the dark feature grid breathe at 9 items */
.lp-included .wd-feat { padding: 30px 28px; }
.lp-included .wd-feat h3 { font-size: 1.2rem; }