/* clx-svc-erp — deltas for the ERP page redesign.
   Base styling comes from the shared clx-svc-ai.css (.clx-svc-page / .svc-* /
   cx-4layer classes). Only ERP-only overrides live here. */

/* ERP engagement value-band — the team image is PORTRAIT (896x1200), so give the image
   column a narrower, taller (~3:4) shape instead of the landscape default, and let the
   copy column stretch to match with the stats pinned to the bottom. */
.clx-svc-page .svc-eng-erp .svc-eng-intro{grid-template-columns:1fr .52fr;align-items:stretch;}
/* gap:0 — spacing above the subhead now comes from the shared
   .svc-eng-subhead:not(:first-child) rule, so ERP and SEO match exactly. */
.clx-svc-page .svc-eng-erp .svc-eng-intro-copy{justify-content:flex-start;gap:0;}
.clx-svc-page .svc-eng-erp .svc-eng-lead{max-width:56ch;}   /* keep original .svc-sec-intro font (Cabin 18/28) */
.clx-svc-page .svc-eng-erp .svc-eng-stats{margin-top:6px;}
.clx-svc-page .svc-eng-erp .svc-eng-imgwrap{min-height:420px;}
.clx-svc-page .svc-eng-erp .svc-eng-imgwrap img{object-position:50% 22%;}
@media(max-width:900px){
  .clx-svc-page .svc-eng-erp .svc-eng-intro{grid-template-columns:1fr;}
  .clx-svc-page .svc-eng-erp .svc-eng-imgwrap{min-height:360px;}
}

/* ERP investment — "What Shapes Your ERP Cost" as a 2-col card grid (was a 10-row table;
   halves the vertical scroll while keeping the same copy). */
