/* clx-svc-crm — deltas on top of the shared clx-svc-ai.css base.
   Loaded only on the slugs in clx_svc_crm_slugs(). Nothing here goes to site-wide.css.

   HERO ONLY at this stage: the hero emits its own .clx-svc-page.clx-svc-hero-only
   wrapper (clx-svc-hero.php) and is fully styled by clx-svc-ai.css + clx-svc-hero.css,
   so no rules are needed yet. Body-section deltas append below as sections land. */

/* ===== HERO — grid blowout guard ========================================
   The shared clx-svc-ai.css still declares the hero split as `1.12fr .88fr`. `1fr` means
   `minmax(auto,1fr)`, so neither column can shrink below its own min-content width; wide
   content in either one pushes the ratio out and the hero stops splitting where it should.
   /zoho-services/ fixed this in its own forked sheet (clx-svc-zoho.css:86). ERP still
   carries the unfixed base.

   Applied here as a SCOPED override rather than a patch to clx-svc-ai.css, because that
   base sheet is shared with shipped pages (ERP, AI, low-code, SEO) and changing their hero
   grid is a regression risk that belongs in its own reviewed change. */
.clx-svc-page .svc-hero-g {
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
}
/* The guard MUST be bounded at 1024px. clx-svc-ai.css collapses the hero to a single
   column inside `@media (max-width:1024px)`, and this sheet loads after it, so an
   unbounded two column rule here kept the hero at 2 columns down to 360px. Measured and
   caught 2026-09-15; do not remove the media query. */
@media (max-width:1024px){
  .clx-svc-page .svc-hero-g { grid-template-columns:1fr; }
}

/* ===== SECTION 2 — Sales is where AI lands first =========================
   Two-column thesis + viz. Values mirror the ES Section-2 economics block
   (clx-es.css .svc-es-*) so this page reads as a sibling of /enterprise-software/
   and /erp-services/. Tokens (--svc-ink/--svc-muted/--svc-orange) come from the
   shared clx-svc-ai.css base, which this component enqueues. */
.clx-svc-page .svc-crm-ai::before { display:none; }

.clx-svc-page .svc-crm-grid {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:56px;
  /* centre both columns against each other, matching the ES Section-2 economics grid.
     (Briefly set to `start` while the right column was the taller of the two; the prose
     was rebalanced to match its height, so centring is correct again.) */
  align-items:center;
}
@media (max-width:880px){
  .clx-svc-page .svc-crm-grid { grid-template-columns:1fr; gap:32px; }
}

/* Headings use the SHARED .svc-sec-h2 / .svc-sec-intro from clx-svc-ai.css, which is
   what every ERP body section uses. Do not re-declare them here: an earlier draft cloned
   the ES page's bespoke .svc-es-h2 (fixed 52px with its own breakpoints) and the heading
   visibly diverged from the rest of the site, which uses clamp(32px,4.6vw,52px).
   Only the paragraph rhythm below is local, and it matches .svc-appr-intro p. */
.clx-svc-page .svc-crm-text p {
  font-family:'Cabin',sans-serif;
  font-size:18px; line-height:28px; color:#727272;
  margin:0 0 16px;
}
.clx-svc-page .svc-crm-text p.svc-sec-intro { margin:0 0 18px; }
/* the last paragraph in either column must not add a trailing margin: it stacked with
   .svc-crm-close's own top margin and read as an accidental gap. */
.clx-svc-page .svc-crm-text > p:last-child { margin-bottom:0; }
/* INLINE EMPHASIS — scannable anchors that cost zero vertical height. `strong` sits at
   the same 18/28 rhythm as the body, so bolding a figure never reflows the column.
   .hl is the single orange call-out per section; keep it to ONE, or nothing stands out.
   Matches the house treatment at .svc-appr-framework p strong in clx-svc-ai.css. */
