/* ============================================================
   Ln2CRM · DARK  crm.html (crm2crm, the free agentic CRM)

   The page ships its light design in an inline <style>. Here the app
   mockups render in crm2crm's own dark mode (the product has one), the
   bright violet banner becomes the deep indigo used for featured blocks,
   and every content card takes the violet edge.
   ============================================================ */

.crm-eyebrow{ color: var(--p-violet-ink) !important; font-family: var(--p-mono) !important; }

/* ---- Hero mockup: crm2crm in dark mode ---- */
.crm-hero-mock{
  background: var(--p-surf) !important;
  border: 1px solid var(--p-edge) !important;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 30px 80px -40px var(--p-violet-glow) !important;
  color: var(--p-ivory);
}
.crm-mock-bar{ border-bottom-color: var(--p-line) !important; }
.crm-mock-url{ background: var(--p-ink-2) !important; color: var(--p-mid) !important; }
.crm-col{ background: var(--p-ink-2) !important; }
.crm-deal{ background: var(--p-surf-2) !important; box-shadow: none !important; color: var(--p-ivory); }
.crm-deal .v, .crm-deal-tabs span.active{ color: var(--p-violet-ink) !important; }
.crm-deal-tabs{ border-bottom-color: var(--p-line-2) !important; }
.crm-deal-tabs span.active{ border-bottom-color: var(--p-violet) !important; }
.crm-tr{ border-bottom-color: var(--p-line) !important; color: var(--p-ivory-2); }
.crm-tr.crm-th{ border-bottom-color: var(--p-line-2) !important; }
.crm-tr b{ color: var(--p-ivory) !important; }
.crm-tl-row{ background: var(--p-surf-2) !important; color: var(--p-ivory); }
.crm-act-row, .crm-set-row{ background: var(--p-surf-2) !important; border-color: var(--p-line) !important; color: var(--p-ivory); }
.crm-col h6, .crm-col .crm-col-h, .crm-deal small, .crm-tr.crm-th, .crm-tr i, .crm-deal-tabs,
.crm-tl-row small, .crm-act-time, .crm-act-row small, .crm-set-meta{ color: var(--p-mid) !important; }
.crm-set-tag{ background: var(--p-violet-soft) !important; color: var(--p-violet-ink) !important; }
.crm-mock-dots span{ background: rgba(244,241,234,.18) !important; }
.crm-mock-dots span.is-active{ background: var(--p-violet) !important; }

/* ---- "Classic UI" banner: deep indigo instead of a bright violet slab ---- */
.crm-banner{
  background: linear-gradient(135deg, #1b1745, #17143a 60%, #131129) !important;
  border: 1px solid var(--p-edge-2) !important;
  box-shadow: 0 30px 70px -40px var(--p-violet-glow) !important;
}
.crm-banner h2{ color: var(--p-ivory) !important; }
.crm-banner p{ color: var(--p-ivory-2) !important; }

/* ---- Feature, analytics, integration and step cards ---- */
.crm-feat, .crm-int, .crm-step{
  background: var(--p-surf) !important;
  border: 1px solid var(--p-edge) !important;
  box-shadow: inset 0 1px 0 rgba(244,241,234,.04) !important;
}
.crm-feat h3, .crm-int b, .crm-step h4{ color: var(--p-ivory) !important; }
.crm-feat p, .crm-step p{ color: var(--p-ivory-2) !important; }
.crm-int small{ color: var(--p-mid) !important; }
.crm-int:hover{
  border-color: var(--p-edge-2) !important;
  box-shadow: 0 18px 40px -18px var(--p-violet-glow) !important;
}
.crm-int .ico{ background: var(--p-violet-soft) !important; border-color: var(--p-edge) !important; }
.crm-int.is-featured{
  background: linear-gradient(180deg, #17143a 0%, var(--p-surf) 70%) !important;
  border-color: var(--p-edge-2) !important;
}
.crm-int .tag{ background: var(--p-violet-soft) !important; color: var(--p-violet-ink) !important; }

/* ---- Comparison table ---- */
.crm-compare th{ background: var(--p-surf-2) !important; color: var(--p-ivory) !important; }
.crm-compare th, .crm-compare td{ border-bottom-color: var(--p-line-2) !important; }
.crm-compare td.y{ color: var(--p-green) !important; }
.crm-compare td.n{ color: #ff6b6b !important; }