/* ════════════════════════════════════════════════════════════════════════════
   FIX_CRM_PROSPECTS_S1_2026_06_23 — CRM Prospects (the relationship lens on
   lifecycle=prospect member records) styles, scoped under #page-crm. Built TO
   design_samples/specialists/crm/crm_prospects.html section-by-section. The
   sample's generic .kpi/.stage/.panel/.ptable/.shape/.lower classes are
   re-namespaced with a crpr- prefix (distinct from the Sales prx- set and the CRM
   fm- / cd- sets) so they cannot collide app-wide. Sample :root token VALUES inlined
   as literal hex (mirror of the #page-sales .prx-* / .sa-* precedent — the platform
   :root names differ from the sample's). FULL-WIDTH: no narrow max-width cap on the
   surface or its cards — they fill the #crm-content host like Find Member / Reports
   (the host's own gutter supplies the side padding). ASCII-only comments (a non-ASCII
   char silently drops the CSSOM rule — the L18.8 lesson). ════════════════════════ */

/* header actions (sample L327-330) */
#page-crm .crpr-actions { margin-left: auto; display: flex; gap: 9px; }
#page-crm .crpr-btn-prim { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat'; font-size: 12px; font-weight: 700; color: #16140F; background: linear-gradient(180deg, #C9A84C, #9c7f33); border: none; border-radius: 9px; padding: 9px 15px; cursor: pointer; box-shadow: 0 8px 22px -8px rgba(201,168,76,0.55), inset 0 1px 0 rgba(255,255,255,0.3); transition: transform .16s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; }
#page-crm .crpr-btn-ghost { display: inline-flex; align-items: center; gap: 7px; font-family: 'Montserrat'; font-size: 12px; font-weight: 600; color: #C4BFB6; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.13); border-radius: 9px; padding: 9px 14px; cursor: pointer; transition: .16s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; }
#page-crm .crpr-coming-pill { font-family: 'Montserrat'; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A857D; border: 1px solid rgba(255,255,255,0.07); border-radius: 999px; padding: 2px 7px; margin-left: 4px; }

/* header row + status line (sample L325-335) */
#page-crm .crpr-head-row { display: flex; align-items: flex-end; gap: 16px; }
#page-crm .crpr-when { font-size: 11.5px; color: #8A857D; padding-bottom: 2px; }
#page-crm .crpr-statusline { display: flex; align-items: center; gap: 10px; margin: 10px 0 18px; font-size: 13.5px; color: #C4BFB6; }
#page-crm .crpr-statusline .crpr-dot { width: 10px; height: 10px; border-radius: 50%; background: #C9A84C; box-shadow: 0 0 11px #C9A84C; position: relative; flex: none; }
#page-crm .crpr-statusline .crpr-fix { color: #E8943A; font-weight: 600; }

/* industry-shape banner (sample L337-342) */
#page-crm .crpr-shape { display: flex; align-items: center; gap: 11px; background: linear-gradient(120deg, rgba(91,155,213,0.08), rgba(255,255,255,0.015)); border: 1px solid rgba(91,155,213,0.22); border-radius: 13px; padding: 13px 16px; margin-bottom: 18px; }
#page-crm .crpr-shape .crpr-si { width: 30px; height: 30px; border-radius: 9px; background: rgba(91,155,213,0.14); display: grid; place-items: center; flex: none; }
#page-crm .crpr-shape .crpr-stext { font-size: 11.5px; color: #C4BFB6; line-height: 1.45; }
#page-crm .crpr-shape .crpr-sbadge { margin-left: auto; font-family: 'Montserrat'; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5B9BD5; border: 1px solid rgba(91,155,213,0.4); border-radius: 999px; padding: 3px 10px; white-space: nowrap; flex: none; }

/* KPI band, 4 tiles (sample L344-350) */
#page-crm .crpr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 18px; }
#page-crm .crpr-kpi { position: relative; overflow: hidden; background: linear-gradient(165deg, #262320, #1f1c19); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 15px 16px 14px; box-shadow: 0 16px 34px -28px #000, inset 0 1px 0 rgba(255,255,255,0.05); transition: transform .2s cubic-bezier(0.4,0,0.2,1), box-shadow .2s cubic-bezier(0.4,0,0.2,1), border-color .2s cubic-bezier(0.4,0,0.2,1); }
#page-crm .crpr-kpi .crpr-lbl { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #8A857D; font-weight: 700; margin-bottom: 7px; }
#page-crm .crpr-kpi .crpr-val { font-size: 23px; font-weight: 800; color: #F0EBE2; line-height: 1; font-family: 'Montserrat'; font-variant-numeric: tabular-nums; }
#page-crm .crpr-kpi .crpr-sub { font-size: 11.5px; margin-top: 7px; color: #8A857D; }
#page-crm .crpr-kpi .crpr-sub .crpr-delta { font-weight: 700; }
#page-crm .crpr-pos { color: #4CAF7D; } #page-crm .crpr-warn { color: #E8943A; }

/* lead-stage progress strip, 4 stages (sample L352-358) */
#page-crm .crpr-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 18px; }
#page-crm .crpr-stage { position: relative; background: linear-gradient(170deg, #211e1c, #1b1816); border: 1px solid rgba(255,255,255,0.07); border-radius: 13px; padding: 13px 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
#page-crm .crpr-stage.crpr-s-new { --crpr-lvl: #5B9BD5; }
#page-crm .crpr-stage.crpr-s-contacted { --crpr-lvl: #C9A84C; }
#page-crm .crpr-stage.crpr-s-trial { --crpr-lvl: #4CAF7D; }
#page-crm .crpr-stage.crpr-s-decision { --crpr-lvl: #E8943A; }
#page-crm .crpr-stage .crpr-sg-h { display: flex; align-items: center; justify-content: space-between; }
#page-crm .crpr-stage .crpr-sg-name { font-family: 'Montserrat'; font-weight: 700; font-size: 11.5px; color: #F0EBE2; display: flex; align-items: center; gap: 7px; }
#page-crm .crpr-stage .crpr-sg-count { font-family: 'Montserrat'; font-weight: 800; font-size: 18px; color: #F0EBE2; line-height: 1; }
#page-crm .crpr-stage .crpr-sg-sub { font-size: 10.5px; color: #8A857D; margin-top: 5px; }

/* filter / search bar (sample L360-378) */
#page-crm .crpr-filtbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
#page-crm .crpr-search { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 7px 12px; min-width: 220px; flex: 1; max-width: 340px; }
#page-crm .crpr-search input { background: none; border: none; outline: none; color: #C4BFB6; font-family: 'Open Sans'; font-size: 12px; width: 100%; }
#page-crm .crpr-search input::placeholder { color: #8A857D; }
#page-crm .crpr-filt-group { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 5px 6px; }
#page-crm .crpr-filt-lbl { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #8A857D; font-weight: 700; padding: 0 6px; }
#page-crm .crpr-chip { font-family: 'Montserrat'; font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); color: #C4BFB6; cursor: pointer; transition: .16s cubic-bezier(0.4,0,0.2,1); }

