/* ═══════════════════════════════════════════════════════════════════════
   MasGen FolksCRM — Documentation Site · CRM Enhancement Layer
   Loads AFTER style.css + site.css. Adds CRM-specific, richer components:
   module color-grid, sales funnel, lifecycle ribbon, persona cards,
   animated metric band, comparison cards, FAQ accordion, deep callouts.
   MasGen Innovations · June 2026
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --crm-violet:  #7c3aed;
  --crm-indigo:  #4f46e5;
  --crm-cyan:    #06b6d4;
  --crm-rose:    #f43f5e;
  --crm-amber:   #f59e0b;
  --crm-emerald: #059669;
  --crm-sky:     #0ea5e9;
}

/* ── Richer hero glow (CRM identity over the inherited hero) ─────────────── */
.hero.crm-hero {
  background:
    radial-gradient(circle at 18% 18%, rgba(124,58,237,0.50), transparent 46%),
    radial-gradient(circle at 82% 28%, rgba(6,182,212,0.40), transparent 45%),
    radial-gradient(circle at 70% 85%, rgba(244,63,94,0.30), transparent 45%),
    linear-gradient(135deg,#0a0a23 0%,#181842 45%,#2e1065 100%);
}
.hero.crm-hero h1 .accent {
  background:linear-gradient(135deg,#a78bfa,#22d3ee);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero .hero-stat .num {
  background:linear-gradient(135deg,#a78bfa,#22d3ee);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* gradient nav brand logo → CRM violet→cyan */
.crm-brand-logo { background:linear-gradient(135deg,#7c3aed,#06b6d4) !important; }

/* ── ANIMATED METRIC BAND ───────────────────────────────────────────────── */
.metric-band {
  background:linear-gradient(135deg,#0a0a23,#2e1065);
  color:#fff;
  padding:46px 28px;
}
.metric-band-inner {
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px;
}
.metric-cell { text-align:center; padding:8px 4px; }
.metric-cell .m-num {
  font-size:40px; font-weight:800; letter-spacing:-1px; line-height:1;
  background:linear-gradient(135deg,#a78bfa,#22d3ee);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.metric-cell .m-lbl {
  font-size:12px; color:rgba(255,255,255,0.62);
  text-transform:uppercase; letter-spacing:1px; font-weight:600; margin-top:8px;
}
@media (max-width:880px){ .metric-band-inner { grid-template-columns:repeat(2,1fr); gap:24px; } }

/* ── MODULE COLOR-GRID (landing + manual overview) ──────────────────────── */
.module-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px; margin:28px 0;
}
.module-tile {
  position:relative; overflow:hidden;
  background:#fff; border:1px solid #e2e8f0; border-radius:16px;
  padding:24px 22px 22px; text-decoration:none; color:inherit;
  transition:transform .18s, box-shadow .18s, border-color .18s;
  display:flex; flex-direction:column;
}
.module-tile::before {
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--mod, #4f46e5);
}
.module-tile:hover { transform:translateY(-5px); box-shadow:0 24px 48px rgba(15,23,42,.14); border-color:var(--mod,#4f46e5); }
.module-tile .mt-ico {
  width:50px; height:50px; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:21px; margin-bottom:14px;
  background:var(--mod,#4f46e5);
  box-shadow:0 8px 20px color-mix(in srgb, var(--mod,#4f46e5) 38%, transparent);
}
.module-tile .mt-num {
  position:absolute; top:18px; right:20px;
  font-size:13px; font-weight:800; color:#cbd5e1;
}
.module-tile h4 { font-size:16px; font-weight:800; color:#0f172a; margin-bottom:6px; letter-spacing:-.3px; }
.module-tile p { font-size:12.5px; color:#64748b; line-height:1.55; margin:0 0 12px; flex:1; }
.module-tile .mt-meta {
  display:flex; gap:10px; flex-wrap:wrap; font-size:10.5px; font-weight:700;
  color:#475569; text-transform:uppercase; letter-spacing:.4px;
}
.module-tile .mt-meta span {
  background:#f1f5f9; border:1px solid #e2e8f0; border-radius:20px; padding:3px 9px;
}

/* ── SALES FUNNEL (vertical, tapered) ───────────────────────────────────── */
.funnel {
  max-width:560px; margin:22px auto; display:flex; flex-direction:column; align-items:center; gap:7px;
}
.funnel-stage {
  color:#fff; border-radius:10px; padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-weight:700; box-shadow:0 8px 22px rgba(15,23,42,.12);
}
.funnel-stage .fs-left { display:flex; align-items:center; gap:11px; }
.funnel-stage .fs-left i { font-size:16px; opacity:.92; }
.funnel-stage .fs-name { font-size:14px; }
.funnel-stage .fs-name small { display:block; font-size:10.5px; font-weight:600; opacity:.78; letter-spacing:.3px; }
.funnel-stage .fs-metric { font-size:13px; font-weight:800; background:rgba(255,255,255,.18); padding:4px 11px; border-radius:20px; white-space:nowrap; }
.funnel-stage.s1 { width:100%;  background:linear-gradient(135deg,#7c3aed,#6d28d9); }
.funnel-stage.s2 { width:88%;   background:linear-gradient(135deg,#4f46e5,#4338ca); }
.funnel-stage.s3 { width:76%;   background:linear-gradient(135deg,#0ea5e9,#0284c7); }
.funnel-stage.s4 { width:64%;   background:linear-gradient(135deg,#06b6d4,#0891b2); }
.funnel-stage.s5 { width:52%;   background:linear-gradient(135deg,#059669,#047857); }
.funnel-stage.s6 { width:42%;   background:linear-gradient(135deg,#16a34a,#15803d); }

/* ── LIFECYCLE RIBBON (horizontal flow with arrows) ─────────────────────── */
.lifecycle {
  display:flex; flex-wrap:wrap; align-items:stretch; gap:0; margin:20px 0;
  border-radius:12px; overflow:hidden; border:1px solid #e2e8f0;
}
.life-step {
  flex:1; min-width:120px; position:relative;
  background:#fff; padding:16px 18px 16px 26px;
  border-right:1px solid #eef2f7;
}
.life-step:last-child { border-right:none; }
.life-step .ls-ico { font-size:17px; color:var(--ls,#4f46e5); margin-bottom:6px; }
.life-step .ls-name { font-size:13px; font-weight:800; color:#0f172a; }
.life-step .ls-desc { font-size:11px; color:#64748b; line-height:1.45; margin-top:3px; }
.life-step::after {
  content:""; position:absolute; right:-9px; top:50%; transform:translateY(-50%) rotate(45deg);
  width:16px; height:16px; background:#fff; border-top:1px solid #eef2f7; border-right:1px solid #eef2f7; z-index:2;
}
.life-step:last-child::after { display:none; }

/* ── PERSONA CARDS ──────────────────────────────────────────────────────── */
.persona-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:20px 0; }
.persona-card {
  background:#fff; border:1.5px solid #e2e8f0; border-radius:14px; padding:20px;
  border-top:4px solid var(--pc,#4f46e5);
}
.persona-card .pc-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.persona-card .pc-avatar {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px;
  background:var(--pc,#4f46e5);
}
.persona-card .pc-name { font-size:14.5px; font-weight:800; color:#0f172a; }
.persona-card .pc-role { font-size:11px; color:#64748b; text-transform:uppercase; letter-spacing:.5px; font-weight:700; }
.persona-card ul { list-style:none; margin:0; padding:0; }
.persona-card ul li { font-size:12.5px; color:#475569; padding:5px 0 5px 20px; position:relative; line-height:1.5; }
.persona-card ul li::before { content:"\f061"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--pc,#4f46e5); position:absolute; left:0; font-size:10px; top:7px; }

/* ── COMPARISON / BEFORE-AFTER CARDS ────────────────────────────────────── */
.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0; }
.compare-card { border-radius:12px; padding:18px 20px; border:1.5px solid; }
.compare-card.before { background:#fef2f2; border-color:#fecaca; }
.compare-card.after  { background:#f0fdf4; border-color:#bbf7d0; }
.compare-card h4 { font-size:14px; font-weight:800; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.compare-card.before h4 { color:#b91c1c; }
.compare-card.after  h4 { color:#15803d; }
.compare-card ul { list-style:none; margin:0; padding:0; }
.compare-card li { font-size:12.5px; padding:5px 0 5px 22px; position:relative; line-height:1.5; }
.compare-card.before li { color:#7f1d1d; }
.compare-card.after  li { color:#14532d; }
.compare-card.before li::before { content:"\f00d"; color:#dc2626; }
.compare-card.after  li::before { content:"\f00c"; color:#16a34a; }
.compare-card li::before { font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; top:6px; font-size:11px; }
@media (max-width:720px){ .compare-grid { grid-template-columns:1fr; } }

/* ── FIELD REFERENCE (definition list look) ─────────────────────────────── */
.field-ref { margin:14px 0; border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; }
.field-ref .fr-row { display:grid; grid-template-columns:200px 1fr; gap:0; border-bottom:1px solid #eef2f7; }
.field-ref .fr-row:last-child { border-bottom:none; }
.field-ref .fr-row:nth-child(even) { background:#f8fafc; }
.field-ref .fr-key { padding:10px 16px; font-weight:700; color:#312e81; font-size:12.5px; background:#eef2ff; border-right:1px solid #e0e7ff; }
.field-ref .fr-val { padding:10px 16px; font-size:12.5px; color:#475569; }
.field-ref .fr-val .req { color:#dc2626; font-weight:800; }
@media (max-width:560px){ .field-ref .fr-row { grid-template-columns:1fr; } .field-ref .fr-key { border-right:none; } }

/* ── ENDPOINT / API chips ───────────────────────────────────────────────── */
.endpoint {
  display:flex; align-items:center; gap:10px; margin:8px 0;
  background:#0f172a; border-radius:8px; padding:9px 14px; font-size:12px;
  font-family:'Cascadia Code', Consolas, monospace; color:#e2e8f0;
  overflow-x:auto;
}
.endpoint .verb { font-weight:800; padding:2px 9px; border-radius:5px; font-size:11px; flex-shrink:0; }
.endpoint .verb.get  { background:#0e7490; color:#cffafe; }
.endpoint .verb.post { background:#15803d; color:#dcfce7; }
.endpoint .verb.put  { background:#b45309; color:#fef3c7; }
.endpoint .verb.del  { background:#b91c1c; color:#fee2e2; }
.endpoint .path { color:#a5b4fc; white-space:nowrap; }

/* ── FAQ accordion ──────────────────────────────────────────────────────── */
details.faq {
  background:#fff; border:1px solid #e2e8f0; border-radius:10px;
  padding:0; margin:9px 0; overflow:hidden;
}
details.faq summary {
  cursor:pointer; list-style:none; padding:15px 18px; font-weight:700; color:#0f172a; font-size:14px;
  display:flex; align-items:center; gap:12px;
}
details.faq summary::-webkit-details-marker { display:none; }
details.faq summary::before {
  content:"\2b"; font-weight:800; color:#4f46e5; background:#eef2ff;
  width:24px; height:24px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0;
}
details.faq[open] summary::before { content:"\2212"; background:#4f46e5; color:#fff; }
details.faq[open] summary { border-bottom:1px solid #eef2f7; }
details.faq .faq-body { padding:14px 18px 16px 54px; font-size:13px; color:#475569; line-height:1.65; }
details.faq .faq-body code { font-size:12px; }

/* ── MODULE BANNER (CRM gradient variant for manual section dividers) ────── */
.module-banner.crm { background:linear-gradient(135deg,#2e1065,#4338ca); }
.module-banner.crm-cyan { background:linear-gradient(135deg,#0c4a6e,#0e7490); }
.module-banner.crm-rose { background:linear-gradient(135deg,#831843,#9d174d); }

/* ── PILL row (chapter sub-tags) ────────────────────────────────────────── */
.pill-row { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px; }
.pill-row .tag {
  font-size:11px; font-weight:700; color:#3730a3; background:#eef2ff;
  border:1px solid #e0e7ff; border-radius:20px; padding:4px 12px;
  display:inline-flex; align-items:center; gap:6px;
}
.pill-row .tag i { font-size:10px; color:#6366f1; }
.pill-row .tag.green { color:#065f46; background:#d1fae5; border-color:#bbf7d0; }
.pill-row .tag.green i { color:#059669; }
.pill-row .tag.rose { color:#9f1239; background:#ffe4e6; border-color:#fecdd3; }
.pill-row .tag.rose i { color:#f43f5e; }
.pill-row .tag.amber { color:#854d0e; background:#fef3c7; border-color:#fde68a; }
.pill-row .tag.amber i { color:#d97706; }

/* ── KPI row CRM accents (extend style.css .kpi-tile) ───────────────────── */
.kpi-tile.violet .kpi-value { color:#a78bfa; }
.kpi-tile.cyan   .kpi-value { color:#22d3ee; }
.kpi-tile.rose   .kpi-value { color:#fb7185; }

/* ── "What's new" band (landing) accent ─────────────────────────────────── */
.crm-cta-band {
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
  border-radius:20px; color:#fff; padding:44px 40px; text-align:center;
  max-width:1180px; margin:0 auto; box-shadow:0 30px 70px rgba(79,70,229,.3);
}
.crm-cta-band h2 { color:#fff; font-size:28px; font-weight:800; margin-bottom:10px; letter-spacing:-.5px; }
.crm-cta-band p { color:rgba(255,255,255,.85); font-size:15px; max-width:620px; margin:0 auto 24px; }
.crm-cta-band .btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.crm-cta-band .btns a {
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:700; font-size:14px;
  padding:13px 24px; border-radius:11px; transition:transform .15s;
}
.crm-cta-band .btns a.solid { background:#fff; color:#4338ca; }
.crm-cta-band .btns a.ghost { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3); }
.crm-cta-band .btns a:hover { transform:translateY(-2px); }

/* ── data-table tweak: zebra + first-col emphasis used in CRM manual ─────── */
.data-table.tight tbody td { padding:8px 12px; font-size:12px; }
.data-table .ok  { color:#16a34a; font-weight:700; }
.data-table .no  { color:#dc2626; font-weight:700; }

/* ── responsive metric/module ───────────────────────────────────────────── */
@media (max-width:1080px){ .module-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } }
@media print {
  .metric-band, .crm-cta-band { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}