/* ============================================================
   Ln2CRM · DARK  per-CRM landing pages (crm/<crm>/chrome-extension/)

   The four landings (Pipedrive, Zoho, HubSpot, Salesforce) share one
   inline <style> built around .sfx-* classes. Their product mockups are
   already dark; the rest of the light page (kicker, tables, step cards,
   plan cards, FAQ) moves onto the dark tokens, and each content block
   takes the violet edge.
   ============================================================ */

.sfx-kicker{
  background: var(--p-violet-soft) !important;
  border: 1px solid var(--p-edge-2) !important;
  color: var(--p-violet-ink) !important;
  font-family: var(--p-mono) !important;
  letter-spacing: .12em !important;
}
.sfx-h1, .sfx-h2, .sfx-split__text h2, .sfx-step h3, .sfx-flow b, .sfx-plan .pl-price,
.sfx-faq summary, .ft-item b, .sfx-final h2{ color: var(--p-ivory) !important; }
.sfx-h1{ font-weight: 600 !important; letter-spacing: -.035em !important; }
.sfx-h2, .sfx-split__text h2{ font-weight: 600 !important; letter-spacing: -.028em !important; }
.sfx-sub, .sfx-lead, .sfx-split__lead, .sfx-step p, .sfx-flow span, .sfx-plan p,
.sfx-faq .ans, .ft-item p{ color: var(--p-ivory-2) !important; }
.sfx-micro, .sfx-plan .pl-price small{ color: var(--p-mid) !important; }
.sfx-micro .dot{ background: var(--p-green) !important; }
.sfx-secondary{ color: var(--p-violet-ink) !important; }

/* Install CTA: the page's one primary action, so it takes the site's primary violet */
.sfx-install{
  background: var(--p-violet) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 32px -10px var(--p-violet-glow) !important;
}
.sfx-install:hover{ background: #7563ff !important; }
.sfx-install:focus-visible{ outline-color: var(--p-violet-ink) !important; }
/* the mock's own "Save" button is an action inside the product: green, as on the home page */
.sfx-mock-cta, .sfx-create-cta{ background: var(--p-green) !important; color: #06210f !important; }

/* Mockups: already dark, aligned to the surface tokens and given the edge */
.sfx-mock, .sfx-mng{
  background: linear-gradient(160deg, var(--p-surf-2), 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;
}
.sfx-visual::before{ display: none; }
.sfx-mng-sec{ border-color: var(--p-edge-2) !important; }

/* Alternate band */
.sfx-section-alt{ background: var(--p-ink-2) !important; }

/* Tables */
.sfx-table-wrap{ background: var(--p-surf) !important; border-color: var(--p-edge) !important; }
.sfx-table th, .sfx-table td{ border-bottom-color: var(--p-line-2) !important; color: var(--p-ivory-3); }
.sfx-table thead th{ background: var(--p-surf-2) !important; color: var(--p-violet-ink) !important; font-family: var(--p-mono); letter-spacing: .1em !important; }
.sfx-table td:first-child{ color: var(--p-ivory); font-weight: 600; }
.sfx-table code{ background: var(--p-violet-soft) !important; color: var(--p-violet-ink) !important; }

/* Cards: steps, flows, plans, FAQ */
.sfx-step, .sfx-flow, .sfx-plan, .sfx-faq details{
  background: var(--p-surf) !important;
  border-color: var(--p-edge) !important;
  box-shadow: inset 0 1px 0 rgba(244,241,234,.04);
}
.sfx-step-num{ background: var(--p-violet) !important; }
.sfx-plan .pl-name{ color: var(--p-violet-ink) !important; font-family: var(--p-mono); letter-spacing: .12em !important; }
.sfx-plan.sfx-plan-hi{
  background: linear-gradient(180deg, #17143a, var(--p-surf)) !important;
  border-color: var(--p-edge-2) !important;
  box-shadow: 0 30px 70px -40px var(--p-violet-glow) !important;
}
.sfx-faq details:hover, .sfx-faq details[open]{ border-color: var(--p-edge-2) !important; }

/* Feature list with icon chips */
.ft-item{ border-top-color: var(--p-line-2) !important; }
.ft-ico{ background: var(--p-violet-soft) !important; color: var(--p-violet-ink) !important; border: 1px solid var(--p-edge); }
.ft-ico.ok{ background: var(--p-green-soft) !important; color: var(--p-green) !important; border-color: rgba(62,207,109,.3); }
.ft-ico.no{ background: rgba(255,107,107,.12) !important; color: #ff6b6b !important; border-color: rgba(255,107,107,.3); }

/* Real product screenshot */
.sfx-shot{ border-color: var(--p-edge) !important; box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), 0 30px 80px -50px var(--p-violet-glow) !important; }

/* Closing band: deep indigo instead of the bright violet end of the live gradient */
.sfx-final{
  background: linear-gradient(135deg, #1b1745, #17143a 60%, #131129) !important;
  border: 1px solid var(--p-edge-2);
  box-shadow: 0 30px 70px -40px var(--p-violet-glow);
}
.sfx-final p{ color: var(--p-ivory-2) !important; }