.clx-svc-page .svc-inv-factors{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;}
.clx-svc-page .svc-inv-fcard{border:1px solid #EAEAEA;border-radius:12px;padding:18px 20px;background:#fff;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;}
.clx-svc-page .svc-inv-fcard:hover{border-color:#FA4900;box-shadow:0 12px 28px -18px rgba(20,37,51,.4);transform:translateY(-2px);}
.clx-svc-page .svc-inv-ft{position:relative;padding-left:18px;font-family:'Cabin',sans-serif;font-weight:700;font-size:15px;color:#142533;margin:0 0 7px;line-height:1.3;}
.clx-svc-page .svc-inv-ft::before{content:"";position:absolute;left:0;top:5px;width:8px;height:8px;border-radius:3px;background:linear-gradient(135deg,#ff7a33,#FA4900);}
.clx-svc-page .svc-inv-fd{font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.55;color:#5C5C66;margin:0;padding-left:18px;}
@media(max-width:720px){.clx-svc-page .svc-inv-factors{grid-template-columns:1fr;}}

/* delivered-value banner — stack all pillar panels in ONE grid cell so the banner height
   stays constant across tabs (kills the resize/reflow + text tail); only the active panel
   shows. Also re-focus the landscape image on the team + laptop in its tall column. */
.clx-svc-page .svc-dv .svc-secpanels{display:grid;}
.clx-svc-page .svc-dv .svc-secpanel{grid-area:1 / 1;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease;}
.clx-svc-page .svc-dv .svc-secpanel.is-active{opacity:1;visibility:visible;pointer-events:auto;}
.clx-svc-page .svc-dv .svc-secpanel[hidden]{display:grid !important;}   /* keep in the cell for height */
.clx-svc-page .svc-dv .svc-secbanner-media img{object-position:56% 28%;}

/* ERP investment — full-width "relative platform cost" callout below the Project Sizes
   table: chips ordered low→high on a gradient track, with the </≤ operators visible. */
.clx-svc-page .svc-inv-foot{margin:16px 0 0;padding:18px 22px;background:#FAFAFB;border:1px solid #EAEAEA;border-left:3px solid #FA4900;border-radius:10px;max-width:none;}
.clx-svc-page .svc-inv-foot-head{font-family:'Cabin',sans-serif;font-weight:700;font-size:14.5px;color:#142533;margin:0 0 12px;}
.clx-svc-page .svc-inv-costbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.clx-svc-page .svc-inv-cost-end{font-family:'Cabin',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:#8A8A93;white-space:nowrap;flex:none;}
.clx-svc-page .svc-inv-cost-track{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1;flex-wrap:wrap;min-width:280px;padding:9px 16px;border-radius:999px;background:linear-gradient(90deg,#EAF7EE 0%,#FFF4E7 55%,#FFE6DA 100%);border:1px solid #F0E7E0;}
.clx-svc-page .svc-inv-cost-chip{font-family:'Cabin',sans-serif;font-weight:600;font-size:13.5px;color:#142533;background:#fff;border:1px solid #E4E4EA;border-radius:8px;padding:6px 13px;white-space:nowrap;box-shadow:0 1px 3px rgba(20,37,51,.06);}
.clx-svc-page .svc-inv-cost-op{font-family:'DM Sans',sans-serif;font-weight:700;color:#FA4900;font-size:14px;flex:none;}
.clx-svc-page .svc-inv-foot-note{font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.55;color:#8A8A93;margin:12px 0 0;}
@media(max-width:720px){
  .clx-svc-page .svc-inv-costbar{flex-direction:column;align-items:stretch;gap:8px;}
  .clx-svc-page .svc-inv-cost-end{text-align:center;}
  .clx-svc-page .svc-inv-cost-track{justify-content:center;}
}

/* ERP Platforms section — single-logo panel treatment (mirrors the low-code page, whose
   .svc-plat-solo CSS isn't loaded here). The .clx-tp-* tab chrome comes from the AI
   component's platforms-assets.php, included by the part. */
.clx-svc-page .svc-platforms .svc-platforms-wrap{margin-top:36px;}
.clx-svc-page .svc-platforms .svc-plat-solo{display:flex;align-items:center;justify-content:flex-start;min-height:104px;border:1px solid #ececf1;border-radius:14px;background:#fff;padding:22px 28px;margin:0 0 22px;}
.clx-svc-page .svc-platforms .svc-plat-solo img{max-height:64px;max-width:260px;width:auto;height:auto;object-fit:contain;display:block;}
.clx-svc-page .svc-platforms .svc-tp-panel-sub{font-family:'Cabin',sans-serif;font-size:15px;line-height:1.55;color:#727272;margin:6px 0 18px;max-width:640px;}

/* ============================================================================
   AGENTIC AI & GenAI section — SEDM intro, safeguards (numbered grid), and two
   card groups (GenAI value / Agentic automation), each card = title + desc + outcome.
   ========================================================================= */
.clx-svc-page .svc-agentic .svc-aic-subh{font-family:'Cabin',sans-serif;font-size:clamp(21px,2.2vw,26px);font-weight:700;line-height:1.25;letter-spacing:-.3px;color:var(--svc-ink,#142533);margin:34px 0 0;}
.clx-svc-page .svc-agentic .svc-aic-subh--sp{margin-top:56px;}
.clx-svc-page .svc-agentic .svc-aic-subintro{font-family:'DM Sans',sans-serif;font-size:16px;line-height:27px;color:var(--svc-body,#727272);margin:12px 0 0;max-width:80ch;}

/* safeguards arch-row — 2 columns on desktop: numbered bullets (left) + ledger animation
   (right); stacks below 821px. Scoped high-specificity so it wins over the ported base. */
.clx-svc-page .svc-agentic .clx-arch-row{margin-top:26px;}
@media(min-width:821px){
  .clx-svc-page .svc-agentic .clx-arch-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:center;}
  .clx-svc-page .svc-agentic .clx-arch-row__bullets{min-width:0;}
  .clx-svc-page .svc-agentic .clx-arch-row__anim{min-width:0;}
}

/* safeguards — numbered items in a responsive grid (reuses .svc-why-num circle) */
.clx-svc-page .svc-agentic .svc-guard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 28px;margin-top:22px;}
.clx-svc-page .svc-agentic .svc-guard{display:flex;align-items:flex-start;gap:14px;}
.clx-svc-page .svc-agentic .svc-guard .svc-why-num{margin-top:2px;}
.clx-svc-page .svc-agentic .svc-guard-t{font-family:'Cabin',sans-serif;font-size:15.5px;line-height:1.5;font-weight:500;color:var(--svc-ink-2,#33475a);margin:0;}

/* value/automation cards — title + desc + orange outcome line */
.clx-svc-page .svc-agentic .svc-aic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px;}
.clx-svc-page .svc-agentic .svc-aic{background:#fff;border:1px solid #e6e6ee;border-radius:16px;padding:28px 28px 24px;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s;}
.clx-svc-page .svc-agentic .svc-aic:hover{border-color:#FA4900;box-shadow:0 12px 30px -18px rgba(20,37,51,.35);transform:translateY(-2px);}
.clx-svc-page .svc-agentic .svc-aic-t{font-family:'Cabin',sans-serif;font-size:19px;font-weight:700;line-height:1.3;color:#142533;margin:0 0 11px;}
.clx-svc-page .svc-agentic .svc-aic-d{font-family:'Cabin',sans-serif;font-size:15px;line-height:26px;font-weight:400;color:#898D90;margin:0 0 18px;}
.clx-svc-page .svc-agentic .svc-aic-out{font-family:'Cabin',sans-serif;font-size:14.5px;line-height:1.5;font-weight:600;color:#33475a;margin:auto 0 0;padding-top:16px;border-top:1px solid #f0f0f3;display:flex;gap:9px;}
.clx-svc-page .svc-agentic .svc-aic-out .arr{color:#FA4900;font-weight:700;flex:none;}

@media(max-width:900px){
  .clx-svc-page .svc-agentic .svc-guard-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .clx-svc-page .svc-agentic .svc-guard-grid,
  .clx-svc-page .svc-agentic .svc-aic-grid{grid-template-columns:1fr;}
}

/* SEDM diagram — align its frame + boxes to the AI "System Design Approach" (cx-4layer):
   a peach PANEL stage (cx-4layer .cx-4layer__panel) so the white pill "cards" pop, with
   the pills restyled toward .cx-4layer__comp (white fill, peachy border, rounder, larger
   label). Overrides the ported widget's own inline styles via higher specificity so the
   widget itself stays verbatim. */
.clx-svc-page .clx-erp-spine .opt__stage{
  background:rgba(255,239,230,.5);        /* cx-4layer panel peach */
  border:1px solid rgba(250,73,0,.12);    /* cx-4layer panel border */
  border-radius:20px;
}
/* sub-step pills → cx-4layer card treatment */
.clx-svc-page .clx-erp-spine .s1-bullet-pill{stroke:#F4DDCF;stroke-width:1.2;rx:5px;}
.clx-svc-page .clx-erp-spine .s1-bullet-fill{rx:5px;}
.clx-svc-page .clx-erp-spine .s1-bullet-text{font-size:11px;fill:var(--ink);}
/* artifact boxes → same peachy card border (ember tick kept) */
.clx-svc-page .clx-erp-spine .s1-art{stroke:#F4DDCF;stroke-width:1.3;}
/* mobile pills too */
.clx-svc-page .clx-erp-spine .s1m__pill{border-color:#F4DDCF !important;}

/* "What Your Business Gains" — value-led text list (no cards): each pillar is a
   label + its you-facing payoff line, two columns, with a thin orange accent bar. */
.clx-svc-page .svc-value-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 56px;margin-top:16px;}
.clx-svc-page .svc-value-item{padding-left:16px;border-left:2px solid var(--svc-orange,#FA4900);}
.clx-svc-page .svc-value-label{display:block;font-family:'Cabin',sans-serif;font-weight:700;font-size:16.5px;line-height:1.3;color:var(--svc-ink,#142533);margin-bottom:7px;}
.clx-svc-page .svc-value-text{font-family:'Cabin',sans-serif;font-size:15px;line-height:1.58;color:#6B7280;margin:0;}
@media(max-width:720px){.clx-svc-page .svc-value-grid{grid-template-columns:1fr;gap:24px;}}

/* why-choose badges — NO ERP override. Use the shared clx-svc-ai.css treatment verbatim,
   identical to the AI + low-code pages (tall tile, object-fit:cover, edge-to-edge). */

/* ERP system-design banner — PHOTO-AS-TOP-BAND: heading + intro full width above, then a
   full-width banner with the ERP photo as a band across the top (too busy for text
   overlay) and the eyebrow/h3/copy/stats on the solid dark gradient below it. */
.clx-svc-page .svc-sysdesign .svc-sd-grid{display:block;}   /* drop the old 2-col split */
.clx-svc-page .svc-sysdesign .svc-sysbanner.erp-sysbanner-band{padding:0;margin-top:36px;}
.clx-svc-page .svc-sysdesign .erp-sysbanner-photo{height:420px;overflow:hidden;position:relative;z-index:1;}
.clx-svc-page .svc-sysdesign .erp-sysbanner-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;}
/* scrim: photo fades into the dark body — clear at top, darkening only in the lower
   third so the fade-to-solid passes through torsos, not the seated faces/necks */
.clx-svc-page .svc-sysdesign .erp-sysbanner-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(15,28,39,0) 0%,rgba(15,28,39,0) 48%,rgba(15,28,39,.45) 74%,#0f1c27 100%);}
.clx-svc-page .svc-sysdesign .erp-sysbanner-body-wrap{position:relative;z-index:1;padding:0 56px 46px;margin-top:-2px;}
.clx-svc-page .svc-sysdesign .erp-sysbanner-band .svc-sysbanner-body{max-width:none;}
.clx-svc-page .svc-sysdesign .erp-sysbanner-band .svc-sysbanner-h{max-width:840px;}
@media(max-width:720px){
  .clx-svc-page .svc-sysdesign .erp-sysbanner-photo{height:260px;}
  .clx-svc-page .svc-sysdesign .erp-sysbanner-body-wrap{padding:26px 22px 32px;}
}

/* ============================================================================
   ERP COVERAGE MATRIX — re-skinned into our gray-table language.
   Level dots use the brand-orange scale; header/borders follow the blog gray-table
   convention (#f8f8f8 header, #eaeaea borders, white card). Bounded scroll box so
   the header (top) + module column (left) both pin while rows scroll inside it.
   ========================================================================= */
/* native-coverage score cards (Claude spec, our colors / no mono) */
.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(6,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(3,1fr);}
}
@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);}
}


/* ==== Agentic/GenAI rich components (safeguards ledger animation + image tabs) —
   copied from site-wide.css so the redesign stays self-contained (unique BEM names,
   no collisions). Markup + inline JS ported in blocks/*.html. ==== */
.page-partnership .clx-pa-bullets .clx-bullet-num {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  flex-shrink: 0 !important;
  background: #E8491D;
  color: #FFFFFF !important;
  border-radius: 50%;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  margin-top: 4px;
}
.page-partnership .clx-pa-bullets .clx-bullet-body {
  flex: 1 1 auto;
}
.page-partnership .clx-pa-bullets .clx-bullet-body strong {
  font-weight: 700 !important;
  color: #1C1E21 !important;
}
/* Partnership "What Clixlogix Brings to the Table" bullet typography —
   match the about-us icon-list bullet style: DM Sans 15/26, color #898D90,
   regular weight, with bold lead phrase via <strong>. Scoped to the
   bullet paragraphs ONLY (2nd <p> onwards) so the intro paragraph keeps
   its inherited page-body typography. */
.clx-brings-to-table p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
  color: #898D90 !important;
  margin: 0 0 18px 0 !important;
}
.clx-brings-to-table p:last-child {
  margin-bottom: 0 !important;
}
.clx-brings-to-table p strong {
  font-weight: 700 !important;
  color: #1C1E21 !important;
}
.clx-brings-to-table p {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}
.clx-brings-to-table .clx-bullet-num {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  flex-shrink: 0 !important;
  background: #E8491D;
  color: #FFFFFF !important;
  border-radius: 50%;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  margin-top: 4px;
}
.clx-brings-to-table .clx-bullet-body {
  flex: 1 1 auto;
}
.clx-brings-to-table h2 {
  margin: 0 0 16px 0 !important;
}
/* ai-software page: vertically center the bullets list column relative to
   the right-side 8-box logo stack + stats. Bullets text stays left-aligned;
   only the block as a whole moves to the vertical middle. */
.page-ai-software-application-development .elementor-column:has(> .elementor-element-populated .clx-brings-to-table) > .elementor-element-populated,
.page-erp-services .elementor-column:has(> .elementor-element-populated .clx-brings-to-table) > .elementor-element-populated,
.page-erp-services .elementor-column:has(> .elementor-element-populated .clx-bullets-ph1) > .elementor-element-populated {
  justify-content: center !important;
}
.page-partnership .clx-bullets-grid-col > .elementor-element-populated {
    display: grid !important;
    grid-template-columns: 60% 40% !important;
    grid-template-areas:
      'intro intro'
      'bullets ph1'
      'bullets ph2' !important;
    column-gap: 28px !important;
    /* row-gap removed — universal .clx-bullets-ph1 + .clx-bullets-ph2
       margin-top now handles the gap consistently across pages. */
  }
.page-partnership .clx-bullets-grid-col .clx-bullets-intro    { grid-area: intro;   }
.page-partnership .clx-bullets-grid-col .clx-brings-to-table  { grid-area: bullets; }
.page-partnership .clx-bullets-grid-col .clx-bullets-ph1      { grid-area: ph1;     }
.page-partnership .clx-bullets-grid-col .clx-bullets-ph2      { grid-area: ph2;     }
/* Placeholder cards — each grows to fill its grid cell so on desktop the
   two boxes share the full height of the bullets column. */
.clx-bullets-ph1,
.clx-bullets-ph2 {
  display: flex !important;
  align-self: stretch;
}
/* Universal vertical spacing between ph1 (logo grid) and ph2 (stats row)
   when they're adjacent siblings (ai-software-application-development
   layout). On partnership, grid row-gap also handles spacing but this
   gives consistent ~20px gap regardless of layout container. */
.clx-bullets-ph1 + .clx-bullets-ph2 {
  margin-top: 20px;
}
.page-partnership .clx-bullets-ph1 > .elementor-widget-container,
.page-partnership .clx-bullets-ph2 > .elementor-widget-container {
  flex: 1 1 auto !important;
  display: flex !important;
  width: 100% !important;
}
.page-partnership .clx-bullets-aside-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: 220px;
  background: #F5F6F8;
  border: 1px dashed #C7CACE;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #898D90;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
/* erp-services GenAI tabs — replaces the old 4-card grid for "Where
   GenAI Adds Value Inside Your ERP". Pattern modeled on the
   .clx-eng-tabs widget on /how-we-work/ but namespaced .clx-erp-genai-*
   so it can hold a screenshot panel below the tab nav. Auto-advances
   every 8s on idle (JS), pauses on user click. */
.clx-erp-genai-tabs-wrap {
  width: 100%;
  margin: 24px 0 0;
}
.clx-erp-genai-tabs__hint {
  font-family: 'JetBrains Mono', 'DM Sans', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #8E8E93;
  text-align: center;
  margin: 0 auto 12px;
  text-transform: uppercase;
}
.clx-erp-genai-tabs {
  display: flex;
  gap: 18px;
  max-width: 1140px;
  margin: 0 auto 28px;
  padding: 0 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.clx-erp-genai-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  user-select: none;
  font: inherit;
  color: inherit;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.clx-erp-genai-tab::after {
  content: '';
  position: absolute;
  left: 38px;
  right: 4px;
  bottom: 0;
  height: 2px;
  background: #FA4900;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(.6, .01, .25, 1);
}
.clx-erp-genai-tab.is-active::after { transform: scaleX(1); }
.clx-erp-genai-tab__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #EFEFEF;
  color: #B0B0B0;
  font-family: 'Cabin', sans-serif;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.clx-erp-genai-tab__label {
  font-family: 'Cabin', sans-serif;
  font-size: 15px;
  color: #6B7280;
  font-weight: 500;
  line-height: 1.3;
  transition: color 0.2s ease, font-weight 0.2s ease;
}
.clx-erp-genai-tab__cue { display: none; }
/* removed — eats horizontal space */
.clx-erp-genai-tab:hover .clx-erp-genai-tab__label { color: #1C1E21; }
.clx-erp-genai-tab.is-active .clx-erp-genai-tab__num { background: #E8491D; color: #FFFFFF; }
.clx-erp-genai-tab.is-active .clx-erp-genai-tab__label { color: #1C1E21; font-weight: 700; }
.clx-erp-genai-tab.is-active .clx-erp-genai-tab__cue { display: none; }
.clx-erp-genai-panels { position: relative; }
.clx-erp-genai-panel[hidden] { display: none; }
.clx-erp-genai-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  background: #F8F8F8;
  border: 1px solid #E8E8E8;
  border-radius: 14px;
  padding: 20px;
  max-width: 1140px;
  margin: 0 auto;
}
.clx-erp-genai-panel__media {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #E8E8E8;
}
.clx-erp-genai-panel__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.clx-erp-genai-panel__copy { padding: 4px 6px 8px; }
.clx-erp-genai-panel__title {
  font-family: 'Cabin', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1C1E21;
  margin: 0 0 10px;
  line-height: 1.25;
}
.clx-erp-genai-panel__body {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #3D5266;
  margin: 0 0 14px;
}
.clx-erp-genai-panel__impact {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #1C1E21;
  margin: 0;
  padding: 12px 14px;
  background: #FFF6F1;
  border-left: 3px solid #FA4900;
  border-radius: 0 6px 6px 0;
}
.clx-erp-genai-panel__impact-arrow {
  color: #FA4900;
  font-weight: 700;
  margin-right: 6px;
}
.clx-erp-genai-tab__label { font-size: 14px; }
.clx-erp-genai-tabs { gap: 14px; }
.clx-erp-genai-tab { gap: 8px; }
.clx-erp-genai-tabs { gap: 12px; }
.clx-erp-genai-tab__label { font-size: 13px; }
.clx-erp-genai-tabs__hint { font-size: 10px; }
.clx-erp-genai-panel__title { font-size: 19px; }
.clx-erp-genai-tab__label { display: none; }
/* show numbers only on phone */
  .clx-erp-genai-tab::after { left: 0; }
.clx-erp-genai-tabs { gap: 14px; }
/* =========================================================
   Architecture Decisions section — bullets (60%) + V2
   Layered Stack animation (40%) side-by-side. Animation
   from Claude Design export "AI Architecture Animations -
   Options.html" (V2Stack), converted to vanilla HTML/CSS/JS.
   Scoped under .clx-arch-row + .clx-arch-anim.
   ========================================================= */
.clx-arch-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.clx-arch-row__bullets { min-width: 0; }
/* ---------------------------------------------------------------
   ERP "AI adoption safeguards" — Approval Ledger animation.
   Sits in .clx-arch-row__anim slot. Compact compliance log: 6 rows,
   each = one safeguard, cycling PENDING → CHECKING → APPROVED.
   Header bar fills as rows clear. 12s loop. Reduced-motion freezes
   on 6/6 cleared. From Claude Design export "AI Safeguards -
   --------------------------------------------------------------- */
  /* Token block — same palette as .clx-arch-anim. Declared here too
     so the ledger doesn't depend on .clx-arch-anim being a sibling
     for variable resolution. */
  --clx-arch-label: #142533;
  --clx-arch-label-secondary: #898D90;
  --clx-arch-mute: #898D90;
  --clx-arch-line: #E8E8E8;
  --clx-arch-row-bg: #F8F8F8;
  --clx-arch-accent: #E8611A;
  --clx-arch-accent-dark: #C94E10;
  --loop: 12s;
  font-family: 'DM Sans', sans-serif;
  width: 100%;
  max-width: 460px;
  margin: 0 0 0 auto;  /* anchor right within column so it reaches design width */
}
  position: relative;
  aspect-ratio: 380 / 340;  /* taller — gives each row ~52px breathing room */
  background: #fff;
  border: 1px solid var(--clx-arch-line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--clx-arch-line);
  background: var(--clx-arch-row-bg);
}
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--clx-arch-mute);
  text-transform: uppercase;
}
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--clx-arch-label);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
  width: 72px;
  flex: 0 0 72px;
  height: 4px;
  background: var(--clx-arch-line);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--clx-arch-accent);
  animation: clxLdgrBar var(--loop) cubic-bezier(.5, 0, .5, 1) infinite;
}
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  color: var(--clx-arch-accent);
  display: inline-block;
  min-width: 6px;
}
  flex: 1;
  display: flex;
  flex-direction: column;
}
  flex: 1;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--clx-arch-line);
  position: relative;
  overflow: hidden;
  animation: clxLdgrRowBg var(--loop) ease-in-out infinite;
}
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--clx-arch-mute);
  text-transform: uppercase;
}
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--clx-arch-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Badge style is driven by data-state attribute set from JS — avoids
   browser inconsistencies with `content` keyframe animations. */
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  border: 1px solid var(--clx-arch-line);
  background: #fff;
  color: var(--clx-arch-mute);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
  color: var(--clx-arch-accent);
  border-color: var(--clx-arch-accent);
  background: #fff;
}
  color: #fff;
  border-color: var(--clx-arch-accent);
  background: var(--clx-arch-accent);
}
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: nowrap;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid var(--clx-arch-line);
  border-radius: 8px;
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  color: var(--clx-arch-label);
}
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--clx-arch-mute);
  text-transform: uppercase;
  white-space: nowrap;
}
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--clx-arch-label);
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
}
    color: #fff !important;
    border-color: var(--clx-arch-accent) !important;
    background: var(--clx-arch-accent) !important;
  }
.clx-arch-row__anim { min-width: 0; display: flex; justify-content: center; align-items: center; }
.clx-arch-row { grid-template-columns: 1fr; gap: 28px; }
.clx-arch-row__anim { order: 2; }
/* ===== "What we commit to" — uses the .clx-brings-to-table pattern
   (numbered orange circles) — same chrome as the bullets under "Why
   Companies Choose Clixlogix" on /ai-software-application-development/.
   No new bullet style needed here; only the wrapper spacing + CTA. ===== */
body.page-id-13359 .career-commitments-inline {
  margin: 24px 0 0;
}
/* Normalize ALL body paragraph text on the career page to the canonical
   inner-page services style (DM Sans 18/28 #898D90 — same as the "Most
   A.I. initiatives struggle…" paragraph on /ai-software-application-development/).
   Beats the parent theme's .page-career p overrides (which force 20-22px).
   Covers:
     - .elementor-widget-text-editor <p> (hero paragraph + Life At copy)
     - .svc-card-desc inside .clx-blog-card doorway tiles
   Leaves alone:
     - .clx-brings-to-table p (numbered bullets keep their own size)
     - .career-bottom-cta p (white CTA chrome)
*/
body.page-id-13359 section .elementor-widget-text-editor p,
body.page-id-13359 section .elementor-widget-text-editor .elementor-widget-container p,
body.page-id-13359 .clx-blog-card .svc-card-desc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  color: #898D90 !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width: 1025px) {
  .page-partnership .clx-bullets-grid-col > .elementor-element-populated {
    display: grid !important;
    grid-template-columns: 60% 40% !important;
    grid-template-areas:
      'intro intro'
      'bullets ph1'
      'bullets ph2' !important;
    column-gap: 28px !important;
    /* row-gap removed — universal .clx-bullets-ph1 + .clx-bullets-ph2
       margin-top now handles the gap consistently across pages. */
  }
  .page-partnership .clx-bullets-grid-col .clx-bullets-intro    { grid-area: intro;   }
  .page-partnership .clx-bullets-grid-col .clx-brings-to-table  { grid-area: bullets; }
  .page-partnership .clx-bullets-grid-col .clx-bullets-ph1      { grid-area: ph1;     }
  .page-partnership .clx-bullets-grid-col .clx-bullets-ph2      { grid-area: ph2;     }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .clx-erp-genai-tab__label { font-size: 14px; }
  .clx-erp-genai-tabs { gap: 14px; }
  .clx-erp-genai-tab { gap: 8px; }
}

@media (max-width: 900px) {
  .clx-erp-genai-tabs { gap: 12px; }
  .clx-erp-genai-tab__label { font-size: 13px; }
  .clx-erp-genai-tabs__hint { font-size: 10px; }
  .clx-erp-genai-panel__title { font-size: 19px; }
}

@media (max-width: 600px) {
  .clx-erp-genai-tab__label { display: none; }  /* show numbers only on phone */
  .clx-erp-genai-tab::after { left: 0; }
  .clx-erp-genai-tabs { gap: 14px; }
}

@media (max-width: 768px) {
}

@media (prefers-reduced-motion: reduce) {
    color: #fff !important;
    border-color: var(--clx-arch-accent) !important;
    background: var(--clx-arch-accent) !important;
  }
}

@media (max-width: 960px) {
  .clx-arch-row { grid-template-columns: 1fr; gap: 28px; }
  .clx-arch-row__anim { order: 2; }
}

/* ==== AI Safeguards — Approval Ledger animation (Claude Design "AI Safeguards - Approval
   Ledger.html"). Pure-CSS status cycling: badge text via ::before content keyframes, so it
   RESETS cleanly every 12s loop (fixes the old JS-driven desync). JS only ticks the N/6
   counter. Self-contained (no site-wide.css dependency). ==== */
  --loop:12s;
  --clx-arch-label:#142533; --clx-arch-mute:#898D90; --clx-arch-line:#E8E8E8;
  --clx-arch-row-bg:#F8F8F8; --clx-arch-accent:#FA4900;
  font-family:'DM Sans',sans-serif; width:100%; max-width:440px; margin:0;
}
@media (max-width:768px){
}
@media (prefers-reduced-motion: reduce){
}

/* ==== AI Safeguards — Approval Ledger (JS-driven strict sequence). Each control cycles
   pending -> checking (highlighted) -> approved; the next starts only when the previous
   finishes; counter ticks as each clears; clean reset after 6/6. Styling from the Claude
   Design file; JS state machine in blocks/safeguards.html. Self-contained. ==== */
.clx-erp-safeguards-ledger{
  --loop:12s;
  --clx-arch-label:#142533; --clx-arch-mute:#898D90; --clx-arch-line:#E8E8E8;
  --clx-arch-row-bg:#F8F8F8; --clx-arch-accent:#FA4900;
  font-family:'DM Sans',sans-serif; width:100%; max-width:440px; margin:0;
}
.clx-erp-safeguards-ledger__viz{position:relative;aspect-ratio:380 / 280;background:#fff;border:1px solid var(--clx-arch-line);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;}
.clx-erp-safeguards-ledger__head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--clx-arch-line);background:var(--clx-arch-row-bg);}
.clx-erp-safeguards-ledger__head-label{font-family:'Cabin',sans-serif;font-weight:500;font-size:11px;letter-spacing:1.2px;color:var(--clx-arch-mute);text-transform:uppercase;}
.clx-erp-safeguards-ledger__head-progress{font-family:'Cabin',sans-serif;font-weight:500;font-size:11px;letter-spacing:1px;color:var(--clx-arch-label);text-transform:uppercase;display:flex;align-items:center;gap:10px;}
.clx-erp-safeguards-ledger__bar{width:60px;height:4px;background:var(--clx-arch-line);border-radius:2px;overflow:hidden;position:relative;}
.clx-erp-safeguards-ledger__bar i{display:block;height:100%;width:0;background:var(--clx-arch-accent);border-radius:2px;transition:width .4s ease;}
.clx-erp-safeguards-ledger__count b{font-family:'Cabin',sans-serif;font-weight:700;color:var(--clx-arch-accent);display:inline-block;min-width:6px;}
.clx-erp-safeguards-ledger__rows{flex:1;display:flex;flex-direction:column;}
/* kill the OLD site-wide.css ledger CSS-animations (peach row pulse + ::after bar fill)
   that still load on the page; this build is fully JS-driven */
.clx-erp-safeguards-ledger__row,
.clx-erp-safeguards-ledger__badge,
.clx-erp-safeguards-ledger__badge::before,
.clx-erp-safeguards-ledger__bar::after{animation:none !important;}
.clx-erp-safeguards-ledger__bar::after{content:none !important;display:none !important;}
.clx-erp-safeguards-ledger__badge::before{content:none !important;}
.clx-erp-safeguards-ledger__row{flex:1;display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:0 14px;border-bottom:1px solid var(--clx-arch-line);}
.clx-erp-safeguards-ledger__row:last-child{border-bottom:none;}
.clx-erp-safeguards-ledger__id{font-family:'Cabin',sans-serif;font-weight:500;font-size:10px;letter-spacing:1.2px;color:var(--clx-arch-mute);text-transform:uppercase;}
.clx-erp-safeguards-ledger__name{font-family:'DM Sans',sans-serif;font-size:12.5px;line-height:1.35;color:var(--clx-arch-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.clx-erp-safeguards-ledger__badge{font-family:'Cabin',sans-serif;font-weight:500;font-size:9px;letter-spacing:1.2px;text-transform:uppercase;padding:3px 7px;border-radius:3px;border:1px solid var(--clx-arch-line);white-space:nowrap;}
.clx-erp-safeguards-ledger__badge[data-state="pending"]{color:var(--clx-arch-mute);border-color:var(--clx-arch-line);background:#fff;}
.clx-erp-safeguards-ledger__badge[data-state="checking"]{color:var(--clx-arch-accent);border-color:var(--clx-arch-accent);background:#fff;}
.clx-erp-safeguards-ledger__badge[data-state="approved"]{color:#fff;border-color:var(--clx-arch-accent);background:var(--clx-arch-accent);}
.clx-erp-safeguards-ledger__rail{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:10px 14px;border:1px solid var(--clx-arch-line);border-radius:8px;background:#fff;font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--clx-arch-label);}
.clx-erp-safeguards-ledger__rail-label{font-family:'Cabin',sans-serif;font-weight:500;font-size:11px;letter-spacing:1.2px;color:var(--clx-arch-mute);text-transform:uppercase;}
.clx-erp-safeguards-ledger__rail-now{font-family:'Cabin',sans-serif;font-weight:500;font-size:11px;letter-spacing:1px;color:var(--clx-arch-label);text-transform:uppercase;}
@media (max-width:768px){
  .clx-erp-safeguards-ledger{max-width:100%;}
  .clx-erp-safeguards-ledger__viz{max-height:300px;}
  .clx-erp-safeguards-ledger__name{font-size:14px;}
  .clx-erp-safeguards-ledger__id{font-size:11px;}
  .clx-erp-safeguards-ledger__badge{font-size:10px;padding:4px 8px;}
}

/* ---------------------------------------------------------------------------
   TOC FAB live section label — on 12"/13" laptops + smaller (where the side
   TOC is hidden, <1548px) the FAB expands into a pill that broadcasts the
   current section as you scroll. Circular (icon-only) until a section is active.
   --------------------------------------------------------------------------- */
.clx-svc-page .svc-toc-fab .svc-toc-fab-cur{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  line-height:1.1;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;text-align:left;
  transition:max-width .34s cubic-bezier(.4,0,.2,1),opacity .26s ease,padding .34s ease;
}
.clx-svc-page .svc-toc-fab.has-cur{width:auto;border-radius:21px;padding:0 13px 0 2px;gap:6px;justify-content:flex-start;}
.clx-svc-page .svc-toc-fab.has-cur > svg{flex:none;margin-left:6px;}
.clx-svc-page .svc-toc-fab.has-cur .svc-toc-fab-cur{max-width:148px;opacity:1;padding-left:5px;}
.clx-svc-page .svc-toc-fab .svc-toc-fab-cur .n{font-size:8px;font-weight:700;letter-spacing:.1em;opacity:.78;text-transform:uppercase;}
.clx-svc-page .svc-toc-fab .svc-toc-fab-cur .t{font-size:11.5px;font-weight:600;letter-spacing:-.1px;max-width:140px;overflow:hidden;text-overflow:ellipsis;}