/* prospect table panel (sample L380-444) — FULL-WIDTH, no max-width cap */
#page-crm .crpr-panel { background: linear-gradient(170deg, #252220, #1e1b19); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 6px 6px 8px; box-shadow: 0 22px 50px -36px #000, inset 0 1px 0 rgba(255,255,255,0.05); margin-bottom: 18px; }
#page-crm .crpr-table { width: 100%; border-collapse: collapse; }
#page-crm .crpr-table tbody tr { transition: background .15s cubic-bezier(0.4,0,0.2,1); cursor: pointer; }
#page-crm .crpr-table tbody tr:hover { background: rgba(255,255,255,0.03); }
#page-crm .crpr-table tbody tr:last-child td { border-bottom: none; }
#page-crm .crpr-name { display: flex; align-items: center; gap: 11px; }
#page-crm .crpr-ava { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(140deg, #2e2a24, #191713); color: #C9A84C; display: grid; place-items: center; font-family: 'Montserrat'; font-weight: 700; font-size: 11px; flex: none; border: 1px solid rgba(255,255,255,0.13); }
#page-crm .crpr-nm { font-family: 'Montserrat'; font-weight: 700; color: #F0EBE2; font-size: 12.5px; line-height: 1.2; }
#page-crm .crpr-rmeta { font-size: 10.5px; color: #8A857D; margin-top: 2px; }
#page-crm .crpr-stage-pill { font-family: 'Montserrat'; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
#page-crm .crpr-stage-pill.new { color: #5B9BD5; background: rgba(91,155,213,0.12); border: 1px solid rgba(91,155,213,0.3); }
#page-crm .crpr-stage-pill.contacted { color: #C9A84C; background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.3); }
#page-crm .crpr-stage-pill.trial { color: #4CAF7D; background: rgba(76,175,125,0.12); border: 1px solid rgba(76,175,125,0.3); }
#page-crm .crpr-stage-pill.decision { color: #E8943A; background: rgba(232,148,58,0.12); border: 1px solid rgba(232,148,58,0.3); }
/* FIX_CRM_MEMBER_REFERRAL_S1_2026_09_03_GATEFIX — the gate found .so-ded (the Offers/Sales
   reward-accent class, symbol anchor __offerMechanicDisplay / __referralRewardDisplay) has
   NO rule reachable inside #page-crm — its only two rules are #page-sales .so-oc-mech .so-ded
   and #page-sales .so-mod-mech .so-ded, both Sales-page-scoped. Reusing the class name across
   the CRM Referrals surface without a CRM-scoped rule left the reward text rendering with no
   accent colour at all. CRM-scoped equivalent, reusing the shared --gold token (matches the
   Sales rule's literal #C9A84C exactly) rather than a hand-typed hex a second time. */
#page-crm .so-ded { color: var(--gold); }
#page-crm .crpr-src { font-size: 11px; color: #C4BFB6; }
#page-crm .crpr-age { font-family: 'Montserrat'; font-weight: 700; color: #C4BFB6; font-size: 12px; text-align: right; }
#page-crm .crpr-next { font-size: 11px; color: #C4BFB6; display: flex; align-items: center; gap: 6px; }
#page-crm .crpr-act .crpr-mini { font-family: 'Montserrat'; font-size: 10.5px; font-weight: 600; padding: 6px 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.04); color: #C4BFB6; cursor: pointer; transition: .16s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; }

/* honest-empty state (sample L446-453) — structure preserved */
#page-crm .crpr-empty { text-align: center; padding: 38px 20px; color: #8A857D; }
#page-crm .crpr-empty-ic { width: 46px; height: 46px; border-radius: 13px; background: rgba(201,168,76,0.1); display: grid; place-items: center; margin: 0 auto 14px; }