.clx-svc-page .svc-crm-text strong {
  color:var(--svc-ink,#142533);
  font-weight:700;
}
.clx-svc-page .svc-crm-text strong.hl {
  color:var(--svc-orange,#FA4900);
  font-weight:700;
}
@media (max-width:600px){
  .clx-svc-page .svc-crm-text p { font-size:16px; line-height:24px; }
}

/* the OECD size gap. Sits UNDER the chart in the right-hand column, so the two data
   objects read as one evidence stack and the left column stays pure argument. Static
   (no animation) so it never competes with the chart above it. */
.clx-svc-page .svc-crm-viz-col {
  display:flex;
  flex-direction:column;
  gap:18px;
}
.clx-svc-page .svc-crm-gap {
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  align-items:center;
  gap:0 26px;
  width:auto;
  margin:0;
  padding:16px 22px;
  background:#FAFAFB;
  border:1px solid #EAEAEA;
  border-left:3px solid var(--svc-orange,#FA4900);
  border-radius:10px;
}
.clx-svc-page .svc-crm-gap-n { display:flex; flex-direction:column; gap:3px; }
.clx-svc-page .svc-crm-gap-n b {
  font-family:'Cabin',sans-serif; font-size:30px; font-weight:700; letter-spacing:-.6px;
  color:var(--svc-ink,#142533); line-height:1; font-variant-numeric:tabular-nums;
}
.clx-svc-page .svc-crm-gap-n span {
  font-family:'Cabin',sans-serif; font-weight:600;
  font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--svc-muted,#898D90);
}
.clx-svc-page .svc-crm-gap-n--acc b { color:var(--svc-orange,#FA4900); }
.clx-svc-page .svc-crm-gap-sep { width:1px; height:34px; background:#E3E3E3; }
/* SOURCE LINES — one shared declaration for both citations (the chart's and the stat
   pair's) so they can never drift apart. Selectors are location independent on purpose:
   an earlier version scoped the OECD line to `.svc-crm-text p.svc-crm-gap-src`, and when
   the stat block moved into the right-hand column the rule silently stopped matching and
   the citation rendered at body size. Do not re-scope these to a parent column. */
.clx-svc-page p.svc-crm-gap-src,
.clx-svc-page p.svc-crm-viz-src {
  font-family:'Cabin',sans-serif;
  font-size:11px; line-height:1.5; font-weight:400;
  color:var(--svc-muted,#898D90);
}
.clx-svc-page p.svc-crm-gap-src { grid-column:1 / -1; margin:12px 0 0; }
@media (max-width:600px){
  .clx-svc-page .svc-crm-gap { gap:0 18px; padding:14px 16px; }
  .clx-svc-page .svc-crm-gap-n b { font-size:24px; }
}

/* closing line — full width under BOTH columns. It is the section's resolution, so it
   is not owned by the argument column or the evidence column. */
.clx-svc-page p.svc-crm-close {
  font-family:'Cabin',sans-serif;
  font-size:18px; line-height:28px; color:#727272;
  /* 28px, NOT 40. The grid is align-items:center, so the shorter column already leaves
     slack beneath it; a large margin here stacked on top of that slack and on the last
     paragraph's own 16px, which read as a hole in the section. */
  margin:28px 0 0;
}
@media (max-width:880px){
  .clx-svc-page p.svc-crm-close { margin-top:24px; }
}
@media (max-width:600px){
  .clx-svc-page p.svc-crm-close { font-size:16px; line-height:24px; }
}

/* the chart card. Shell matches .svc-es-viz so the two pages' Section 2 align. */
.clx-svc-page .svc-crm-viz {
  background:linear-gradient(#FFF6F1,#fff);
  border:1px solid #E3E3E3; border-radius:20px;
  padding:16px 14px 18px;
  display:flex; flex-direction:column;
}
.clx-svc-page .svc-crm-viz-meta {
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  padding:6px 6px 10px;
}
.clx-svc-page .svc-crm-viz-eyebrow {
  font-family:'Cabin',sans-serif; font-weight:600;
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--svc-muted,#898D90);
  max-width:190px; line-height:1.5;
}
.clx-svc-page .svc-crm-viz-rd { display:flex; gap:18px; }
.clx-svc-page .svc-crm-viz-rd .rd { display:flex; flex-direction:column; gap:3px; align-items:flex-end; }
.clx-svc-page .svc-crm-viz-rd .rd span {
  font-family:'Cabin',sans-serif; font-weight:600;
  font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--svc-muted,#898D90);
}
.clx-svc-page .svc-crm-viz-rd .rd b {
  font-family:'Cabin',sans-serif; font-size:20px; font-weight:700; letter-spacing:-.4px;
  color:var(--svc-ink,#142533); line-height:1; font-variant-numeric:tabular-nums;
}
.clx-svc-page .svc-crm-viz-rd .rd--acc b { color:var(--svc-orange,#FA4900); }
.clx-svc-page .svc-crm-viz svg { width:100%; height:auto; display:block; }
.clx-svc-page .svc-crm-viz .t-unit {
  font-family:'Cabin',sans-serif; font-weight:500; font-size:12.5px; letter-spacing:.2px; fill:var(--svc-muted,#898D90);
}
.clx-svc-page .svc-crm-viz .t-lab {
  font-family:'Cabin',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.2px; fill:var(--svc-ink,#142533);
}
.clx-svc-page .svc-crm-viz .t-val {
  font-family:'Cabin',sans-serif; font-weight:700; font-size:14px; letter-spacing:-.2px;
  fill:var(--svc-ink,#142533); font-variant-numeric:tabular-nums;
}
.clx-svc-page p.svc-crm-viz-src { margin:10px 6px 0; }

/* ===== SECTION 3 — separator ============================================
   The base gives every .svc-sec a 1px top hairline in --svc-line (#ececf0, ~7% grey),
   which is effectively invisible on white. This bumps THIS page's body separators to
   --svc-line-2 (#e0e0e6) so the section break actually reads.

   Section 2 keeps no line at all: it is the first section after the hero, and the house
   convention is that the hero's logo marquee supplies that division (clx-es.css does the
   same on .svc-es-econ, clx-svc-zoho.css on .svc-approach).

   Scoped to this page rather than changed in clx-svc-ai.css, which is shared with ERP,
   the AI page, low-code and SEO services. */
.clx-svc-page .svc-crm-appr::before {
  /* display:block is REQUIRED, not decorative. clx-svc-ai.css carries
     a `.clx-svc-page .svc-approach::before` rule that sets display to none, and this section is
     `svc-sec svc-approach svc-crm-appr`, so the base hides the hairline outright.
     Equal specificity (0,2,1), so this wins only because clx-svc-crm.css is enqueued
     after clx-svc-ai.css. Setting background alone does nothing. */
  display:block;
  background:var(--svc-line-2,#e0e0e6);
}

/* the shared .svc-appr-intro is a 2-col grid with no mobile collapse of its own */
@media (max-width:880px){
  .clx-svc-page .svc-crm-appr .svc-appr-intro { grid-template-columns:1fr; gap:22px; }
}

/* ===== SECTION 3 — leadership vs spokes comparison ======================
   Treatment ported from /seo-reseller/ (clx-sr-economics/clx-sr-compare.php, the
   "old reseller model vs Clixlogix AI first model" block). Two column groups sharing
   rows via CSS subgrid, a centre divider, a tag plus heading per column, hairline cells.

   PORTED, not reused: the clx-sr-* stylesheet is enqueued only on the seo-reseller slug,
   so referencing .clx-cmp here would render unstyled. Namespaced .crm-cmp-* to keep the
   two independent.

   The source uses a red cross column and an orange tick column, because there one option
   is wrong and the other right. Both columns here are legitimate signal sets, so the icons
   are equal weight: down for what cascades from leadership, up for what surfaces from the
   team. Do not re-introduce cross and tick. */
.clx-svc-page .crm-cmp-wrap { margin:30px auto 0; }
.clx-svc-page .crm-cmp {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:56px;
  grid-template-rows:auto repeat(4, auto);
}
.clx-svc-page .crm-cmp-col {
  display:grid;
  grid-template-rows:subgrid;
  grid-row:1 / -1;
  align-content:start;
  min-width:0;
}
.clx-svc-page .crm-cmp::before {
  content:"";
  position:absolute; top:6px; bottom:6px; left:50%; width:1px;
  transform:translateX(-50%);
  background:linear-gradient(to bottom,transparent,#e6e6e4 12%,#e6e6e4 88%,transparent);
}
.clx-svc-page .crm-cmp-h { padding:0 4px 6px; }
.clx-svc-page .crm-cmp-tag {
  display:inline-block;
  font-family:'Cabin',sans-serif;
  font-size:11px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
  margin-bottom:8px;
}
.clx-svc-page .crm-cmp-tag--lead  { color:var(--svc-orange,#FA4900); }
.clx-svc-page .crm-cmp-tag--spoke { color:#9aa3ab; }
.clx-svc-page .crm-cmp h4 {
  font-family:'Cabin',sans-serif;
  font-size:18px; line-height:1.3; font-weight:700;
  color:var(--svc-ink,#142533);
  margin:0; letter-spacing:0; text-transform:none;
  overflow-wrap:break-word;
}
.clx-svc-page .crm-cmp-cell {
  display:flex; align-items:flex-start; gap:12px;
  padding:16px 4px;
  border-top:1px solid #efefed;
  min-width:0;
}
.clx-svc-page .crm-cmp-ico {
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  margin-top:1px;
}
.clx-svc-page .crm-cmp-ico--lead  { background:#fde9df; color:var(--svc-orange,#FA4900); }
.clx-svc-page .crm-cmp-ico--spoke { background:#eef1f4; color:#5b6773; }
.clx-svc-page .crm-cmp-txt {
  font-family:'Cabin',sans-serif;
  font-size:15.5px; line-height:1.5; color:#3a4754;
  min-width:0; overflow-wrap:break-word;
}
.clx-svc-page .crm-cmp-txt b {
  display:block;
  font-weight:700; color:var(--svc-ink,#142533);
  margin-bottom:2px;
}
/* mobile: the groups stack, so each heading stays attached to its own items and the two
   icon sets never interleave (same behaviour as the seo-reseller original) */
@media (max-width:780px){
  .clx-svc-page .crm-cmp { display:block; }
  .clx-svc-page .crm-cmp::before { display:none; }
  .clx-svc-page .crm-cmp-col { display:block; }
  .clx-svc-page .crm-cmp-col--spokes { margin-top:28px; padding-top:20px; border-top:1px solid #efefed; }
}

/* ===== SECTION 3 — KPI continuous loop ==================================
   An infinity sign, for continuous improvement and iterative delivery. Node positioning
   is borrowed from the /zoho-services/ hub (clx-svc-zoho .zho-node), the circle is not.

   Two reasons the lemniscate beats a ring here. The two lobes hold the two KPI horizons
   with no legend needed, and a path with no start or end states that the work continues,
   which a circle of equidistant nodes does not.

   The travelling dash on the path animates stroke-dashoffset only. That is a paint level
   property, so it cannot shift layout the way animating `left` or `width` would.

   RESILIENCE: nodes render visible. JS opts them into the hidden start state by stamping
   .is-anim on .crm-hub, then reveals on every scroll-in. No JS leaves them all visible. */
.clx-svc-page .crm-hub-wrap { display:flex; justify-content:center; margin-top:36px; overflow-x:clip; }
.clx-svc-page .crm-hub {
  position:relative;
  width:min(880px, 100%);
  aspect-ratio:800 / 360;
}
.clx-svc-page .crm-hub-rings { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.clx-svc-page .crm-loop {
  fill:none;
  stroke:var(--svc-line-2,#e0e0e6);
  stroke-width:1.5;
}
/* a second, orange dash travelling the same path = continuous motion without spinning
   anything the reader has to track */
.clx-svc-page .crm-hub::after {
  content:'';
  position:absolute; inset:0;
  background:none;
  pointer-events:none;
}
.clx-svc-page .crm-hub-rings .crm-loop-run {
  fill:none;
  stroke:var(--svc-orange,#FA4900);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:90 1900;
  animation:crm-flow 9s linear infinite;
}
@keyframes crm-flow { from { stroke-dashoffset:1990; } to { stroke-dashoffset:0; } }

.clx-svc-page .crm-node {
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  width:132px;
  padding:9px 10px;
  border-radius:12px;
  background:#fff;
  text-align:center;
  box-shadow:0 6px 18px -12px rgba(20,37,51,.45);
}
.clx-svc-page .crm-node b {
  font-family:'Cabin',sans-serif; font-weight:700; font-size:13px; line-height:1.3;
  color:var(--svc-ink,#142533);
}
.clx-svc-page .crm-node em {
  font-family:'Cabin',sans-serif; font-style:normal; font-weight:600;
  font-size:9px; letter-spacing:.8px; text-transform:uppercase; line-height:1.3;
}
.clx-svc-page .crm-node--low  { border:1px solid #F3C9B6; }
.clx-svc-page .crm-node--low em  { color:var(--svc-orange,#FA4900); }
.clx-svc-page .crm-node--high { border:1px solid var(--svc-line-2,#e0e0e6); }
.clx-svc-page .crm-node--high em { color:var(--svc-muted,#898D90); }

/* lobe captions, sitting inside each loop */
.clx-svc-page .crm-lobe {
  position:absolute; top:50%; transform:translate(-50%,-50%);
  font-family:'Cabin',sans-serif; font-weight:700;
  font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
  white-space:nowrap;
}
.clx-svc-page .crm-lobe--low  { left:31.9%; color:var(--svc-orange,#FA4900); }
.clx-svc-page .crm-lobe--high { left:68.1%; color:var(--svc-muted,#898D90); }

/* the crossover point, where one horizon hands over to the next */
.clx-svc-page .crm-cross {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:11px; height:11px; border-radius:50%;
  background:#fff; border:2px solid var(--svc-orange,#FA4900);
}

/* animated start state — stamped by JS only */
.clx-svc-page .crm-hub.is-anim .crm-node { opacity:0; transform:translate(-50%,-50%) scale(.94); }
.clx-svc-page .crm-hub.is-anim .crm-node.is-in {
  opacity:1; transform:translate(-50%,-50%) scale(1);
  transition:opacity .45s ease, transform .45s ease;
}
@media (prefers-reduced-motion:reduce){
  .clx-svc-page .crm-hub.is-anim .crm-node { opacity:1; transform:translate(-50%,-50%); transition:none; }
  .clx-svc-page .crm-hub-rings .crm-loop-run { animation:none; stroke-dasharray:none; stroke-opacity:.45; }
}

/* Below 760px the loop cannot hold 6 nodes without them colliding, so the diagram drops
   out and the same nodes stack as a plain 2-up grid. The loop is decoration; the KPIs and
   their horizon labels are the content, and they survive intact. */
@media (max-width:760px){
  .clx-svc-page .crm-hub { aspect-ratio:auto; width:100%; }
  .clx-svc-page .crm-hub-rings,
  .clx-svc-page .crm-lobe,
  .clx-svc-page .crm-cross { display:none; }
  .clx-svc-page .crm-hub {
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
  }
  .clx-svc-page .crm-node {
    position:static; transform:none; width:auto;
    align-items:flex-start; text-align:left;
  }
  .clx-svc-page .crm-hub.is-anim .crm-node { transform:translateY(10px); }
  .clx-svc-page .crm-hub.is-anim .crm-node.is-in { transform:none; }
}
@media (max-width:440px){
  .clx-svc-page .crm-hub { grid-template-columns:1fr; }
}

/* ===== SECTION 4 — CRM services we provide ==============================
   Tabs + cards all come from clx-svc-ai.css (.svc-tabs, .svc-tabpanel, .svc-offer-grid,
   .svc-offer-card), same as the ERP page. Four cards per tab matches the shared grid's
   repeat(4,1fr), so no grid override is needed.

   Only the per-card link is local. The link itself is the shared .svc-why-cta, which
   already supplies the orange uppercase type, the arrow and the hover slide; this just
   pins it to the bottom of the card so the 4 links in a row align regardless of how long
   each description runs. */
.clx-svc-page .svc-offer-card { display:flex; flex-direction:column; }
.clx-svc-page .crm-card-lc {
  margin-top:auto;          /* push to the card foot so the 4 links in a row share a baseline */
  /* .svc-why-cta ships margin-left:auto (it is built to right-align in a flex ROW).
     Inside a flex COLUMN card that does nothing useful, so it is reset and the link is
     centred with align-self instead. */
  margin-left:0;
  align-self:center;
  padding-top:16px;
  font-size:12.5px;
  letter-spacing:.4px;
}
.clx-svc-page .crm-card-lc .svc-why-cta-t { text-underline-offset:4px; }

/* full canonical service-line name inside each tab panel (the tab BUTTON carries a short
   label so the nav row never wraps — see parts/services.php) */
.clx-svc-page .crm-tab-h {
  font-family:'Cabin',sans-serif; font-weight:700;
  font-size:22px; line-height:1.3; letter-spacing:-.2px;
  color:var(--svc-ink,#142533);
  /* 28px top is REQUIRED. .svc-tabs only contributes margin-bottom:6px, and on ERP the
     breathing room comes from .svc-tabpanel-intro's own margin-top:18px. This heading
     replaced that paragraph as the panel's first element, so with margin-top:0 the tabs
     sat 6px above it. Measured 2026-09-15: ERP 18px, this was 6px. */
  margin:28px 0 0;
}
@media (max-width:600px){
  .clx-svc-page .crm-tab-h { font-size:19px; margin-top:22px; }
}

/* THREE tabs, not two. The shared .svc-tabs gap is 56px (22px under 640px), tuned for the
   ERP page's two tabs; with three buttons that gap is paid twice and the row wrapped to
   two lines below ~1090px even after the labels were shortened. Tightened here only.
   Measured: at 700px viewport the nav is 620px wide and the buttons total 530px, so 56px
   gaps need 642px and wrap, while 36px gaps need 602px and fit. */
.clx-svc-page .svc-crm-svcs .svc-tabs { gap:36px; }
@media (max-width:640px){
  .clx-svc-page .svc-crm-svcs .svc-tabs { gap:18px; }
}

/* AI pill on cards flagged 'tag' => 'AI'. Sits top-right of the card, opposite the icon,
   so a scanner sees which capabilities are the AI ones without reading the titles.
   Generic on purpose (any short tag works), not hard-coded to the word AI. */
.clx-svc-page .svc-offer-card { position:relative; }
.clx-svc-page .crm-card-tag {
  position:absolute; top:16px; right:16px;
  font-family:'Cabin',sans-serif; font-weight:700;
  font-size:9.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--svc-orange,#FA4900);
  background:#FFF6F1; border:1px solid #F3C9B6; border-radius:999px;
  padding:3px 9px;
  line-height:1.4;
}
/* CTA labels are single words so they never wrap in a ~250px card at 4 columns */
.clx-svc-page .crm-card-lc { white-space:nowrap; }

/* ===== SECTION 5 — Why Clixlogix ========================================
   Keeps the shared .svc-why-grid 1.1fr/.9fr split: 7 reasons left, aside right.

   The aside is written from scratch rather than reusing the Enterprise Software markup.
   ES uses .clx-logo-grid / .clx-logo-tile / .clx-ai-sysdesign-banner, whose BASE rules
   live in site-wide.css — which this page does not load — while clx-es.css carries only
   overrides and is gated to the ES slug. Reusing those class names here would render
   completely unstyled.

   Writing our own also sidesteps three known traps in that shared set: .clx-logo-tile
   caps badge images at 70px, .clx-logo-grid forces height:100% and stretches a fixed
   badge block, and the tiles assume square 1:1 artwork while two of these badges are not
   square. object-fit:contain in a fixed-ratio tile handles all three. */
.clx-svc-page .crm-why-aside { display:flex; flex-direction:column; gap:20px; }

.clx-svc-page .crm-badge-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));   /* 4 badges = 2 x 2 */
  gap:12px;
}
/* FULL BLEED tiles. The artwork is designed edge to edge, so it fills the tile rather
   than sitting letterboxed inside padding. This is the per-page fill override the shared
   .clx-logo-tile needs anyway (that rule caps badge images at 70px and letterboxes them).
   No padding, overflow hidden so the radius clips, and object-fit:cover so the two
   non-square badges (Microsoft, HubSpot) fill without distorting. */
.clx-svc-page .crm-badge {
  aspect-ratio:1 / 1;
  background:#fff;
  border:1px solid #EAEAEA;
  border-radius:12px;
  padding:0;
  overflow:hidden;
}
.clx-svc-page .crm-badge img {
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Photo banner. Every value below is MEASURED off the live Enterprise Software aside
   banner (.clx-ai-sysdesign-banner--aside on /enterprise-software/) so the two read as the
   same component: 12px radius, 260px min-height, 28px/24px inner padding, Cabin 600 11px
   eyebrow at 2px tracking, Cabin 700 22px/27.5px heading, DM Sans 13px/20.15px body,
   Cabin 700 18px trust numbers over DM Sans 10px uppercase labels, 12px trust gap.
   Re-measure there before changing any of it.

   THREE !important DECLARATIONS BELOW ARE REQUIRED, not lazy. homepage.css (which this
   page loads) carries two wildcard !important rules that no amount of specificity beats:
     body.page .elementor h1..h6                { color: var(--hp-dark) !important }
     body.elementor-page .elementor-section *   { font-family: var(--hp-font) !important }
   The first turned the white heading dark; the second forced both DM Sans runs back to
   Cabin. ES solves it the same way in site-wide.css. Only colour and font-family need it.

   SPECIFICITY: every rule below is scoped `.clx-svc-page .svc-crm-why .crm-why-banner__x`
   (0,3,0) rather than the shorter `.clx-svc-page .crm-why-banner__x` (0,2,0). The page
   carries broader h3 and p rules at 0,2,1 that otherwise win, which silently turned the
   heading dark and the body font back to Cabin. Do not shorten these selectors.

   ONE DELIBERATE DIFFERENCE: ES renders its aside scrim with no background (computed
   background-image is "none") and relies on the photo being dark enough. That is fragile
   for white text, so this keeps a real gradient scrim. Everything else matches. */
.clx-svc-page .svc-crm-why .crm-why-banner {
  position:relative;
  border-radius:12px;
  overflow:hidden;
  min-height:260px;
  display:flex;
  flex:1 1 auto;
}
.clx-svc-page .svc-crm-why .crm-why-banner__media { position:absolute; inset:0; }
.clx-svc-page .svc-crm-why .crm-why-banner__media img { width:100%; height:100%; object-fit:cover; display:block; }
.clx-svc-page .svc-crm-why .crm-why-banner__scrim {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,37,51,.25) 0%, rgba(20,37,51,.80) 58%, rgba(20,37,51,.93) 100%);
}
.clx-svc-page .svc-crm-why .crm-why-banner__inner {
  position:relative; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px 24px;
  width:100%;
}
.clx-svc-page .svc-crm-why .crm-why-banner__copy { width:100%; }
.clx-svc-page .svc-crm-why .crm-why-banner__eyebrow {
  /* inline-block, NOT block: the orange border must stop at the end of the text rather
     than running the full column width. This only holds because the eyebrow sits inside
     __copy — a flex container blockifies direct children and would force this to block. */
  display:inline-block;
  font-family:'Cabin',sans-serif; font-weight:600;
  font-size:11px; line-height:16.5px; letter-spacing:2px; text-transform:uppercase;
  color:#fff;
  /* the orange rule under the eyebrow. It is a BORDER on the eyebrow itself, not a
     separate element and not a ::after — measured off the ES aside banner, which uses
     padding-bottom:8px + border-bottom:2px solid #FA4900 with display:inline-block so the
     rule only runs as wide as the text. */
  padding:0 0 8px;
  border-bottom:2px solid #FA4900;
  margin:0 0 14px;
}
.clx-svc-page .svc-crm-why .crm-why-banner__heading {
  font-family:'Cabin',sans-serif; font-weight:700;
  font-size:22px; line-height:27.5px; letter-spacing:-.3px;
  color:#fff !important;      /* beats homepage.css `body.page .elementor h1..h6 {color:var(--hp-dark)!important}` */
  margin:0 0 12px;
}
.clx-svc-page .svc-crm-why .crm-why-banner__body {
  font-family:'DM Sans',sans-serif !important;   /* beats homepage.css `body.elementor-page .elementor-section * {font-family:var(--hp-font)!important}` */
  font-weight:400;
  font-size:13px; line-height:20.15px;
  color:rgba(255,255,255,.86); margin:0 0 16px;
}
.clx-svc-page .svc-crm-why .crm-why-banner__rule {
  display:block; height:1px; width:100%; max-width:520px;
  border:0; background:rgba(255,255,255,.18);
  margin:0 0 18px;
}
.clx-svc-page .svc-crm-why .crm-why-banner__trust { display:flex; gap:12px; flex-wrap:wrap; }
.clx-svc-page .svc-crm-why .crm-why-banner__trust-item { display:flex; flex-direction:column; gap:2px; }
.clx-svc-page .svc-crm-why .crm-why-banner__trust-num {
  font-family:'Cabin',sans-serif; font-weight:700;
  font-size:18px; line-height:18px; letter-spacing:-.3px;
  color:#fff;
}
.clx-svc-page .svc-crm-why .crm-why-banner__trust-label {
  font-family:'DM Sans',sans-serif !important;   /* same homepage.css wildcard as above */
  font-weight:400;
  font-size:10px; line-height:14px; letter-spacing:.4px; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
@media (max-width:900px){
  .clx-svc-page .crm-badge-grid { grid-template-columns:repeat(4,minmax(0,150px)); }
}

/* ===== PLATFORMS =======================================================
   No local CSS. The section is the shared clx-tp component used verbatim in the Zoho
   style (tabs + .clx-tp-cards logo tiles with hover popups); all of it ships from
   clx-svc-ai/parts/platforms-assets.php, which parts/platforms.php includes.
   Two earlier builds here DID need local CSS (a card pair, then a comparison table);
   both were replaced. If this section grows local rules again, check first whether the
   shared component already covers it. */
.clx-svc-page .svc-crm-platforms .svc-why-foot { margin-top:30px; }
/* per-category CTA inside a platform panel. ERP does this with .svc-plat-cta, but that
   rule is ERP-scoped CSS. flex is what right-aligns it: .svc-why-cta carries
   margin-left:auto, which needs a flex parent to push against. */
/* Link inside a platform popup. TWO things make it actually clickable:

   1. A HOVER BRIDGE ON THE CARD, not on the popup. The popup is visibility:hidden until
      .clx-tp-has-popup:hover fires, so a pseudo-element on the POPUP cannot catch the
      pointer — it is hidden at exactly the moment it is needed. Measured: the popup hid
      mid-traverse and the link was unreachable. The bridge therefore hangs off the CARD,
      which is always present, and fills the 10px gap the popup sits above.
      Once the pointer is inside the popup, hover holds on its own: the popup is a DOM
      child of the card, so :hover on the card stays true.
      The shared component puts no pseudo-elements on .clx-tp-card, so this adds rather
      than overrides.

   2. Scoped to .svc-crm-platforms so ERP, Zoho and the AI page keep their popups exactly
      as they are — none of them have links inside, so none need a bridge. */
.clx-svc-page .svc-crm-platforms .clx-tp-has-popup::after {
  content:'';
  position:absolute;
  left:0; right:0;
  bottom:100%;
  height:14px;            /* the 10px gap plus a little tolerance */
  pointer-events:auto;
}
/* at narrow widths the shared component flips the popup BELOW the card, so the gap moves
   to the other side */
@media (max-width:820px){
  .clx-svc-page .svc-crm-platforms .clx-tp-has-popup::after { bottom:auto; top:100%; }
}
/* The shared popup sets pointer-events:none, so it is decorative by design — every other
   page using clx-tp has text-only popups. Re-enabling it ONLY while the card is hovered is
   what makes a link inside reachable; leaving it off means the bridge is pointless because
   the popup itself still refuses the pointer. Measured before and after: without this the
   link is unreachable even with the bridge in place.
   Hover-scoped rather than blanket, so a hidden popup never intercepts a click. */
.clx-svc-page .svc-crm-platforms .clx-tp-has-popup:hover .clx-tp-card-popup { pointer-events:auto; }

.clx-svc-page .svc-crm-platforms .crm-tp-popup-cta {
  display:flex; align-items:center; justify-content:flex-end; gap:7px;
  margin-top:14px; padding-top:12px;
  border-top:1px solid #F1F1F1;
  width:100%;
  font-family:'DM Sans',sans-serif !important;
  font-size:13px; font-weight:700; letter-spacing:.3px;
  color:var(--svc-orange,#FA4900);
  /* NO text-decoration here. The underline belongs on the inner span, not the anchor:
     an underline on the <a> also runs under the ::after arrow, and text-decoration:none on
     a pseudo-element does not reliably cancel a parent's underline. This is exactly why
     the shared .svc-why-cta wraps its label in .svc-why-cta-t. */
  text-decoration:none;
}
.clx-svc-page .svc-crm-platforms .crm-tp-popup-cta-t {
  text-decoration:underline;
  text-underline-offset:4px;
}
.clx-svc-page .svc-crm-platforms .crm-tp-popup-cta::after { content:'\2192'; text-decoration:none; transition:transform .2s; }
.clx-svc-page .svc-crm-platforms .crm-tp-popup-cta:hover::after { transform:translateX(4px); }

/* ============================================================================
   COVERAGE MATRIX — ported from clx-svc-erp.css (the .svc-coverage block).
   Same class names and same .clx-svc-page scoping, so the two pages stay in
   visual lockstep. Only change: the score grid is 4 columns here, not 6,
   because CRM maps four platforms against ERP's six.
   body.wp-singular{overflow-x:clip} is deliberately global and comes across
   with its original comment: this sheet is slug gated to /crm-services/, so
   it cannot reach another page. Removing it breaks the sticky table head.
   ============================================================================ */
.clx-svc-page .svc-coverage .cvg-scorewrap{margin:34px 0 0;}
.clx-svc-page .svc-coverage .cvg-scorehd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px;flex-wrap:wrap;}
.clx-svc-page .svc-coverage .cvg-scorehd .t{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#757589;}
.clx-svc-page .svc-coverage .cvg-scorehd .h{font-family:'DM Sans',sans-serif;font-size:12px;color:#9a9ea7;}
.clx-svc-page .svc-coverage .cvg-scores{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.clx-svc-page .svc-coverage .cvg-score{text-align:left;background:#fff;border:1px solid #e0e0e6;border-radius:14px;padding:16px 15px;cursor:pointer;font-family:inherit;transition:.18s;display:flex;flex-direction:column;gap:9px;}
.clx-svc-page .svc-coverage .cvg-score:hover{border-color:#FA4900;box-shadow:0 10px 26px -14px rgba(250,73,0,.5);transform:translateY(-2px);}
.clx-svc-page .svc-coverage .cvg-score.on{border-color:#FA4900;background:#fff2e3;}
.clx-svc-page .svc-coverage .cvg-score .sc-name{font-family:'DM Sans',sans-serif;font-weight:700;font-size:14px;color:#142533;}
.clx-svc-page .svc-coverage .cvg-score .sc-big{display:flex;align-items:baseline;gap:6px;}
.clx-svc-page .svc-coverage .cvg-score .sc-big em{font-family:'Cabin',sans-serif;font-style:normal;font-weight:700;font-size:30px;letter-spacing:-1px;color:#FA4900;line-height:1;}
.clx-svc-page .svc-coverage .cvg-score .sc-big span{font-size:12px;color:#757589;font-weight:600;}
.clx-svc-page .svc-coverage .cvg-score .sc-bar{height:6px;border-radius:4px;background:#f0f0f3;overflow:hidden;}
.clx-svc-page .svc-coverage .cvg-score .sc-bar i{display:block;height:100%;background:linear-gradient(90deg,#ff9b6b,#fa4900);border-radius:4px;}
.clx-svc-page .svc-coverage .cvg-score .sc-break{display:flex;gap:10px;font-family:'DM Sans',sans-serif;font-size:10.5px;color:#8a8f99;flex-wrap:wrap;}

.clx-svc-page .svc-coverage .cvg-controls{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin:26px 0 16px;}
.clx-svc-page .svc-coverage .cvg-filters{display:inline-flex;background:#fff;border:1px solid #e6e6ea;border-radius:12px;padding:4px;gap:2px;box-shadow:0 2px 8px rgba(20,37,51,.04);flex-wrap:wrap;}
.clx-svc-page .svc-coverage .cvg-filter{appearance:none;border:0;background:transparent;cursor:pointer;font-family:'Cabin',sans-serif;font-size:14px;font-weight:600;color:#757589;padding:9px 15px;border-radius:9px;transition:.18s;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.clx-svc-page .svc-coverage .cvg-filter .cnt{font-size:11.5px;font-weight:600;background:#f0f0f3;border-radius:20px;padding:2px 8px;color:#6b7280;}
.clx-svc-page .svc-coverage .cvg-filter:hover{color:#142533;}
.clx-svc-page .svc-coverage .cvg-filter.is-active{color:#fff;background:linear-gradient(86deg,#ff7038,#fa4900);box-shadow:0 8px 18px -8px rgba(250,73,0,.6);}
.clx-svc-page .svc-coverage .cvg-filter.is-active .cnt{color:#fff;background:rgba(255,255,255,.24);}
.clx-svc-page .svc-coverage .cvg-legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-family:'Cabin',sans-serif;font-size:13px;color:#6b7280;}
.clx-svc-page .svc-coverage .cvg-lg{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none;padding:3px 4px;border-radius:6px;transition:.15s;}
.clx-svc-page .svc-coverage .cvg-lg:hover{color:#142533;}
.clx-svc-page .svc-coverage .cvg-lg.on{color:#142533;font-weight:600;}

/* visually-hidden helper (accessible cell labels + caption) — not defined in the shared
   sheet, so scope it here or the screen-reader text renders visibly inside every cell */
.clx-svc-page .svc-coverage .vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* level dots — brand-orange scale */
.clx-svc-page .svc-coverage .dot{display:inline-block;flex:none;}
.clx-svc-page .svc-coverage .dot.native{width:15px;height:15px;border-radius:50%;background:#FA4900;}
.clx-svc-page .svc-coverage .dot.app{width:15px;height:15px;border-radius:50%;background:#ff9b6b;}
.clx-svc-page .svc-coverage .dot.both{width:15px;height:15px;border-radius:50%;background:#FA4900;box-shadow:0 0 0 3px #fff,0 0 0 4.5px #ff9b6b;}
.clx-svc-page .svc-coverage .dot.limited{width:13px;height:4px;border-radius:2px;background:#b7bcc4;}
.clx-svc-page .svc-coverage .dot.none{width:12px;height:12px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1.5px #d0d3d9;}

/* scroll box — bounded height so the header + module column FREEZE (sticky) while rows
   scroll inside. scrollbar-gutter reserves the vertical bar so it can't induce a
   horizontal one; the table stays at container width, so no horizontal scroll on desktop.
   Horizontal scroll only appears below ~720px (table min-width). */
/* page-level sticky: no inner scroll box. body overflow-x:clip (scoped to this page only,
   loaded via clx-svc-erp.css) blocks page-level horizontal scroll WITHOUT creating a
   scroll container, so the header can pin against the page. --cvg-sticky-top clears the
   fixed nav on desktop; 0 on tablet/mobile where the nav isn't fixed. */
body.wp-singular{overflow-x:clip;overflow-y:visible;}
.clx-svc-page .svc-coverage{--cvg-sticky-top:101px;}
/* ERP page fills the full 1140 content width (no side inset) — scoped HERE (loads only on
   the ERP slugs) so the shared AI/low-code pages keep their 20px inset. Mobile keeps a
   16px gutter so content never touches the screen edge on phones. */
.clx-svc-page .svc-in{padding-left:0;padding-right:0;}
/* ...but keep the HERO inset (20px) like the AI/low-code heroes — only the body sections
   (coverage matrix etc.) need the full-width treatment. Keeps all service heroes aligned. */
.clx-svc-page.clx-svc-hero-only .svc-in{padding-left:20px;padding-right:20px;}
@media(max-width:720px){.clx-svc-page .svc-in{padding-left:16px;padding-right:16px;}}
.clx-svc-page .svc-coverage .cvg-scroll{overflow:visible;border:1px solid #eaeaea;border-radius:14px;background:#fff;box-shadow:0 10px 34px -20px rgba(20,37,51,.4);}
.clx-svc-page .svc-coverage .cvg-scroll::-webkit-scrollbar{width:9px;height:9px;}
.clx-svc-page .svc-coverage .cvg-scroll::-webkit-scrollbar-track{background:#f8f8f8;}
.clx-svc-page .svc-coverage .cvg-scroll::-webkit-scrollbar-thumb{background:#cfcfd6;border-radius:20px;border:2px solid #f8f8f8;}

.clx-svc-page .svc-coverage .cvg-mx{min-width:0;width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-family:'Cabin',sans-serif;}

/* header row — dark navy like the brief (sticky top; Claude 15/10/13 padding + meter) */
.clx-svc-page .svc-coverage .cvg-mx thead th{position:sticky;top:var(--cvg-sticky-top,101px);z-index:6;background:#16202e;color:#fff;font-weight:600;font-size:12px;padding:20px 12px 18px;text-align:center;vertical-align:bottom;border-left:1px solid rgba(255,255,255,.08)!important;}
.clx-svc-page .svc-coverage .cvg-mx thead th:not(.corner){width:13%;}
.clx-svc-page .svc-coverage .cvg-mx thead th.corner{text-align:left;z-index:7;left:0;background:#16202e;border-left:0!important;padding:20px 16px 18px;min-width:0;width:22%;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.clx-svc-page .svc-coverage .cvg-mx thead th .pname{display:block;font-size:13px;font-weight:700;letter-spacing:-.2px;color:#fff;line-height:1.2;}
.clx-svc-page .svc-coverage .cvg-mx thead th .pmeter{display:block;margin:8px auto 0;width:60px;height:5px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden;}
.clx-svc-page .svc-coverage .cvg-mx thead th .pmeter i{display:block;height:100%;background:linear-gradient(90deg,#ff9b6b,#fa4900);border-radius:3px;}
.clx-svc-page .svc-coverage .cvg-mx thead th .pnative{display:block;margin-top:5px;font-size:10.5px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.6);}
.clx-svc-page .svc-coverage .cvg-mx thead th.col-hi{background:#1e2c3d;}

/* group rows — our eyebrow style (Cabin, brand orange), sticky left (Claude spacing) */
.clx-svc-page .svc-coverage .cvg-mx .grouprow th{position:sticky;left:0;background:#fff;text-align:left;padding:20px 14px 9px;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#FA4900;z-index:2;}

/* body rows — nuke ALL theme/Elementor default cell borders (they add top/bottom/left
   lines that stack with adjacent cells + the box edge into visible DOUBLE lines), then
   re-assert only the dividers we want below. Row separation comes from row height + hover. */
.clx-svc-page .svc-coverage .cvg-mx th,
.clx-svc-page .svc-coverage .cvg-mx td{border:0!important;}
.clx-svc-page .svc-coverage .cvg-mx tbody tr.cvg-row:hover td,
.clx-svc-page .svc-coverage .cvg-mx tbody tr.cvg-row:hover th.rowh{background:#fdf5f0;}
.clx-svc-page .svc-coverage .cvg-mx td{padding:0;}
.clx-svc-page .svc-coverage .cvg-mx th.rowh{position:sticky;left:0;z-index:2;background:#fff;text-align:left;padding:0;min-width:0;width:22%;border-right:1px solid #eaeaea!important;}
/* the module column carries its own right border (the sticky edge); drop the first dot
   cell's left border so the two don't stack into a 2px double line */
.clx-svc-page .svc-coverage .cvg-mx th.rowh + td.cell{border-left:0!important;}
.clx-svc-page .svc-coverage .cvg-mx .rowbtn{display:flex;align-items:flex-start;gap:8px;width:100%;background:transparent;border:0;cursor:pointer;text-align:left;padding:12px 14px;font-family:'Cabin',sans-serif;font-weight:600;font-size:14.5px;line-height:1.28;color:#1a2236;}
.clx-svc-page .svc-coverage .cvg-mx .rowbtn .mname{min-width:0;overflow-wrap:break-word;}
.clx-svc-page .svc-coverage .cvg-mx .rowbtn .chev{flex:none;width:15px;height:15px;margin-top:2px;color:#b1b5be;transition:transform .18s;}
.clx-svc-page .svc-coverage .cvg-mx tr.cvg-row.is-open .rowbtn .chev{transform:rotate(90deg);color:#FA4900;}
.clx-svc-page .svc-coverage .cvg-mx .rowbtn:hover{color:#FA4900;}

/* cells (Claude spec: 52px) */
.clx-svc-page .svc-coverage .cvg-mx td.cell{text-align:center;border-left:1px solid #eaeaea!important;height:60px;position:relative;}
.clx-svc-page .svc-coverage .cvg-mx td.cell.col-hi{background:#fff9f5;}
.clx-svc-page .svc-coverage .cvg-mx td.cell .g{display:inline-flex;align-items:center;justify-content:center;transition:transform .15s,opacity .18s;}
.clx-svc-page .svc-coverage .cvg-mx td.cell:hover .g{transform:scale(1.28);}
.clx-svc-page .svc-coverage .cvg-mx.dimlv td.cell:not(.match) .g{opacity:.15;}
.clx-svc-page .svc-coverage .cvg-mx td.cell[data-note]::after{content:attr(data-note);position:absolute;bottom:calc(100% - 4px);left:50%;transform:translateX(-50%) translateY(6px);background:#142533;color:#fff;font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:500;line-height:1.35;white-space:normal;width:max-content;max-width:240px;padding:7px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;z-index:20;box-shadow:0 10px 24px -8px rgba(0,0,0,.4);}
.clx-svc-page .svc-coverage .cvg-mx td.cell[data-note]:hover::after{opacity:1;transform:translateX(-50%) translateY(0);}

/* detail row (expanded) — Claude spec: dinner 6/22/26, ddesc 15/24, dgrid gap 10 */
.clx-svc-page .svc-coverage .cvg-mx .detailrow td{padding:0;background:#fbfbfc;}
.clx-svc-page .svc-coverage .cvg-mx .dwrap{padding:6px 22px 26px;border-top:1px solid #eaeaea;text-align:left;}
.clx-svc-page .svc-coverage .cvg-mx .ddesc{font-family:'Cabin',sans-serif;font-size:15px;line-height:24px;color:#5f6672;margin:16px 0;max-width:80ch;text-align:left;}
.clx-svc-page .svc-coverage .cvg-mx .dgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:10px;}
.clx-svc-page .svc-coverage .cvg-mx .dcard{background:#fff;border:1px solid #e0e0e6;border-radius:12px;padding:13px 14px;display:flex;flex-direction:column;}
.clx-svc-page .svc-coverage .cvg-mx .dc-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.clx-svc-page .svc-coverage .cvg-mx .dc-plat{font-family:'DM Sans',sans-serif;font-weight:700;font-size:13px;color:#1a2236;}
.clx-svc-page .svc-coverage .cvg-mx .dc-lvl{font-family:'DM Sans',sans-serif;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em;}
.clx-svc-page .svc-coverage .cvg-mx .dc-lvl.native{color:#FA4900;}
.clx-svc-page .svc-coverage .cvg-mx .dc-lvl.both{color:#e0632a;}
.clx-svc-page .svc-coverage .cvg-mx .dc-lvl.app{color:#e07a3f;}
.clx-svc-page .svc-coverage .cvg-mx .dc-lvl.limited{color:#8b909a;}
.clx-svc-page .svc-coverage .cvg-mx .dc-lvl.none{color:#a7abb3;}
.clx-svc-page .svc-coverage .cvg-mx .dc-via{font-family:'Cabin',sans-serif;font-size:13.5px;color:#33475a;margin-top:3px;line-height:19px;}
.clx-svc-page .svc-coverage .cvg-mx .dc-src{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px;}
.clx-svc-page .svc-coverage .cvg-mx .dc-src a{font-family:'Cabin',sans-serif;font-size:11.5px;color:#33475a;background:#f7f7f8;border:1px solid #e0e0e6;border-radius:7px;padding:4px 8px;display:inline-flex;align-items:center;gap:6px;transition:.15s;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.clx-svc-page .svc-coverage .cvg-mx .dc-src a::before{content:"\2197";color:#FA4900;}
.clx-svc-page .svc-coverage .cvg-mx .dc-src a:hover{border-color:#FA4900;color:#FA4900;}

/* bridge line under the table — reframes gaps as our value-add */
.clx-svc-page .svc-coverage .cvg-bridge{margin:20px 0 0;padding-left:14px;border-left:3px solid #FA4900;font-family:'Cabin',sans-serif;font-size:16px;line-height:1.55;font-weight:600;color:#33475a;max-width:none;}

/* footnote — lead line + a definition key for the coverage levels */
.clx-svc-page .svc-coverage .cvg-foot{margin:18px 2px 0;font-family:'DM Sans',sans-serif;}
.clx-svc-page .svc-coverage .cvg-foot-lead{margin:0 0 12px;font-size:12.5px;line-height:1.6;color:#9a9ea7;max-width:100ch;}
.clx-svc-page .svc-coverage .cvg-foot-defs{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:0;padding:14px 0 0;border-top:1px solid #eaeaea;}
.clx-svc-page .svc-coverage .cvg-foot-def{display:flex;align-items:baseline;gap:8px;margin:0;font-size:12.5px;line-height:1.5;color:#8a8f99;}
.clx-svc-page .svc-coverage .cvg-foot-def dt{flex:none;display:inline-flex;align-items:center;gap:7px;font-weight:700;color:#33475a;white-space:nowrap;}
.clx-svc-page .svc-coverage .cvg-foot-def dt .dot{transform:scale(.72);}
.clx-svc-page .svc-coverage .cvg-foot-def dd{margin:0;}

/* tablet + down: nav isn't fixed, so pin the header to the very top */
@media(max-width:1024px){
  .clx-svc-page .svc-coverage{--cvg-sticky-top:0px;}
}
@media(max-width:720px){
  /* mobile: don't cram 6 columns into 390px. Make the box a scroll container with a
     comfortable min-width so it scrolls HORIZONTALLY, and bound its height so the header
     (top) + module column (left) FREEZE while you swipe inside it. Full names, no shrink. */
  .clx-svc-page .svc-coverage .cvg-scroll{overflow:auto;max-height:76vh;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#c9ccd3 transparent;}
  .clx-svc-page .svc-coverage .cvg-scroll::-webkit-scrollbar{width:7px;height:7px;}
  .clx-svc-page .svc-coverage .cvg-scroll::-webkit-scrollbar-track{background:transparent;}
  .clx-svc-page .svc-coverage .cvg-scroll::-webkit-scrollbar-thumb{background:#c9ccd3;border-radius:20px;}
  .clx-svc-page .svc-coverage .cvg-mx{min-width:660px;}
  .clx-svc-page .svc-coverage .cvg-mx thead th.corner,
  .clx-svc-page .svc-coverage .cvg-mx th.rowh{width:24%;}
  .clx-svc-page .svc-coverage .cvg-mx thead th:not(.corner){width:12.6%;}
  .clx-svc-page .svc-coverage .cvg-mx thead th{padding:16px 8px 13px;font-size:12px;}
  .clx-svc-page .svc-coverage .cvg-mx thead th .pname{font-size:12px;}
  .clx-svc-page .svc-coverage .cvg-mx thead th .pmeter{width:44px;}
  /* hover tooltips are desktop-only; on touch, tap a row to expand for the same detail */
  .clx-svc-page .svc-coverage .cvg-mx td.cell[data-note]::after,
  .clx-svc-page .svc-coverage .cvg-mx td.cell[data-note]:hover::after{display:none;}
  .clx-svc-page .svc-coverage .cvg-mx .rowbtn{font-size:13.5px;padding:12px 12px;}
  .clx-svc-page .svc-coverage .cvg-mx .dgrid{grid-template-columns:1fr 1fr;}
  .clx-svc-page .svc-coverage .cvg-controls{flex-direction:column;align-items:stretch;}
  .clx-svc-page .svc-coverage .cvg-scores{grid-template-columns:repeat(2,1fr);}  /* 4 platforms: 2x2 on tablet, not 3+1 */
}
@media(max-width:480px){
  .clx-svc-page .svc-coverage .cvg-mx .dgrid{grid-template-columns:1fr;}
  .clx-svc-page .svc-coverage .cvg-scores{grid-template-columns:repeat(2,1fr);}
}

/* Lead-in paragraph to table gap. This rule lives in clx-svc-zoho.css, not the shared
   clx-svc-ai.css, so cloning the Zoho engagement markup here inherited a 0px gap where
   /zoho-services/ renders 24px. Measured both pages side by side to find it. */
.clx-svc-page .svc-sec-intro + .svc-table{margin-top:24px;}

/* FAQ lead-in spacing. Second instance of the same trap as the table gap above:
   .svc-faq-intro lives ONLY in clx-svc-zoho.css (line 192), not in the shared
   clx-svc-ai.css, so porting the Zoho FAQ markup inherited margin-bottom 0 where
   /zoho-services/ renders 30px. When cloning a Zoho section, grep clx-svc-zoho.css
   for its classes before assuming the shared sheet covers them. */
.clx-svc-page .svc-faq-intro{margin:14px 0 30px;}