/* lower row: source mix + this-week focus (sample L456-494) */
#page-crm .crpr-lower { display: grid; grid-template-columns: 1fr 1.3fr; gap: 18px; }
@media (max-width: 1080px) { #page-crm .crpr-lower { grid-template-columns: 1fr; } }
#page-crm .crpr-panel2 { background: linear-gradient(170deg, #252220, #1e1b19); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 18px 20px; box-shadow: 0 22px 50px -36px #000, inset 0 1px 0 rgba(255,255,255,0.05); }
#page-crm .crpr-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
#page-crm .crpr-panel-h .crpr-hint { font-size: 11px; color: #8A857D; }
#page-crm .crpr-panel-sub { font-size: 11.5px; color: #8A857D; margin: 2px 0 14px; }
#page-crm .crpr-sbar { display: flex; align-items: center; gap: 12px; font-size: 12px; margin-bottom: 11px; }
#page-crm .crpr-sbar .crpr-sb-l { width: 118px; color: #C4BFB6; flex: none; display: flex; align-items: center; gap: 7px; }
#page-crm .crpr-sbar .crpr-sb-track { flex: 1; height: 11px; border-radius: 6px; background: rgba(255,255,255,0.06); overflow: hidden; }
#page-crm .crpr-sbar .crpr-sb-v { width: 42px; text-align: right; font-family: 'Montserrat'; font-weight: 700; color: #F0EBE2; font-size: 12px; }
#page-crm .crpr-src-note { margin-top: 13px; font-size: 10.5px; color: #8A857D; display: flex; align-items: center; gap: 7px; line-height: 1.4; }
#page-crm .crpr-focus-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
#page-crm .crpr-focus-head h3 .crpr-glyph { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(150deg, rgba(201,168,76,0.24), rgba(232,148,58,0.12)); display: grid; place-items: center; }
#page-crm .crpr-focus-head .crpr-count { font-size: 10.5px; font-weight: 700; color: #F0EBE2; background: rgba(201,168,76,0.16); border: 1px solid rgba(201,168,76,0.36); border-radius: 999px; padding: 3px 11px; font-family: 'Montserrat'; }
#page-crm .crpr-focus { display: flex; flex-direction: column; gap: 9px; }
#page-crm .crpr-focus-empty { font-size: 11.5px; color: #8A857D; padding: 14px 12px; line-height: 1.5; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); border-radius: 11px; }
#page-crm .crpr-focus-item { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 11px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); position: relative; overflow: hidden; }
#page-crm .crpr-focus-item.warm { --crpr-lvl: #4CAF7D; }
#page-crm .crpr-focus-item.stale { --crpr-lvl: #E8943A; border-color: rgba(232,148,58,0.3); background: linear-gradient(108deg, rgba(232,148,58,0.08), rgba(255,255,255,0.02) 50%); }
#page-crm .crpr-focus-body { flex: 1; min-width: 0; }
#page-crm .crpr-focus-body .crpr-ft { font-family: 'Montserrat'; font-weight: 700; font-size: 12px; color: #F0EBE2; }
#page-crm .crpr-focus-body .crpr-fd { font-size: 11px; color: #8A857D; margin-top: 3px; line-height: 1.4; }
#page-crm .crpr-focus-act .crpr-fbtn { font-family: 'Montserrat'; font-size: 10.5px; font-weight: 600; padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.04); color: #C4BFB6; cursor: pointer; transition: .16s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; flex: none; }

/* footnote (sample L496) */
#page-crm .crpr-footnote { font-size: 10px; color: #8A857D; margin-top: 18px; text-align: center; opacity: .7; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════════════
   FIX_CRM_VISITORS_S1_2026_06_23 — CRM Visitors (the top-of-funnel RAW visitor
   stream: drop-ins / trials / guest check-ins) styles, scoped under #page-crm.
   Built TO design_samples/specialists/crm/crm_visitors.html section-by-section.
   The sample's generic .kpi / .vrow / .vs-bar / .mix / .seam / .src / .empty-state
   classes are re-namespaced with a crm-vis- prefix (distinct from the crpr- / fm- /
   cd- sets) so they cannot collide app-wide. Sample :root token VALUES inlined as
   literal hex (mirror of the crpr- precedent). FULL-WIDTH: no narrow max-width cap
   on the surface or its cards (the #crm-content host gutter supplies side padding).
   ASCII-only comments (a non-ASCII char silently drops the CSSOM rule, the L18.8
   lesson). Reuses st-overlay-title / fm-state verbatim for the loading/honest-load
   states (NOT re-authored). ════════════════════════════════════════════════════ */
#page-crm .crm-vis-head-row { display: flex; align-items: flex-end; gap: 16px; }
#page-crm .crm-vis-when { font-size: 11.5px; color: #8A857D; padding-bottom: 2px; }
#page-crm .crm-vis-statusline { display: flex; align-items: center; gap: 10px; margin: 10px 0 18px; font-size: 13.5px; color: #C4BFB6; }
#page-crm .crm-vis-statusline .crm-vis-dot { width: 10px; height: 10px; border-radius: 50%; background: #3FB6A8; box-shadow: 0 0 11px #3FB6A8; position: relative; flex: none; }
#page-crm .crm-vis-statusline .crm-vis-fix { color: #C9A84C; font-weight: 600; }

/* KPI band (4 metrics) */
#page-crm .crm-vis-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 18px; }
#page-crm .crm-vis-kpi { position: relative; overflow: hidden; background: linear-gradient(165deg, #262320, #1f1c19); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 15px 16px 14px; box-shadow: 0 16px 34px -28px #000, inset 0 1px 0 rgba(255,255,255,0.05); }
/* FIX_KPI_ACCENT_BASECLASS_2026_08_18 — the four accent rules ABOVE are structurally
   unreachable. They qualify a base class (symbol anchor: crm-vis-kpi) that has ZERO emission
   sites anywhere in this file, so no markup can ever match them; all four tiles therefore fell
   through to the ambient kit base rule for .kpi ::before, which paints the neutral var(--line2).
   renderCrmVisitors emits its tiles in the kit vocabulary (kpi plus k-week / k-trial / k-repeat /
   k-conv) inside a .vk host, so the rules below are the reachable form: an ID plus three classes
   outranks the ambient base, which carries no ID.
   THE VALUES BELOW ARE THE SAMPLE'S (design_samples/crm/visitors.html, its .kpi accent rules for
   the same four modifiers) and DELIBERATELY DIFFER from the legacy block above, whose teal and
   purple belong to an OLDER sample generation — re-pointing the legacy rule would have shipped
   the wrong spec. The legacy block is left in place; retiring it is out of scope for this build.
   Precedent, the identical remedy already shipped on the Marketing surface for the same
   situation (symbol anchors: page-marketing, k-leads, its kit-KPI accent block). */
#page-crm .vk .kpi.k-week::before   { background: var(--green); }
#page-crm .vk .kpi.k-trial::before  { background: var(--amber); }
#page-crm .vk .kpi.k-repeat::before { background: var(--blue); }
#page-crm .vk .kpi.k-conv::before   { background: var(--gold); }
#page-crm .crm-vis-kpi .crm-vis-lbl { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #8A857D; font-weight: 700; margin-bottom: 7px; }
#page-crm .crm-vis-kpi .crm-vis-val { font-size: 23px; font-weight: 800; color: #F0EBE2; line-height: 1; font-family: 'Montserrat'; font-variant-numeric: tabular-nums; }
#page-crm .crm-vis-kpi .crm-vis-ksub { font-size: 11.5px; margin-top: 7px; color: #8A857D; display: flex; align-items: center; gap: 5px; }
#page-crm .crm-vis-kpi .crm-vis-delta { font-weight: 700; }
#page-crm .crm-vis-kpi .crm-vis-delta.pos { color: #4CAF7D; }
#page-crm .crm-vis-kpi .crm-vis-delta.warn { color: #E8943A; }

/* layout: stream (hero) + side rail */
#page-crm .crm-vis-grid { display: grid; grid-template-columns: 1.62fr 1fr; gap: 18px; }
#page-crm .crm-vis-panel { background: linear-gradient(170deg, #252220, #1e1b19); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 18px 20px; box-shadow: 0 22px 50px -36px #000, inset 0 1px 0 rgba(255,255,255,0.05); }
#page-crm .crm-vis-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
#page-crm .crm-vis-panel-h .crm-vis-hint { font-size: 11px; color: #8A857D; }
#page-crm .crm-vis-panel-sub { font-size: 11.5px; color: #8A857D; margin: 2px 0 14px; }

/* visit-stream toolbar: search + type-filter tabs */
#page-crm .crm-vis-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
#page-crm .crm-vis-search { flex: 1; min-width: 180px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 9px; color: #C4BFB6; font-size: 12px; padding: 8px 12px; font-family: 'Open Sans'; }
#page-crm .crm-vis-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
#page-crm .crm-vis-tab { font-family: 'Montserrat'; font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 999px; padding: 6px 13px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); color: #8A857D; transition: .16s cubic-bezier(0.4,0,0.2,1); }

/* visit-stream rows */
#page-crm .crm-vis-list { display: flex; flex-direction: column; gap: 8px; }
#page-crm .crm-vis-row { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.07); transition: .18s cubic-bezier(0.4,0,0.2,1); cursor: pointer; position: relative; overflow: hidden; }
#page-crm .crm-vis-row.t-trial { --crm-vis-lvl: #E8943A; }
#page-crm .crm-vis-row.t-dropin { --crm-vis-lvl: #3FB6A8; }
#page-crm .crm-vis-row.t-guest { --crm-vis-lvl: #5B9BD5; }
#page-crm .crm-vis-row .crm-vis-ava { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; font-family: 'Montserrat'; font-weight: 800; font-size: 13px; color: #1a160c; background: linear-gradient(140deg, #C9A84C, #9c7f33); z-index: 1; }
#page-crm .crm-vis-row.t-trial .crm-vis-ava { background: linear-gradient(140deg, #E8943A, #c5781f); color: #fff; }
#page-crm .crm-vis-row.t-dropin .crm-vis-ava { background: linear-gradient(140deg, #3FB6A8, #2b8378); color: #fff; }
#page-crm .crm-vis-row.t-guest .crm-vis-ava { background: linear-gradient(140deg, #5B9BD5, #3d6f9e); color: #fff; }
#page-crm .crm-vis-body { flex: 1; min-width: 0; z-index: 1; }
#page-crm .crm-vis-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
#page-crm .crm-vis-top .crm-vis-name { font-family: 'Montserrat'; font-weight: 700; font-size: 13px; color: #F0EBE2; }
#page-crm .crm-vis-type { font-family: 'Montserrat'; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
#page-crm .crm-vis-type.trial { color: #E8943A; background: rgba(232,148,58,0.14); border: 1px solid rgba(232,148,58,0.3); }
#page-crm .crm-vis-type.dropin { color: #3FB6A8; background: rgba(63,182,168,0.14); border: 1px solid rgba(63,182,168,0.3); }
#page-crm .crm-vis-type.guest { color: #5B9BD5; background: rgba(91,155,213,0.14); border: 1px solid rgba(91,155,213,0.3); }
#page-crm .crm-vis-type.visit { color: #8A857D; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }
#page-crm .crm-vis-meta { font-size: 11.5px; color: #8A857D; margin-top: 3px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#page-crm .crm-vis-repeat { font-family: 'Montserrat'; font-size: 10px; font-weight: 700; color: #8B6FD6; background: rgba(139,111,214,0.13); border: 1px solid rgba(139,111,214,0.3); border-radius: 999px; padding: 2px 8px; }
#page-crm .crm-vis-when2 { flex: none; text-align: right; font-size: 11px; color: #8A857D; z-index: 1; min-width: 74px; }
#page-crm .crm-vis-act { flex: none; z-index: 1; }
#page-crm .crm-vis-act .crm-vis-cbtn { font-family: 'Montserrat'; font-size: 10.5px; font-weight: 600; cursor: pointer; border-radius: 8px; padding: 7px 12px; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.04); color: #C4BFB6; transition: all .18s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }

/* right rail: type mix + convert seam + source */
#page-crm .crm-vis-rail { display: flex; flex-direction: column; gap: 18px; }
#page-crm .crm-vis-mix-list { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
#page-crm .crm-vis-mix-item { display: flex; align-items: center; gap: 10px; font-size: 12px; }
#page-crm .crm-vis-mix-item .crm-vis-sw { width: 11px; height: 11px; border-radius: 4px; flex: none; }
#page-crm .crm-vis-mix-item .crm-vis-mn { color: #C4BFB6; flex: none; width: 84px; }
#page-crm .crm-vis-mix-item .crm-vis-mbar { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; }
#page-crm .crm-vis-mix-item .crm-vis-mv { font-family: 'Montserrat'; font-weight: 700; color: #F0EBE2; width: 24px; text-align: right; }

/* convert seam */
#page-crm .crm-vis-seam { background: linear-gradient(150deg, rgba(76,175,125,0.12), rgba(255,255,255,0.018)); border: 1px solid rgba(76,175,125,0.28); border-radius: 14px; padding: 16px 17px; }
#page-crm .crm-vis-seam h4 .crm-vis-g { width: 24px; height: 24px; border-radius: 8px; background: rgba(76,175,125,0.18); display: grid; place-items: center; font-size: 13px; }
#page-crm .crm-vis-seam .crm-vis-seam-stat { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
#page-crm .crm-vis-seam .crm-vis-seam-stat .n { font-family: 'Montserrat'; font-weight: 800; font-size: 22px; color: #4CAF7D; }
#page-crm .crm-vis-seam .crm-vis-seam-stat .l { font-size: 11px; color: #8A857D; }
#page-crm .crm-vis-seam .crm-vis-seam-btn { display: block; width: 100%; text-align: center; font-family: 'Montserrat'; font-size: 12px; font-weight: 700; cursor: pointer; border-radius: 10px; padding: 10px; border: 1px solid transparent; background: linear-gradient(180deg, #4CAF7D, #3a9268); color: #fff; transition: .18s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 4px 16px -6px rgba(76,175,125,0.5); }
#page-crm .crm-vis-seam .crm-vis-seam-link { display: block; text-align: center; font-size: 11px; color: #8A857D; margin-top: 9px; cursor: pointer; }

/* source breakdown rows */
#page-crm .crm-vis-src-row { display: flex; align-items: center; gap: 9px; font-size: 11.5px; margin-bottom: 9px; }
#page-crm .crm-vis-src-row .crm-vis-s-l { width: 86px; color: #8A857D; flex: none; }
#page-crm .crm-vis-src-row .crm-vis-s-bar { flex: 1; height: 6px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; }
#page-crm .crm-vis-src-row .crm-vis-s-v { width: 28px; text-align: right; font-family: 'Montserrat'; font-weight: 700; color: #F0EBE2; }
#page-crm .crm-vis-src-note { font-size: 11px; color: #8A857D; margin-top: 4px; line-height: 1.5; }

/* honest-empty */
#page-crm .crm-vis-empty { text-align: center; padding: 34px 20px; }
#page-crm .crm-vis-empty .crm-vis-ico { font-size: 30px; opacity: .6; margin-bottom: 10px; }
#page-crm .crm-vis-empty .crm-vis-em-btn { font-family: 'Montserrat'; font-size: 11.5px; font-weight: 600; cursor: pointer; border-radius: 9px; padding: 8px 16px; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.04); color: #C4BFB6; }

#page-crm .crm-vis-footnote { font-size: 10px; color: #8A857D; margin-top: 18px; text-align: center; opacity: .7; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════════════
   FIX_CRM_AUTOMATIONS_2026_07_01 — CRM Automations (the UNIVERSAL trigger -> conditions
   -> actions builder engine + a TAGGED industry-module library) styles, scoped under
   #page-crm. Built TO design_samples/specialists/crm/crm_automations.html section-by-
   section. The sample's generic .banner / .auto-card / .canvas / .blk / .step / .palette
   / .pal-item / .enroll / .consent classes are re-namespaced with a "cra-" prefix
   (distinct from crpr- / crm-vis- / fm- / cd- / crmc-) so they cannot collide app-wide.
   Sample :root token VALUES inlined as literal hex (mirror of the crpr- / crm-vis-
   precedent). FULL-WIDTH: no narrow max-width cap on the surface or its cards (the
   #crm-content host gutter supplies the side padding). ASCII-only comments (a non-ASCII
   char silently drops the CSSOM rule, the L18.8 lesson). HONEST-EXECUTION posture: the
   builder UI ships + is usable to view/compose; the live-firing execution engine is a
   BACKEND build OUT OF SCOPE. The .cra-exec-banner carries the explicit "execution not
   yet wired" statement; illustrative enrollment/funnel figures are labelled ILLUSTRATIVE,
   NOT a live "ran today" feed. Reuses st-overlay-title / fm-state verbatim for loading/
   honest-load states (NOT re-authored). ════════════════════════════════════════════ */
#page-crm .cra-head-row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 4px; }
#page-crm .cra-head-lead { font-size: 13px; color: #C4BFB6; line-height: 1.5; margin-top: 8px; max-width: 900px; }
#page-crm .cra-head-cta { margin-left: auto; flex: none; }
#page-crm .cra-btn-primary { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat'; font-weight: 700; font-size: 12.5px; color: #16140F; background: linear-gradient(180deg, #D8BC63, #C9A84C); border: none; border-radius: 10px; padding: 10px 16px; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(201,168,76,0.6); }
#page-crm .cra-ind-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 12px; padding: 8px 12px; background: rgba(91,155,213,0.08); border: 1px solid rgba(91,155,213,0.22); border-radius: 10px; font-size: 12px; color: #C4BFB6; }
#page-crm .cra-ind-chip .cra-ic-dot { width: 8px; height: 8px; border-radius: 50%; background: #5B9BD5; box-shadow: 0 0 9px #5B9BD5; flex: none; }
#page-crm .cra-ind-chip .cra-ic-scaf { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A857D; border: 1px solid rgba(255,255,255,0.13); border-radius: 6px; padding: 2px 6px; }

/* HONEST-EXECUTION banner — the load-bearing "execution not yet wired" statement */
#page-crm .cra-exec-banner { display: flex; gap: 13px; align-items: flex-start; margin: 16px 0 6px; padding: 14px 16px; background: linear-gradient(170deg, rgba(232,148,58,0.10), rgba(232,148,58,0.02)); border: 1px solid rgba(232,148,58,0.34); border-radius: 13px; }
#page-crm .cra-exec-banner .cra-eb-ic { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; background: rgba(232,148,58,0.16); }
#page-crm .cra-exec-banner .cra-eb-body { font-size: 12.5px; color: #C4BFB6; line-height: 1.55; }
#page-crm .cra-exec-banner .cra-eb-tag { display: inline-block; margin-bottom: 4px; font-family: 'Montserrat'; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #E8943A; }

/* ENGINE banner — the industry-agnostic "one engine, every business" statement */
#page-crm .cra-engine-banner { display: flex; gap: 13px; align-items: flex-start; margin: 6px 0 4px; padding: 14px 16px; background: linear-gradient(170deg, rgba(201,168,76,0.08), rgba(201,168,76,0.015)); border: 1px solid rgba(201,168,76,0.26); border-radius: 13px; }
#page-crm .cra-engine-banner .cra-eb-ic { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; background: rgba(201,168,76,0.14); }
#page-crm .cra-engine-banner .cra-eb-body { font-size: 12.5px; color: #C4BFB6; line-height: 1.55; }

/* section titles */
#page-crm .cra-sec-h { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin: 26px 0 14px; }
#page-crm .cra-pill-count { font-size: 10.5px; font-weight: 700; color: #C9A84C; background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.28); border-radius: 999px; padding: 3px 10px; }
#page-crm .cra-sh-sub { font-size: 11.5px; color: #8A857D; }
#page-crm .cra-sh-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.10), transparent); min-width: 20px; }

/* module tags */
#page-crm .cra-mod-tag { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; border-radius: 6px; padding: 2px 7px; vertical-align: middle; }
#page-crm .cra-mod-tag.universal { color: #3FB6A8; background: rgba(63,182,168,0.12); border: 1px solid rgba(63,182,168,0.3); }
#page-crm .cra-mod-tag.gym { color: #8B6FD6; background: rgba(139,111,214,0.13); border: 1px solid rgba(139,111,214,0.32); }
#page-crm .cra-mod-tag.trades { color: #E8943A; background: rgba(232,148,58,0.13); border: 1px solid rgba(232,148,58,0.32); }
#page-crm .cra-mod-tag.retail { color: #5B9BD5; background: rgba(91,155,213,0.13); border: 1px solid rgba(91,155,213,0.32); }
#page-crm .cra-mod-tag.clinic { color: #4CAF7D; background: rgba(76,175,125,0.13); border: 1px solid rgba(76,175,125,0.32); }
#page-crm .cra-flag-tag { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #E05555; background: rgba(224,85,85,0.12); border: 1px solid rgba(224,85,85,0.3); border-radius: 6px; padding: 2px 6px; vertical-align: middle; }

/* automations library */
#page-crm .cra-lib { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
@media (max-width: 1100px) { #page-crm .cra-lib { grid-template-columns: 1fr; } }
#page-crm .cra-auto-card { position: relative; overflow: hidden; background: linear-gradient(165deg, #262320, #1f1c19); border: 1px solid rgba(255,255,255,0.08); border-radius: 15px; padding: 15px 16px 13px; box-shadow: 0 16px 34px -28px #000, inset 0 1px 0 rgba(255,255,255,0.05); }
#page-crm .cra-auto-card.flagship { border-color: rgba(224,85,85,0.3); box-shadow: 0 20px 44px -28px #000, inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(224,85,85,0.14); }
#page-crm .cra-ac-top { display: flex; align-items: flex-start; gap: 12px; }
#page-crm .cra-ac-ico { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
#page-crm .cra-ac-name { flex: 1; min-width: 0; }
#page-crm .cra-acn { font-family: 'Montserrat'; font-size: 13.5px; font-weight: 700; color: #F0EBE2; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
#page-crm .cra-trig { font-size: 11.5px; color: #8A857D; margin-top: 4px; line-height: 1.45; }
#page-crm .cra-ac-meta { display: flex; align-items: center; gap: 18px; margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.06); }
#page-crm .cra-ac-stat { display: flex; flex-direction: column; gap: 2px; }
#page-crm .cra-acs-v { font-family: 'Montserrat'; font-size: 13px; font-weight: 700; color: #F0EBE2; }
#page-crm .cra-acs-l { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #8A857D; }
#page-crm .cra-ac-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .07em; padding: 3px 9px; border-radius: 999px; }
#page-crm .cra-ac-status .cra-sdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* toggle (visual state control; local UI only — not a live-firing switch) */
#page-crm .cra-toggle { position: relative; width: 42px; height: 23px; border-radius: 999px; flex: none; cursor: pointer; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.14); transition: all .2s; }

/* builder */
#page-crm .cra-builder-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 15px; align-items: start; }
@media (max-width: 1200px) { #page-crm .cra-builder-wrap { grid-template-columns: 1fr; } }
#page-crm .cra-canvas { background: linear-gradient(170deg, #232120, #1c1a18); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 18px; box-shadow: 0 22px 50px -36px #000, inset 0 1px 0 rgba(255,255,255,0.05); }
#page-crm .cra-canvas-head { display: flex; align-items: flex-start; gap: 12px; }
#page-crm .cra-ch-ico { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: rgba(224,85,85,0.12); border: 1px solid rgba(224,85,85,0.24); }
#page-crm .cra-ch-sub { font-size: 11.5px; color: #8A857D; margin-top: 5px; line-height: 1.5; }
#page-crm .cra-ch-toggle { margin-left: auto; display: flex; align-items: center; gap: 9px; flex: none; }
#page-crm .cra-ch-toggle .cra-tl { font-size: 11px; font-weight: 700; font-family: 'Montserrat'; color: #4CAF7D; }
#page-crm .cra-flow-lbl { display: inline-block; font-family: 'Montserrat'; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 7px; }
#page-crm .cra-flow-lbl.iff { color: #E8943A; background: rgba(232,148,58,0.12); }
#page-crm .cra-flow-lbl.then { color: #4CAF7D; background: rgba(76,175,125,0.12); }
#page-crm .cra-blk { margin-top: 8px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 13px 14px; }
#page-crm .cra-blk.trigger { border-color: rgba(91,155,213,0.34); background: rgba(91,155,213,0.05); }
#page-crm .cra-blk.cond { border-color: rgba(232,148,58,0.26); }
#page-crm .cra-blk-row { display: flex; align-items: flex-start; gap: 11px; }
#page-crm .cra-blk-ico { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,0.05); }
#page-crm .cra-blk.trigger .cra-blk-ico { background: rgba(91,155,213,0.16); }
#page-crm .cra-blk-body { flex: 1; min-width: 0; }
#page-crm .cra-bt { font-family: 'Montserrat'; font-size: 12.5px; font-weight: 700; color: #F0EBE2; }
#page-crm .cra-bd { font-size: 11px; color: #8A857D; margin-top: 3px; line-height: 1.45; }
#page-crm .cra-selectish { align-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #C4BFB6; border: 1px solid rgba(255,255,255,0.13); border-radius: 8px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
#page-crm .cra-cond-list { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
#page-crm .cra-cond-item { display: flex; align-items: center; gap: 8px; font-size: 11.5px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; padding: 7px 10px; }
#page-crm .cra-ci-k { color: #F0EBE2; font-weight: 600; }
#page-crm .cra-ci-op { color: #8A857D; }
#page-crm .cra-ci-v { color: #C9A84C; font-weight: 600; }
#page-crm .cra-ci-x { margin-left: auto; color: #8A857D; cursor: pointer; }
#page-crm .cra-add-inline { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 11px; color: #8A857D; cursor: pointer; }
#page-crm .cra-add-inline .cra-plus { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; border: 1px dashed rgba(255,255,255,0.2); }
#page-crm .cra-flow-connector { width: 2px; height: 14px; margin: 4px 0 4px 15px; background: rgba(201,168,76,0.18); }
#page-crm .cra-steps { margin-top: 6px; }
#page-crm .cra-step { position: relative; padding-left: 34px; padding-bottom: 10px; }
#page-crm .cra-step .cra-rail { position: absolute; left: 16px; top: 0; bottom: 0; width: 2px; background: rgba(201,168,76,0.18); }
#page-crm .cra-step:first-child .cra-rail { top: 18px; }
#page-crm .cra-step:last-child .cra-rail { bottom: auto; height: 18px; }
#page-crm .cra-node { position: absolute; left: 11px; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: #232120; border: 2px solid #C9A84C; }
#page-crm .cra-node.gate { border-color: #E05555; }
#page-crm .cra-step-card { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 11px; overflow: hidden; }
#page-crm .cra-sc-summary { display: flex; align-items: center; gap: 11px; padding: 11px 12px; cursor: pointer; }
#page-crm .cra-sc-when { font-size: 10.5px; font-weight: 700; color: #C9A84C; white-space: nowrap; }
#page-crm .cra-sc-mico { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,0.05); }
#page-crm .cra-sc-txt { flex: 1; min-width: 0; }
#page-crm .cra-sct { font-family: 'Montserrat'; font-size: 12px; font-weight: 700; color: #F0EBE2; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
#page-crm .cra-scd { font-size: 10.5px; color: #8A857D; margin-top: 2px; line-height: 1.4; }
#page-crm .cra-method-tag { font-size: 9px; font-weight: 700; letter-spacing: .04em; border-radius: 5px; padding: 2px 6px; }
#page-crm .cra-method-tag.email { color: #5B9BD5; background: rgba(91,155,213,0.13); } #page-crm .cra-method-tag.sms { color: #4CAF7D; background: rgba(76,175,125,0.13); } #page-crm .cra-method-tag.call { color: #8B6FD6; background: rgba(139,111,214,0.13); } #page-crm .cra-method-tag.letter { color: #C9A84C; background: rgba(201,168,76,0.13); } #page-crm .cra-method-tag.gate { color: #E05555; background: rgba(224,85,85,0.13); }
#page-crm .cra-sc-actions { display: flex; align-items: center; gap: 5px; flex: none; }
#page-crm .cra-sc-btn { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; border: 1px solid rgba(255,255,255,0.1); background: transparent; cursor: pointer; }
#page-crm .cra-sc-editor { padding: 0 12px 13px; border-top: 1px solid rgba(255,255,255,0.06); }
#page-crm .cra-editor-kind { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 11px; font-weight: 600; color: #8A857D; }
#page-crm .cra-ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 12px; }
@media (max-width: 640px) { #page-crm .cra-ed-grid { grid-template-columns: 1fr; } }
#page-crm .cra-picker { display: flex; gap: 6px; flex-wrap: wrap; }
#page-crm .cra-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #C4BFB6; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
#page-crm .cra-subject-field, #page-crm .cra-msg-body { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; padding: 10px 12px; font-size: 12px; color: #F0EBE2; }
#page-crm .cra-msg-body { color: #C4BFB6; line-height: 1.55; }
#page-crm .cra-chip { display: inline-block; font-size: 11px; color: #C9A84C; background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.26); border-radius: 5px; padding: 0 5px; }
#page-crm .cra-merge-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#page-crm .cra-mr-l { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A857D; }
#page-crm .cra-merge-chip { font-size: 10.5px; color: #8B6FD6; background: rgba(139,111,214,0.1); border: 1px solid rgba(139,111,214,0.26); border-radius: 5px; padding: 2px 7px; }
#page-crm .cra-add-step { display: flex; align-items: center; gap: 10px; padding: 4px 0 8px 34px; }
#page-crm .cra-as-btn { font-size: 11px; font-weight: 600; color: #8A857D; border: 1px dashed rgba(255,255,255,0.18); border-radius: 8px; padding: 6px 12px; background: transparent; cursor: pointer; }
#page-crm .cra-as-line { flex: 1; height: 1px; background: rgba(255,255,255,0.06); }

/* palettes */
#page-crm .cra-palette-col { display: flex; flex-direction: column; gap: 14px; }
#page-crm .cra-palette { background: linear-gradient(170deg, #232120, #1c1a18); border: 1px solid rgba(255,255,255,0.08); border-radius: 15px; padding: 15px; box-shadow: 0 16px 34px -30px #000; }
#page-crm .cra-pdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
#page-crm .cra-p-sub { font-size: 10.5px; color: #8A857D; margin: 6px 0 4px; line-height: 1.45; }
#page-crm .cra-tier-h { display: flex; align-items: center; gap: 8px; margin: 13px 0 8px; }
#page-crm .cra-tier-h .cra-th-l { font-family: 'Montserrat'; font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
#page-crm .cra-tier-h.univ .cra-th-l { color: #3FB6A8; } #page-crm .cra-tier-h.module .cra-th-l { color: #8B6FD6; }
#page-crm .cra-th-line { flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
#page-crm .cra-th-note { font-size: 9.5px; color: #6f6a63; }
#page-crm .cra-pal-list { display: flex; flex-direction: column; gap: 6px; }
#page-crm .cra-pal-item { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 9px; padding: 8px 10px; cursor: grab; }
#page-crm .cra-pal-item.money { border-color: rgba(232,148,58,0.28); } #page-crm .cra-pal-item.deliberate { border-color: rgba(224,85,85,0.24); }
#page-crm .cra-pi-ico { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,0.05); }
#page-crm .cra-pi-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: #F0EBE2; }
#page-crm .cra-pi-name small { display: block; font-size: 10px; font-weight: 400; color: #8A857D; margin-top: 1px; }
#page-crm .cra-pi-grip { color: #6f6a63; font-size: 12px; letter-spacing: -2px; }
#page-crm .cra-pi-mod, #page-crm .cra-pi-flag { font-size: 9px; font-weight: 700; letter-spacing: .04em; border-radius: 5px; padding: 2px 6px; }
#page-crm .cra-pi-mod.gym { color: #8B6FD6; background: rgba(139,111,214,0.13); } #page-crm .cra-pi-mod.trades { color: #E8943A; background: rgba(232,148,58,0.13); } #page-crm .cra-pi-mod.retail { color: #5B9BD5; background: rgba(91,155,213,0.13); } #page-crm .cra-pi-mod.clinic { color: #4CAF7D; background: rgba(76,175,125,0.13); }
#page-crm .cra-pi-flag.money { color: #E8943A; background: rgba(232,148,58,0.14); } #page-crm .cra-pi-flag.delib { color: #E05555; background: rgba(224,85,85,0.14); }

/* enrollment (ILLUSTRATIVE — not a live feed) */
#page-crm .cra-enroll-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 15px; align-items: start; }
@media (max-width: 1100px) { #page-crm .cra-enroll-wrap { grid-template-columns: 1fr; } }
#page-crm .cra-enroll { background: linear-gradient(170deg, #232120, #1c1a18); border: 1px solid rgba(255,255,255,0.08); border-radius: 15px; padding: 16px; }
#page-crm .cra-enroll-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
#page-crm .cra-eh-ico { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(201,168,76,0.1); }
#page-crm .cra-eh-sub { font-size: 11px; color: #8A857D; margin-top: 3px; line-height: 1.45; }
#page-crm .cra-eh-illus { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #8A857D; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; padding: 3px 9px; }
#page-crm .cra-funnel { display: flex; flex-direction: column; gap: 9px; }
#page-crm .cra-fn-row { display: flex; align-items: center; gap: 11px; }
#page-crm .cra-fn-mico { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,0.05); }
#page-crm .cra-fn-name { flex: none; width: 140px; font-size: 11.5px; font-weight: 600; color: #F0EBE2; }
#page-crm .cra-fn-name small { display: block; font-size: 10px; font-weight: 400; color: #8A857D; }
#page-crm .cra-fn-bar { flex: 1; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.05); overflow: hidden; }
#page-crm .cra-fn-cnt { flex: none; width: 28px; text-align: right; font-family: 'Montserrat'; font-weight: 700; font-size: 13px; color: #F0EBE2; }
#page-crm .cra-enroll-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); }
#page-crm .cra-ef-stat { display: flex; align-items: center; gap: 9px; flex: none; }
#page-crm .cra-ef-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(76,175,125,0.1); }
#page-crm .cra-ef-v { font-family: 'Montserrat'; font-weight: 700; font-size: 16px; color: #F0EBE2; }
#page-crm .cra-ef-l { font-size: 10px; color: #8A857D; }
#page-crm .cra-ef-note { font-size: 10.5px; color: #8A857D; line-height: 1.45; }
#page-crm .cra-r-sub { font-size: 11px; color: #8A857D; margin: 3px 0 12px; }
#page-crm .cra-r-list { display: flex; flex-direction: column; gap: 8px; }
#page-crm .cra-r-item { display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 9px 11px; }
#page-crm .cra-r-ava { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; font-family: 'Montserrat'; font-weight: 700; font-size: 11px; color: #16140F; background: linear-gradient(135deg, #D8BC63, #C9A84C); }
#page-crm .cra-r-ava.v2 { background: linear-gradient(135deg, #6fb0dd, #5B9BD5); } #page-crm .cra-r-ava.v3 { background: linear-gradient(135deg, #a487e0, #8B6FD6); } #page-crm .cra-r-ava.v4 { background: linear-gradient(135deg, #64c4b7, #3FB6A8); }
#page-crm .cra-r-body { flex: 1; min-width: 0; }
#page-crm .cra-rn { font-size: 12.5px; font-weight: 700; color: #F0EBE2; }
#page-crm .cra-rm { font-size: 10.5px; color: #8A857D; margin-top: 2px; }
#page-crm .cra-r-step { flex: none; text-align: right; }
#page-crm .cra-rs-tag { display: inline-block; font-size: 9.5px; font-weight: 700; border-radius: 6px; padding: 2px 8px; }
#page-crm .cra-rs-tag.email { color: #5B9BD5; background: rgba(91,155,213,0.13); } #page-crm .cra-rs-tag.sms { color: #4CAF7D; background: rgba(76,175,125,0.13); } #page-crm .cra-rs-tag.call { color: #8B6FD6; background: rgba(139,111,214,0.13); } #page-crm .cra-rs-tag.letter { color: #C9A84C; background: rgba(201,168,76,0.13); } #page-crm .cra-rs-tag.gate { color: #E05555; background: rgba(224,85,85,0.13); }
#page-crm .cra-rs-when { font-size: 9.5px; color: #6f6a63; margin-top: 3px; }

/* consent / honesty */
#page-crm .cra-consent { margin-top: 24px; background: linear-gradient(170deg, rgba(63,182,168,0.05), rgba(63,182,168,0.01)); border: 1px solid rgba(63,182,168,0.2); border-radius: 15px; padding: 18px; }
#page-crm .cra-consent-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 800px) { #page-crm .cra-consent-grid { grid-template-columns: 1fr; } }
#page-crm .cra-cnote { display: flex; gap: 11px; align-items: flex-start; }
#page-crm .cra-cn-ico { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; }
#page-crm .cra-cn-ico.c-green { background: rgba(76,175,125,0.12); }
#page-crm .cra-cn-ico.c-amber { background: rgba(232,148,58,0.12); }
#page-crm .cra-cn-ico.c-blue { background: rgba(91,155,213,0.12); }
#page-crm .cra-cn-ico.c-teal { background: rgba(63,182,168,0.12); }
#page-crm .cra-cn-ico.c-red { background: rgba(224,85,85,0.12); }
#page-crm .cra-cn-body { font-size: 11.5px; color: #C4BFB6; line-height: 1.5; }
#page-crm .cra-footnote { font-size: 10px; color: #8A857D; margin-top: 18px; text-align: center; opacity: .7; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════════════
   FIX_CRM_COMMAND_LANDING_2026_06_15 — CRM Manager Command Overview styles, scoped
   under #page-crm (the co- = "crm overview" prefix, so nothing collides with the
   People po- block OR the Financial fo- block above, the FIX_PEOPLEFOOTNOTE_BLEED
   scope-gate lesson). THIRD Command-Overview ship; DIRECT structural mirror of the
   People (po-) + Financial (fo-) precedents. Built TO
   design_samples/specialists/crm/crm_landing_command.html at ultra-HD fidelity (the
   founder sample is the spec). Literal hex values mirror the sample's :root tokens
   (the platform's own :root names differ; inlining the sample's exact palette
   preserves the sample aesthetic). ASCII-only comments throughout (a non-ASCII char
   silently drops the rule from the CSSOM — the established L18.8 lesson).
   ════════════════════════════════════════════════════════════════════════════ */
#page-crm .co-head-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
#page-crm .co-head-row h1 {
  font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 800;
  letter-spacing: -.01em; line-height: 1; color: #F0EBE2; margin: 0;
}
#page-crm .co-head-row .co-when { font-size: 11.5px; color: #8A857D; padding-bottom: 2px; }

/* FIX_KPIWIN_P1_CRM_2026_07_01 — universal KPI time-window control (Phase 1). The
   .kpiwin-* classes are surface-AGNOSTIC (NOT #page-crm-scoped) so Phases 2+ reuse the
   SAME control on Financial / People / Operations / Sales headers. .co-head-spacer pushes
   the control to the top-right of the CRM header; .co-asof is the snapshot "as of today"
   marker on snapshot tiles when a non-MTD window is active. */
#page-crm .co-head-row .co-head-spacer { flex: 1 1 auto; }
#page-crm .co-asof {
  font-size: 10px; color: #8A857D; font-style: italic; margin-left: 4px;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 1px 7px;
  white-space: nowrap;
}

#page-crm .co-statusline {
  display: inline-flex; align-items: center; gap: 10px;
  background: #1C1A17; border: 1px solid rgba(255,255,255,0.07);
  border-radius: 999px; padding: 9px 16px 9px 14px;
  font-size: 13px; color: #C4BFB6;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45); margin: 12px 0 18px;
}
#page-crm .co-statusline .co-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #E8943A;
  box-shadow: 0 0 0 4px rgba(232,148,58,0.16);
  animation: coPulse 2.6s cubic-bezier(0.4,0,0.2,1) infinite; flex-shrink: 0;
}
#page-crm .co-statusline b { color: #F0EBE2; font-weight: 700; }
#page-crm .co-statusline .co-fix { color: #E8943A; font-weight: 600; }

/* KPI band — 6 tiles (clickable popovers) */
#page-crm .co-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; margin-bottom: 18px; }
#page-crm .co-kpi {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, #262320, #1f1c19);
  border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 15px 16px 14px;
  box-shadow: 0 16px 34px -28px #000, inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform .2s cubic-bezier(0.4,0,0.2,1), box-shadow .2s cubic-bezier(0.4,0,0.2,1), border-color .2s cubic-bezier(0.4,0,0.2,1);
  cursor: pointer; outline: none;
}
#page-crm .co-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #C9A84C; opacity: .55; }
#page-crm .co-kpi.co-k-active::before { background: #8B6FD6; }
#page-crm .co-kpi.co-k-risk::before { background: #E8943A; }
#page-crm .co-kpi.co-k-ret::before { background: #4CAF7D; }
#page-crm .co-kpi.co-k-new::before { background: #5B9BD5; }
#page-crm .co-kpi.co-k-ltv::before { background: #C9A84C; }
#page-crm .co-kpi.co-k-health::before { background: #C9A84C; }
#page-crm .co-kpi:hover, #page-crm .co-kpi:focus-visible {
  transform: translateY(-3px); border-color: rgba(255,255,255,0.13);
  box-shadow: 0 22px 44px -26px #000, 0 0 0 1px rgba(201,168,76,0.14), 0 0 26px -12px rgba(201,168,76,0.45);
}
#page-crm .co-kpi.co-pop-open { border-color: rgba(201,168,76,0.45); box-shadow: 0 22px 44px -26px #000, 0 0 0 1px rgba(201,168,76,0.4), 0 0 30px -10px rgba(201,168,76,0.6); }
#page-crm .co-kpi[data-pop]:focus-visible { outline: 2px solid rgba(201,168,76,0.6); outline-offset: 2px; }
#page-crm .co-kpi .co-lbl { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #8A857D; font-weight: 700; margin-bottom: 7px; }
#page-crm .co-kpi .co-val { font-family: 'Montserrat', sans-serif; font-size: 23px; font-weight: 800; color: #F0EBE2; line-height: 1; }
#page-crm .co-kpi .co-sub { font-size: 11.5px; margin-top: 7px; color: #8A857D; display: flex; align-items: center; gap: 5px; }
#page-crm .co-kpi .co-sub .co-delta { font-weight: 700; }
#page-crm .co-kpi .co-sub .co-pos { color: #4CAF7D; }
#page-crm .co-kpi .co-sub .co-neg { color: #E05555; }
#page-crm .co-kpi .co-sub .co-warn { color: #E8943A; }
#page-crm .co-kpi .co-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; color: #5B9BD5; background: rgba(91,155,213,0.14);
}
#page-crm .co-kpi .co-expand {
  position: absolute; right: 11px; bottom: 11px; width: 16px; height: 16px;
  opacity: .4; transition: opacity .2s cubic-bezier(0.4,0,0.2,1), transform .2s cubic-bezier(0.4,0,0.2,1);
}
#page-crm .co-kpi:hover .co-expand, #page-crm .co-kpi:focus-visible .co-expand { opacity: .85; }
#page-crm .co-kpi.co-pop-open .co-expand { opacity: 1; transform: rotate(180deg); }
#page-crm .co-kpi .co-expand svg { width: 16px; height: 16px; stroke: #C9A84C; }

/* layout: rivers hero + attention */
#page-crm .co-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }
#page-crm .co-panel {
  background: linear-gradient(170deg, #252220, #1e1b19);
  border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 22px 50px -36px #000, inset 0 1px 0 rgba(255,255,255,0.05);
}
#page-crm .co-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
#page-crm .co-panel-h h3 { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .4px; color: #F0EBE2; margin: 0; }
#page-crm .co-panel-h .co-hint { font-size: 11px; color: #8A857D; }
#page-crm .co-panel-sub { font-size: 11.5px; color: #8A857D; margin: 2px 0 14px; }

/* rivers hero */
#page-crm .co-river-box { position: relative; width: 100%; height: 262px; }
#page-crm #co-river { display: block; width: 100%; height: 100%; }
/* FIX_REALACCT_CRM_MOMENTUM_2026_06_15 — honest coming-soon body centered in the river box on a
   real account (keeps the 262px hero footprint so the two-column .co-grid does not collapse). */
#page-crm .co-river-soon { display: flex; align-items: center; justify-content: center; text-align: center; }
#page-crm .co-river-soon .co-att-empty { max-width: 380px; }
#page-crm .co-river-legend { display: flex; gap: 18px; margin-top: 11px; font-size: 11px; color: #8A857D; flex-wrap: wrap; }
#page-crm .co-river-legend span { display: inline-flex; align-items: center; gap: 6px; }
#page-crm .co-swatch { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

/* attention queue */
#page-crm .co-att-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#page-crm .co-att-head h3 { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .4px; display: flex; align-items: center; gap: 9px; color: #F0EBE2; margin: 0; }
#page-crm .co-att-head h3 .co-glyph { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(150deg, rgba(224,85,85,0.24), rgba(232,148,58,0.12)); display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
#page-crm .co-att-head h3 .co-glyph svg { width: 14px; height: 14px; }
#page-crm .co-att-head .co-count { font-size: 10.5px; font-weight: 700; color: #F0EBE2; background: rgba(232,148,58,0.16); border: 1px solid rgba(232,148,58,0.36); border-radius: 999px; padding: 3px 11px; letter-spacing: .03em; font-family: 'Montserrat', sans-serif; }
#page-crm .co-att-list { display: flex; flex-direction: column; gap: 9px; }
#page-crm .co-att {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px;
  background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.07);
  transition: .18s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden;
}
#page-crm .co-att::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 12px 0 0 12px; background: var(--co-lvl, #C9A84C); }
#page-crm .co-att:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.13); transform: translateX(2px); }
#page-crm .co-att.co-p1 { --co-lvl: #E05555; border-color: rgba(224,85,85,0.36); background: linear-gradient(108deg, rgba(224,85,85,0.12), rgba(255,255,255,0.018) 46%); padding: 14px 15px; }
#page-crm .co-att.co-p1::before { box-shadow: 0 0 18px rgba(224,85,85,0.5); }
#page-crm .co-att.co-amber { --co-lvl: #E8943A; }
#page-crm .co-att.co-red { --co-lvl: #E05555; }
#page-crm .co-att.co-blue { --co-lvl: #5B9BD5; }
#page-crm .co-att .co-rank { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px; color: #8A857D; width: 16px; text-align: center; flex-shrink: 0; z-index: 1; }
#page-crm .co-att.co-p1 .co-rank { font-size: 17px; color: #E05555; width: 20px; }
#page-crm .co-att .co-ico { width: 32px; height: 32px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; z-index: 1; }
#page-crm .co-att.co-p1 .co-ico { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 0 18px -4px rgba(224,85,85,0.45); }
#page-crm .co-att .co-ico svg { width: 16px; height: 16px; }
#page-crm .co-att.co-p1 .co-ico svg { width: 20px; height: 20px; }
#page-crm .co-att .co-ic-amber { background: rgba(232,148,58,0.14); } #page-crm .co-att .co-ic-amber svg { stroke: #E8943A; }
#page-crm .co-att .co-ic-gold { background: rgba(201,168,76,0.14); } #page-crm .co-att .co-ic-gold svg { stroke: #C9A84C; }
#page-crm .co-att .co-ic-red { background: rgba(224,85,85,0.14); } #page-crm .co-att .co-ic-red svg { stroke: #E05555; }
#page-crm .co-att .co-ic-blue { background: rgba(91,155,213,0.14); } #page-crm .co-att .co-ic-blue svg { stroke: #5B9BD5; }
#page-crm .co-att-body { flex: 1; min-width: 0; z-index: 1; }
#page-crm .co-att-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
#page-crm .co-att-top .co-tt { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px; color: #F0EBE2; }
#page-crm .co-att.co-p1 .co-att-top .co-tt { font-size: 14.5px; }
#page-crm .co-att-top .co-amt { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12.5px; }
#page-crm .co-att-top .co-amt.co-neg { color: #E05555; } #page-crm .co-att-top .co-amt.co-warn { color: #E8943A; }
#page-crm .co-att .co-desc { font-size: 11.5px; color: #8A857D; margin-top: 3px; line-height: 1.4; }
#page-crm .co-att.co-p1 .co-desc { font-size: 12px; color: #C4BFB6; }
#page-crm .co-att .co-desc b { color: #C4BFB6; font-weight: 600; }
#page-crm .co-att-act { flex: none; z-index: 1; }
#page-crm .co-att-act .co-btn {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; cursor: pointer;
  border-radius: 8px; padding: 7px 14px; border: 1px solid rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.04); color: #C4BFB6; transition: all .18s cubic-bezier(0.4,0,0.2,1);
  white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
#page-crm .co-att-act .co-btn:hover { background: rgba(255,255,255,0.09); color: #F0EBE2; transform: translateY(-1px); border-color: #C9A84C; }
#page-crm .co-att.co-p1 .co-att-act .co-btn { background: linear-gradient(180deg, #E05555, #b94545); border-color: transparent; color: #fff; font-weight: 700; padding: 9px 18px; box-shadow: 0 4px 16px -5px rgba(224,85,85,0.5); }
#page-crm .co-att-empty { padding: 14px 4px; font-size: 12.5px; color: #8A857D; }
/* hover-preview hint strip (net-new; fo-hint-i clone) — the engine now gives BOTH hover-peek + click-modal. */
#page-crm .co-kpi .co-hint-i {
  position: absolute; left: 16px; bottom: 11px; font-size: 8.5px; letter-spacing: .04em;
  text-transform: uppercase; color: #6E6960; opacity: 0; transition: opacity .2s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
#page-crm .co-kpi[data-pop]:hover .co-hint-i { opacity: .75; }
#page-crm .co-kpi .co-hint-i b { color: #C9A84C; font-weight: 700; }

@media (max-width: 1080px) {
  #page-crm .co-kpis { grid-template-columns: repeat(3, 1fr); }
  #page-crm .co-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  #page-crm .co-kpis { grid-template-columns: repeat(2, 1fr); }
}