/* =====================================================================
   clx-svc-vibe  —  Service-page redesign family (AI page is first consumer)
   Scoped component library. EVERY rule is scoped under `.clx-svc-page`
   so nothing leaks in/out. Loaded only on opted-in slugs via functions.php.
   NOTHING here goes into site-wide.css.

   This file: base layout scaffold + TOC overlay + HERO section.
   Later sections append below under the same `.clx-svc-page` scope.
   ===================================================================== */

.clx-svc-page{
  /* tokens */
  --svc-orange:#FA4900;
  --svc-orange-2:#ff7a33;
  --svc-orange-soft:#fff2e3;
  --svc-ink:#142533;
  --svc-ink-2:#33475a;
  --svc-muted:#757589;
  --svc-body:#727272;
  --svc-line:#ececf0;
  --svc-line-2:#e0e0e6;
  --svc-paper:#f7f7f8;

  font-family:'Cabin',system-ui,-apple-system,sans-serif;
  color:var(--svc-ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.clx-svc-page *{box-sizing:border-box;}

/* ---- shell / section rhythm: 1140 container, 80px spacing, hairline dividers ---- */
.clx-svc-page .svc-in{max-width:1140px;margin:0 auto;padding:0 20px;}
/* section separators = a CENTERED, content-width hairline (like the concept, NOT full-bleed) */
.clx-svc-page .svc-sec{position:relative;padding:80px 0;}
.clx-svc-page .svc-sec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1100px,calc(100% - 40px));height:1px;background:var(--svc-line);}
.clx-svc-page .svc-hero::before,
.clx-svc-page .svc-approach::before{display:none;}   /* hero (first) + approach (marquee divides it) */

/* ---- shared section header bits (used by later sections) ---- */
.clx-svc-page .svc-kick{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--svc-orange);}
.clx-svc-page .svc-kick::before{content:"";width:24px;height:2px;background:var(--svc-orange);border-radius:2px;}
.clx-svc-page .svc-h2{font-family:'Cabin',sans-serif;font-size:clamp(32px,3.6vw,52px);line-height:1.08;letter-spacing:-.03em;font-weight:500;color:var(--svc-ink);margin:15px 0 20px;text-wrap:balance;}
.clx-svc-page .svc-lead{font-family:'Cabin',sans-serif;font-size:18px;color:var(--svc-body);margin:12px 0 0;line-height:28px;}

/* ---- hero buttons: REUSE the homepage hero button (.clxc-btn / .clxc-btn-ghost).
   That style is defined inline-only in inc/clx-directionc-hero.php (homepage), so it
   is mirrored here VERBATIM (CSS vars resolved to their homepage values) — not a new
   button style, just the homepage's, so the two stay consistent. Scoped to this page. ---- */
.clx-svc-page .clxc-btn{display:inline-flex;align-items:center;justify-content:center;background:#FA4900;color:#fff;text-decoration:none;font-family:'Cabin',sans-serif;font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;padding:10px 22px;border-radius:8px;box-shadow:0 6px 16px rgba(250,73,0,.22);transition:background .25s ease,transform .2s ease,box-shadow .2s ease;text-align:center;}
.clx-svc-page .clxc-btn:hover{background:#e0440b;transform:translateY(-2px);box-shadow:0 14px 30px rgba(250,73,0,.36);color:#fff;}
.clx-svc-page .clxc-btn:active{background:#a83c08;transform:translateY(0);box-shadow:0 8px 18px rgba(250,73,0,.32);}
.clx-svc-page .clxc-btn-ghost{background:#fff;color:#111120;border:1.5px solid #e6e6ee;box-shadow:0 6px 16px rgba(20,20,40,.06);}
.clx-svc-page .clxc-btn-ghost:hover{background:#fff;border-color:#FA4900;color:#FA4900;transform:translateY(-2px);box-shadow:0 12px 26px rgba(20,20,40,.10);}
.clx-svc-page .clxc-btn-ghost:active{transform:translateY(0);box-shadow:0 4px 12px rgba(20,20,40,.08);}

/* =====================================================================
   TOC — floating overlay in the RIGHT auto-margin.
   Content stays full 1140; TOC reserves no space and only shows when the
   right margin can hold it (viewport >= ~1548px). No content narrowing.
   ===================================================================== */
.clx-svc-page .svc-toc{
  position:fixed;top:50%;transform:translateY(-50%);
  /* sit inside the right auto-margin: right edge ~24px from viewport */
  right:24px;width:184px;max-height:82vh;overflow:auto;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border:1px solid var(--svc-line-2);border-radius:14px;padding:16px;
  box-shadow:0 14px 34px rgba(20,20,40,.1);z-index:40;display:none;
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
}
@media (min-width:1548px){ .clx-svc-page .svc-toc{display:block;} }
.clx-svc-page .svc-toc.is-visible{opacity:1;visibility:visible;}
.clx-svc-page .svc-toc .svc-toc-h{font-family:'Cabin',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--svc-muted);margin-bottom:10px;display:flex;align-items:center;gap:7px;}
.clx-svc-page .svc-toc .svc-toc-h::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--svc-orange);}
.clx-svc-page .svc-toc a{display:flex;gap:9px;font-size:13px;color:var(--svc-muted);padding:6px 8px;border-radius:7px;align-items:baseline;transition:.15s;text-decoration:none;}
.clx-svc-page .svc-toc a .i{font-family:'Cabin',sans-serif;font-size:11px;font-weight:600;opacity:.7;}
.clx-svc-page .svc-toc a:hover{background:var(--svc-paper);color:var(--svc-ink);}
.clx-svc-page .svc-toc a.on{background:var(--svc-orange-soft);color:#b5390a;font-weight:600;}

/* =====================================================================
   HERO
   ===================================================================== */
.clx-svc-page .svc-hero{padding:44px 0 40px;border-top:none;}
.clx-svc-page .svc-crumbs{margin-bottom:22px;}
.clx-svc-page .svc-hero-g{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:start;}   /* top-align both columns: eyebrow sits right under the breadcrumb regardless of copy length or form height (no centering push-down) */
/* Normalize the Elementor column/container padding around the scoped hero. The AI page's
   column was built with padding zeroed; ERP + low-code + the L3 hero-swap pages inherited
   Elementor's default 10px column padding (and a 20px container gap on low-code), which
   offset the hero 10px down and in from the sides. Strip it so every service-page hero
   sits at the identical top offset and full width. */
.elementor-column-gap-default > .elementor-column > .elementor-element-populated:has(.svc-hero){padding:0 !important;}
.clx-svc-page .svc-hero-left{display:flex;flex-direction:column;justify-content:center;}
.clx-svc-page .svc-hero-top{margin-bottom:0;}

.clx-svc-page .svc-eyebrow{
  font-family:'Cabin',sans-serif;font-size:22px;font-weight:700;line-height:36px;
  background:linear-gradient(90deg,#ff9900 0%,#f57e07 40%,#ef4e07 75%,#fa4900 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-bottom:2px;
}
.clx-svc-page .svc-h1{font-family:'Cabin',sans-serif;font-size:clamp(34px,4.6vw,62px);line-height:1.065;letter-spacing:-.03em;font-weight:500;color:var(--svc-ink);margin:14px 0 0;text-wrap:balance;}
.clx-svc-page .svc-hero-sub{font-family:'Cabin',sans-serif;font-size:clamp(17px,1.5vw,22px);color:var(--svc-ink);line-height:1.55;margin:20px 0 0;max-width:540px;}
.clx-svc-page .svc-hero-sub em{color:var(--svc-orange);font-style:italic;font-weight:700;}
.clx-svc-page .svc-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;}

/* rating strip — text-based platform names (concept style, no logos) */
.clx-svc-page .svc-rating{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-top:34px;padding-top:22px;border-top:1px solid var(--svc-line);}
.clx-svc-page .svc-rate{display:flex;align-items:center;gap:11px;}
.clx-svc-page .svc-rate .svc-stars{color:#f5a623;font-size:16px;letter-spacing:2px;line-height:1;}
.clx-svc-page .svc-rate .svc-rnum{font-family:'Cabin',sans-serif;font-size:24px;font-weight:800;color:var(--svc-ink);letter-spacing:-.5px;line-height:1;}
.clx-svc-page .svc-rate .svc-rnum span{color:var(--svc-muted);font-size:15px;font-weight:600;}
.clx-svc-page .svc-rate .svc-ravg{font-size:13px;color:var(--svc-muted);font-weight:600;line-height:1.2;}
.clx-svc-page .svc-rplat{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.clx-svc-page .svc-rplat .svc-rcap{font-size:12.5px;color:var(--svc-muted);letter-spacing:.2px;}
.clx-svc-page .svc-platnames{display:flex;align-items:center;gap:18px;font-size:13.5px;font-weight:700;color:var(--svc-ink);}
.clx-svc-page .svc-platnames span{position:relative;}
.clx-svc-page .svc-platnames span+span::before{content:"";position:absolute;left:-9px;top:50%;width:3px;height:3px;border-radius:50%;background:var(--svc-muted);transform:translateY(-50%);}

/* hero right column = REAL zoho form (unchanged design), resized to fit the column.
   zoho-form.css pins the card to min-height:673px which drags the left-column
   rating down; kill that + tighten spacing so it sits ~concept height. */
.clx-svc-page .svc-hero-form{display:flex;align-items:stretch;}
.clx-svc-page .svc-hero-form .clx-zoho-wrap{width:100%;margin:0;}
.clx-svc-page .svc-hero-form .clx-zoho-card{
  width:100%;max-width:none;margin:0;
  min-height:0 !important;            /* was 673px — the height culprit */
  padding:1.5em !important;
}
.clx-svc-page .svc-hero-form .clx-zoho-head{margin-bottom:.5em;}
.clx-svc-page .svc-hero-form .clx-field{margin-top:10px !important;}
.clx-svc-page .svc-hero-form textarea{min-height:52px !important;}
.clx-svc-page .svc-hero-form .clx-actions{margin-top:14px !important;}
.clx-svc-page .svc-hero-form .clx-footer{margin-top:10px !important;}

/* client-logo marquee — concept style, hairline separators TOP and BOTTOM */
.clx-svc-page .svc-marquee-band{margin-top:40px;padding:22px 0;border-top:1px solid var(--svc-line);border-bottom:1px solid var(--svc-line);}
.clx-svc-page .svc-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.clx-svc-page .svc-mtrack{display:flex;align-items:center;gap:60px;width:max-content;animation:svc-marq 34s linear infinite;}
.clx-svc-page .svc-mtrack img{height:32px;width:auto;object-fit:contain;opacity:.6;filter:grayscale(1);transition:opacity .2s,filter .2s;}
.clx-svc-page .svc-mtrack img:hover{opacity:1;filter:grayscale(0);}
@keyframes svc-marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){ .clx-svc-page .svc-mtrack{animation:none;} }

/* =====================================================================
   SECTION 3 — A Better Approach (live copy; fonts replicated, no site-wide.css)
   ===================================================================== */
/* EXACT live computed values (headless Chrome on /ai-software-application-development/):
   h2 = Cabin 52px/60 w500 -1.56px #142533 · h3 = Cabin 36px/50.4 w700 #142533
   body = Cabin 18px/28 w400 #727272. No site-wide.css dependency. */
/* padding-bottom:0 because the section now ends on the last Proof Row's own
   border, which IS the divider. The section's default bottom padding stacked
   on top of the next section's top padding for 86px of dead space. */
/* !important is required here, not preference: css-bundles/core.min.css ships
   `.clx-svc-page .svc-sec{padding-top:48px!important;padding-bottom:48px!important}`
   globally, which silently beat every padding value this component set. Bottom
   padding goes to 0 because the section ends on the last Proof Row's own border,
   which is the divider; 48+48 left 86px of dead space before the next heading. */
.clx-svc-page .svc-approach{border-top:none;padding-top:44px!important;padding-bottom:0!important;}
/* Offerings follows the Proof Rows block, whose last row already ends on a
   1px border. The section's own ::before hairline sat directly beneath it as a
   double rule, with a full 80px of padding on top of that. Drop the hairline and
   tighten the lead-in, matching how .svc-approach is handled (2026-09-03). */
.clx-svc-page .svc-offer::before{display:none;}
.clx-svc-page .svc-offer{border-top:none;padding-top:44px!important;}   /* no separator + tighter top gap (was 80px) so content peeks above the fold */
.clx-svc-page .svc-appr-h2{font-family:'Cabin',sans-serif;font-weight:500;font-size:clamp(32px,4.6vw,52px);line-height:1.15;letter-spacing:-1.56px;color:#142533;margin:0 0 6px;}
.clx-svc-page .svc-appr-framework{margin-top:48px;}   /* sub-section spacing (no divider rule) */
.clx-svc-page .svc-appr-h3{font-family:'Cabin',sans-serif;font-weight:700;font-size:clamp(26px,3.4vw,36px);line-height:1.4;letter-spacing:0;color:#142533;margin:0 0 14px;}
/* align-items:center (was start) so the stacked paragraphs sit vertically
   centred against the taller token column on the right (owner call 2026-09-03). */
.clx-svc-page .svc-appr-intro{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:18px;align-items:center;}
/* The shared `p{margin:0}` below was written for ONE paragraph per column. The
   left column now stacks three, so they need separating. `p + p` leaves the
   first paragraph flush with the top and adds no trailing space after the last. */
.clx-svc-page .svc-appr-col--left p + p{margin-top:18px;}
.clx-svc-page .svc-appr-intro p,
.clx-svc-page .svc-appr-framework p{font-family:'Cabin',sans-serif;font-size:18px;line-height:28px;font-weight:400;color:#727272;margin:0;}   /* left-aligned, full width */
.clx-svc-page .svc-appr-framework p{margin-bottom:14px;}
.clx-svc-page .svc-appr-intro a,
.clx-svc-page .svc-appr-framework a{color:#FA4900;text-decoration:underline;text-underline-offset:3px;font-weight:600;}
/* Emphasis in the intro paragraphs too, not just the framework block. Same ink
   colour and weight so the two read as one system (2026-09-03). */
.clx-svc-page .svc-appr-intro p strong,
.clx-svc-page .svc-appr-framework p strong{color:#142533;font-weight:700;}
.clx-svc-page .svc-rule{border:0;border-top:1px solid var(--svc-line);margin:40px 0;}
.clx-svc-page .svc-appr-approach{margin-top:28px;}
/* our-approach block: let each tab's description run full width (block caps it at 600px) */
.clx-svc-page .cx-4layer__panelHead p{max-width:none;}
@media (max-width:800px){
  .clx-svc-page .svc-appr-intro{grid-template-columns:1fr;gap:14px;}
}

/* ===== shared section heading + intro (LIVE values: h2 Cabin 52/60 w500 -1.56; intro Cabin 18/28 #727272) ===== */
.clx-svc-page .svc-sec-h2{font-family:'Cabin',sans-serif;font-weight:500;font-size:clamp(32px,4.6vw,52px);line-height:1.15;letter-spacing:-1.56px;color:#142533;margin:0 0 12px;}
.clx-svc-page .svc-sec-intro{font-family:'Cabin',sans-serif;font-size:18px;line-height:28px;font-weight:400;color:#727272;margin:0;}

/* ===== SECTION 4 — Core Offerings: concept card (crisp white + border) + LIVE orange inline icons + LIVE fonts ===== */
.clx-svc-page .svc-offer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px;list-style:none;padding-left:0;margin-bottom:0;}
.clx-svc-page .svc-offer-card{background:#fff;border:1px solid #e6e6ee;border-radius:16px;padding:34px 28px;text-align:center;transition:transform .18s,box-shadow .18s,border-color .18s;}
.clx-svc-page .svc-offer-card:hover{border-color:#FA4900;box-shadow:0 12px 30px -18px rgba(20,37,51,.35);transform:translateY(-2px);}
.clx-svc-page .svc-offer-ic{width:44px;height:44px;margin:0 auto 22px;color:#FA4900;display:flex;align-items:center;justify-content:center;}
.clx-svc-page .svc-offer-ic svg{width:38px;height:38px;display:block;stroke:currentColor;}
.clx-svc-page .svc-offer-t{font-family:'Cabin',sans-serif;font-size:18px;font-weight:700;line-height:1.3;color:#142533;margin:0 0 10px;}
.clx-svc-page .svc-offer-d{font-family:'Cabin',sans-serif;font-size:15px;line-height:26px;font-weight:400;color:#898D90;margin:0;}
@media (max-width:1080px){.clx-svc-page .svc-offer-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.clx-svc-page .svc-offer-grid{grid-template-columns:1fr;}}

/* ===== SECTION 5 — Why Companies Choose (concept layout; live circles/fonts; concept stats) ===== */
.clx-svc-page .svc-why-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;margin-top:36px;align-items:stretch;}
/* left: 7 bullets — live #E8491D circles (Cabin 14/600 white) + live body font */
.clx-svc-page .svc-why-list{display:flex;flex-direction:column;justify-content:space-between;gap:22px;}
.clx-svc-page .svc-why-item{display:flex;gap:16px;align-items:flex-start;}
.clx-svc-page .svc-why-num{flex:none;width:38px;height:38px;border-radius:50%;background:#E8491D;color:#fff;font-family:'Cabin',sans-serif;font-size:14px;font-weight:600;line-height:1;display:flex;align-items:center;justify-content:center;}
.clx-svc-page .svc-why-body{font-family:'Cabin',sans-serif;font-size:15px;line-height:26px;font-weight:400;color:#898D90;padding-top:6px;}
.clx-svc-page .svc-why-body strong{color:#142533;font-weight:700;}
/* right: 2 full-bleed banners (top row) + 4 dark stat cards; fills the left column's height */
/* Square tiles. Owner call 2026-09-03: the banner boxes must be 1:1, not a
   rectangle. grid-auto-rows is `auto` (was 1fr) because 1fr forced every row
   to a shared height and overrode the tile's own aspect-ratio. */
.clx-svc-page .svc-why-right{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:16px;}
.clx-svc-page .svc-why-badge{border:1px solid #e6e6ee;border-radius:16px;background:#fff;overflow:hidden;position:relative;aspect-ratio:1/1;}
/* cover + zero padding: these tiles hold BANNER ARTWORK, not partner logos.
   (Owner call 2026-09-03: banners must fill the tile edge to edge.)

   History: `contain` + 10px padding was correct while these tiles held 1:1
   partner badges, where cover sliced 41% to 56% off a logo. The vibe family
   replaced them with full-bleed artwork (vibe-cleanup-banner-left.png 1200x900,
   -right.png 1200x1014), which is composed to survive a crop, so the letterbox
   contain produced just read as dead white space.

   Keep the tile's overflow:hidden + border-radius so the fill clips cleanly.
   If a future page puts a LOGO back in this tile, restore contain there with a
   page-scoped override rather than reverting this rule
   ([[feedback_badge_tile_aspect_fit]]). */
.clx-svc-page .svc-why-badge img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;padding:0;display:block;}
.clx-svc-page .svc-why-stat{background:linear-gradient(145deg,rgba(20,20,20,.97),rgba(0,0,0,.99));border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1);border-radius:16px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:110px;}
.clx-svc-page .svc-why-orb{width:22px;height:22px;border-radius:50%;margin-bottom:12px;background:radial-gradient(circle at 34% 30%,#ffd98a 0%,#ff9f27 42%,#ef6a0c 78%,#c9500a 100%);box-shadow:0 2px 6px rgba(239,106,12,.5),inset 0 -2px 4px rgba(120,40,0,.5),inset 0 2px 3px rgba(255,255,255,.4);}
.clx-svc-page .svc-why-statnum{font-family:'Cabin',sans-serif;font-size:34px;font-weight:700;line-height:1.05;letter-spacing:-.02em;color:#fff;}
.clx-svc-page .svc-why-statlabel{font-family:'Cabin',sans-serif;font-size:14px;line-height:1.35;color:#fff;margin-top:6px;}
/* foot: live intro + right-aligned live-style CTA */
.clx-svc-page .svc-why-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.clx-svc-page .svc-why-foottext{font-family:'Cabin',sans-serif;font-size:18px;line-height:24px;font-weight:400;color:#757589;margin:0;max-width:760px;}
.clx-svc-page .svc-why-cta{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#FA4900;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;margin-left:auto;}
.clx-svc-page .svc-why-cta-t{text-decoration:underline;text-underline-offset:6px;}
.clx-svc-page .svc-why-cta::after{content:"\2192";text-decoration:none;transition:transform .2s;}
.clx-svc-page .svc-why-cta:hover{color:#FA4900;}
.clx-svc-page .svc-why-cta:hover::after{transform:translateX(5px);}
@media (max-width:900px){
  .clx-svc-page .svc-why-grid{grid-template-columns:1fr;gap:32px;}
  .clx-svc-page .svc-why-foot{flex-direction:column;align-items:flex-start;}
  .clx-svc-page .svc-why-cta{margin-left:0;}
  /* MOBILE BANNER CROP FIX (2026-09-03).
     Desktop wants the banner tiles to fill their grid row, which `cover` does.
     Below 900px the right column goes full width while grid-auto-rows:1fr still
     ties every row to the 110px stat cards, so the tile becomes roughly 2.4:1
     against 4:3 artwork and `cover` sliced the headline off the top and the
     illustration off the bottom (reported with a screenshot).

     Letting the rows size themselves and pinning the tile to the artwork's own
     ratio keeps the edge-to-edge fill with nothing meaningful cropped. 4/3 suits
     both banners: -left.png is 1200x900 (exactly 4:3), -right.png is 1200x1014
     (1.18:1), so the right one loses ~11% off its sides, which its composition
     tolerates. Revisit the ratio if either banner is ever re-cut. */
}
@media (max-width:520px){
  .clx-svc-page .svc-why-right{grid-template-columns:1fr;}
}

/* ===== SECTION 7 — Teams We Support (concept persona box + live glyph + live fonts + concept dotted bullets) ===== */
/* 2x2, not 3 across. The section carries FOUR personas from 2026-09-03 and a
   3-column grid would strand the fourth alone on its own row. The descriptions
   are long enough that four across would be unreadable. */
.clx-svc-page .svc-teams-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:36px;}
/* persona cards link to the page's hero lead form — reset link styling */
.clx-svc-page a.svc-persona{text-decoration:none;color:inherit;}
.clx-svc-page a.svc-persona:hover{border-color:#FA4900;box-shadow:0 12px 30px -18px rgba(20,37,51,.35);transform:translateY(-2px);}
.clx-svc-page .svc-persona{border:1px solid #e6e6ee;border-radius:16px;background:#fff;padding:32px 28px;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s;}
.clx-svc-page .svc-persona:hover{border-color:#FA4900;box-shadow:0 12px 30px -18px rgba(20,37,51,.35);transform:translateY(-2px);}
.clx-svc-page .svc-persona-ic{width:44px;height:44px;color:#FA4900;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;}
.clx-svc-page .svc-persona-ic svg{width:34px;height:34px;stroke:currentColor;display:block;}
.clx-svc-page .svc-persona-t{font-family:'Cabin',sans-serif;font-size:20px;font-weight:800;line-height:1.3;color:#142533;margin:0 0 12px;}
.clx-svc-page .svc-persona-d{font-family:'Cabin',sans-serif;font-size:15px;line-height:26px;font-weight:400;color:#898D90;margin:0 0 22px;}
.clx-svc-page .svc-persona-label{font-family:'Cabin',sans-serif;font-size:13px;font-weight:700;letter-spacing:.4px;color:#898D90;margin:0 0 14px;}   /* uniform gap above bullets (no auto bottom-align) */
.clx-svc-page .svc-persona-foci{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;}
.clx-svc-page .svc-persona-foci span{position:relative;padding-left:16px;font-family:'Cabin',sans-serif;font-size:13px;line-height:1.45;color:#33475a;}
.clx-svc-page .svc-persona-foci span::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:50%;background:#FA4900;}
@media (max-width:900px){.clx-svc-page .svc-teams-grid{grid-template-columns:1fr;}}

/* ===== SECTION 8 — Industries (concept ind-card + live orange icons); reuses .svc-why-foot ===== */
.clx-svc-page .svc-ind-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:36px;}
/* Industry cards became <a> when a canonical /industries/ page exists
   (2026-09-03). Reset link styling so a linked card is visually identical to
   an unlinked one — matches the a.svc-persona treatment below. */
.clx-svc-page a.svc-ind-card{text-decoration:none;color:inherit;}
.clx-svc-page .svc-ind-card{display:flex;align-items:center;gap:16px;border:1px solid #e6e6ee;border-radius:14px;padding:20px 22px;background:#fff;transition:transform .16s,box-shadow .16s,border-color .16s;}
.clx-svc-page .svc-ind-card:hover{border-color:#FA4900;box-shadow:0 10px 26px -18px rgba(20,37,51,.35);transform:translateY(-2px);}
.clx-svc-page .svc-ind-ic{width:40px;height:40px;flex:none;color:#FA4900;display:flex;align-items:center;justify-content:center;}
.clx-svc-page .svc-ind-ic svg{width:32px;height:32px;stroke:currentColor;display:block;}
.clx-svc-page .svc-ind-name{font-family:'Cabin',sans-serif;font-size:16px;font-weight:700;line-height:1.3;color:#142533;}

/* ===== SECTION 9 — A.I. System Design: concept dark banner + live fonts + white/orange stats ===== */
.clx-svc-page .svc-sysbanner{position:relative;margin-top:32px;border-radius:20px;background:linear-gradient(135deg,#182a3a 0%,#0f1c27 55%,#0a141c 100%);border:1px solid rgba(255,255,255,.08);padding:52px 56px;overflow:hidden;}
.clx-svc-page .svc-sysbanner-media{position:absolute;inset:0;z-index:0;}
.clx-svc-page .svc-sysbanner-media img{width:100%;height:100%;object-fit:cover;object-position:65% 40%;display:block;}
.clx-svc-page .svc-sysbanner-scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgba(9,17,24,.85) 0%,rgba(10,20,28,.62) 52%,rgba(10,20,28,.40) 100%);}
.clx-svc-page .svc-sysbanner-in{position:relative;z-index:1;}
.clx-svc-page .svc-sysbanner-eyebrow{display:inline-block;font-family:'Cabin',sans-serif;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#fff;}
.clx-svc-page .svc-sysbanner-eyebrow::after{content:"";display:block;height:2px;border-radius:2px;background:#FA4900;margin-top:12px;}   /* full eyebrow-width orange line */
.clx-svc-page .svc-sysbanner-h{font-family:'Cabin',sans-serif;font-size:clamp(26px,3vw,34px);font-weight:700;line-height:1.2;letter-spacing:-.3px;color:#fff;margin:14px 0 0;}

.clx-svc-page .svc-sysbanner-body{font-family:'DM Sans',sans-serif;font-size:16px;line-height:27px;font-weight:400;color:rgba(255,255,255,.86);margin:16px 0 0;max-width:760px;}
.clx-svc-page .svc-sysbanner-rule{border:0;border-top:1px solid rgba(255,255,255,.15);margin:28px 0;}
.clx-svc-page .svc-sysbanner-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.clx-svc-page .svc-sysbanner-stat{display:flex;flex-direction:column;}
.clx-svc-page .svc-sysbanner-stat .num{font-family:'Cabin',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.3px;color:#fff;line-height:1;white-space:nowrap;}   /* live hierarchy: 22px */
.clx-svc-page .svc-sysbanner-stat .num em{color:#FA4900;font-style:normal;}
.clx-svc-page .svc-sysbanner-stat .lbl{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:400;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:10px;}
@media (max-width:640px){.clx-svc-page .svc-sysbanner{padding:36px 26px;}.clx-svc-page .svc-sysbanner-stats{gap:28px;}}

/* ===== Reusable tabs (numbered nav — matches site .clx-eng-nav) + card-grid panels + hint ===== */
.clx-svc-page .svc-tabs-wrap{margin-top:36px;}
.clx-svc-page .svc-sysdesign .svc-tabs-wrap{margin-top:52px;}   /* extra space after the banner */
.clx-svc-page .svc-tabhint{font-family:'JetBrains Mono','DM Sans',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8E8E93;margin:0 0 12px;}
.clx-svc-page .svc-tabs{display:flex;gap:56px;flex-wrap:wrap;margin-bottom:6px;}
.clx-svc-page .svc-tab{position:relative;display:flex;align-items:center;gap:16px;padding:6px 0 10px;cursor:pointer;background:none;border:0;font-family:inherit;user-select:none;}
.clx-svc-page .svc-tab::after{content:"";position:absolute;left:52px;right:0;bottom:0;height:2px;background:#FA4900;transform:scaleX(0);transform-origin:left center;transition:transform .25s cubic-bezier(.6,.01,.25,1);}
.clx-svc-page .svc-tab.is-active::after{transform:scaleX(1);}
.clx-svc-page .svc-tnum{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#EFEFEF;color:#B0B0B0;font-family:'Cabin',sans-serif;font-size:14px;font-weight:600;flex-shrink:0;transition:background .2s,color .2s;}
.clx-svc-page .svc-tlabel{font-family:'Cabin',sans-serif;font-size:19px;color:#6B7280;font-weight:400;line-height:1.3;transition:color .2s,font-weight .2s;}
.clx-svc-page .svc-tcue{font-family:'Cabin',sans-serif;font-size:18px;color:#FA4900;font-weight:600;margin-left:4px;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s;}
.clx-svc-page .svc-tab:not(.is-active):hover .svc-tcue{opacity:1;transform:translateX(0);}
.clx-svc-page .svc-tab:hover .svc-tlabel{color:#1C1E21;}
.clx-svc-page .svc-tab.is-active .svc-tnum{background:#E8491D;color:#fff;}
.clx-svc-page .svc-tab.is-active .svc-tlabel{color:#1C1E21;font-weight:700;}
.clx-svc-page .svc-tab.is-active .svc-tcue{display:none;}
.clx-svc-page .svc-tabpanel{display:none;}
.clx-svc-page .svc-tabpanel.is-active{display:block;animation:svc-fade .3s ease;}
.clx-svc-page .svc-tabpanel-intro{font-family:'Cabin',sans-serif;font-size:18px;line-height:28px;font-weight:400;color:#727272;margin:18px 0 0;max-width:none;}
.clx-svc-page .svc-tabpanel .svc-offer-grid{margin-top:26px;}
@keyframes svc-fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (max-width:640px){.clx-svc-page .svc-tabs{gap:22px;}.clx-svc-page .svc-tlabel{font-size:16px;}}

/* Mobile: keep the capability tabs side-by-side (no wrap) AND sticky to the
   top of the viewport as the user scrolls through the offerings section.
   Horizontal scroll if labels don't fit; page bg painted so tab strip stays
   readable over cards scrolling underneath. */
@media (max-width:768px){
  .clx-svc-page .svc-offer .svc-tabs-wrap{position:relative;}
  .clx-svc-page .svc-offer .svc-tabs{
    position:sticky;top:102px;z-index:20;
    background:#fff;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:12px 0;
    margin:0 -20px;
    padding-left:20px;padding-right:20px;
    box-shadow:0 6px 12px -8px rgba(20,37,51,.15);
  }
  .clx-svc-page .svc-offer .svc-tabs::-webkit-scrollbar{display:none;}
  .clx-svc-page .svc-offer .svc-tab{flex:0 0 auto;white-space:nowrap;}
}
/* smallest phones: two hero buttons can't sit side-by-side without clipping —
   stack them full-width so neither the copy nor the button overflows. */
@media (max-width:400px){
  .clx-svc-page .svc-actions{flex-direction:column;}
  .clx-svc-page .svc-actions .clxc-btn{width:100%;flex:0 0 auto;}
}

/* ===== SECTION 11 — Platforms (reuses homepage .clx-tp-* component; CSS/JS in platforms-assets.php) ===== */
.clx-svc-page .svc-platforms-wrap{margin-top:36px;}
.clx-svc-page .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;}

/* ---- responsive ---- */

/* tablet & down: stack the hero; cap + centre the form so it isn't oversized */
@media (max-width:1024px){
  .clx-svc-page .svc-sec{padding:56px 0;}
  .clx-svc-page .svc-hero{padding:28px 0 44px;}
  .clx-svc-page .svc-hero-g{grid-template-columns:1fr;gap:34px;}
  .clx-svc-page .svc-hero-left{order:1;}
  .clx-svc-page .svc-hero-form{order:2;justify-content:center;}
  .clx-svc-page .svc-hero-form .clx-zoho-card{max-width:560px;margin:0 auto;}
  .clx-svc-page .svc-hero-sub{max-width:none;}
}

/* phones */
@media (max-width:600px){
  .clx-svc-page .svc-in{padding:0 16px;}
  .clx-svc-page .svc-sec{padding:44px 0;}
  .clx-svc-page .svc-hero{padding:20px 0 36px;}
  .clx-svc-page .svc-eyebrow{font-size:18px;line-height:28px;}
  .clx-svc-page .svc-hero-form .clx-zoho-card{max-width:none;}
  .clx-svc-page .svc-actions{width:100%;}
  /* min-width:0 lets the two buttons shrink instead of forcing a few px of
     horizontal overflow; flex-basis 0 makes them share the row evenly. */
  .clx-svc-page .svc-actions .clxc-btn{flex:1 1 0;min-width:0;justify-content:center;padding-left:12px;padding-right:12px;}
  .clx-svc-page .svc-rating{gap:12px;}
  .clx-svc-page .svc-marquee-band{margin-top:28px;padding:16px 0;}
  .clx-svc-page .svc-mtrack{gap:36px;}
  .clx-svc-page .svc-mtrack img{height:26px;}
}

/* trim the platforms section's bottom padding so the CTA band sits close under it */
.clx-svc-page .svc-platforms{padding-bottom:40px;}

/* ============================================================
   SECTION 11b — "Your A.I. Cost Map In 5 Minutes" CTA band
   Full-bleed (edge-to-edge, concept) + flat black + bottom-flush
   image (live). Content column stays 1140.
   ============================================================ */
/* Contained to the 1140 content width, rounded card (concept .costmap) —
   NOT full-bleed. */
.clx-svc-page .svc-costmap{padding:0 20px 44px;}
.clx-svc-page .svc-costmap-in{
  max-width:1140px;margin:0 auto;
  background:#0e0e0f;border-radius:24px;overflow:hidden;   /* near-black rounded card */
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
}
.clx-svc-page .svc-costmap-media{align-self:stretch;min-height:100%;line-height:0;}
.clx-svc-page .svc-costmap-media img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center bottom;
}
.clx-svc-page .svc-costmap-text{
  align-self:center;padding:48px 56px;display:flex;flex-direction:column;
}
.clx-svc-page .svc-costmap-h{
  font-family:'Cabin',sans-serif;font-size:clamp(30px,3vw,44px);line-height:1.12;
  letter-spacing:-.5px;font-weight:700;color:#fff;margin:0;text-wrap:balance;
}
.clx-svc-page .svc-costmap-sub{
  font-family:'Cabin',sans-serif;font-size:18px;line-height:1.5;
  color:rgba(255,255,255,.78);margin:22px 0 0;max-width:420px;
}
.clx-svc-page .svc-costmap-cta{margin:34px 0 0;text-align:right;}
@media (max-width:760px){
  .clx-svc-page .svc-costmap{margin-top:-24px;}
  .clx-svc-page .svc-costmap-in{grid-template-columns:1fr;}
  .clx-svc-page .svc-costmap-media img{aspect-ratio:16/10;height:auto;}
  .clx-svc-page .svc-costmap-text{padding:32px 28px;}
}

/* ============================================================
   SECTION 12 — A.I. Engineering Engagement Models
   Concept layout (eng-intro 2-col, 5-col grouped card grid, tables),
   page card look (.svc-offer-card), live typography.
   ============================================================ */
/* intro: copy left, image+chip right */
.clx-svc-page .svc-eng-intro{display:grid;grid-template-columns:1fr .8fr;gap:36px;align-items:stretch;margin:34px 0 34px;}
.clx-svc-page .svc-eng-intro-copy{display:flex;flex-direction:column;}
/* subhead — matched to the architecture "after launch" headline */
.clx-svc-page .svc-eng-subhead{font-family:'Cabin',sans-serif;font-size:18px;font-weight:700;line-height:1.4;color:#142533;letter-spacing:-.3px;margin:0 0 6px;}
/* When a lead paragraph precedes it (ERP, SEO) the flex column gave it no
   breathing room and the subhead sat flush against the copy above. Pages where
   the subhead comes first (AI, low code) are unaffected by :not(:first-child). */
.clx-svc-page .svc-eng-subhead:not(:first-child){margin-top:22px;}
.clx-svc-page .svc-eng-subsub{font-family:'Cabin',sans-serif;font-size:16px;line-height:1.55;color:#727272;margin:0;}
.clx-svc-page .svc-eng-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:auto;padding-top:26px;}
.clx-svc-page .svc-eng-stat{border:1px solid var(--svc-line-2);border-radius:14px;padding:20px 12px;background:var(--svc-paper);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}
.clx-svc-page .svc-eng-stat .n{font-family:'Cabin',sans-serif;font-size:clamp(22px,2vw,26px);font-weight:800;color:#142533;letter-spacing:-.5px;line-height:1.1;text-wrap:balance;}
.clx-svc-page .svc-eng-stat .l{font-family:'Cabin',sans-serif;font-size:13px;color:#727272;margin-top:8px;line-height:1.35;text-wrap:balance;}
/* image + chip */
.clx-svc-page .svc-eng-imgwrap{position:relative;border-radius:18px;overflow:hidden;min-height:260px;background:var(--svc-paper);}
.clx-svc-page .svc-eng-imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.clx-svc-page .svc-eng-chip{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:12px;padding:12px 16px;box-shadow:0 10px 30px -12px rgba(20,37,51,.4);}
.clx-svc-page .svc-eng-chip .dot{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#F57E07,#FA4900);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;}
.clx-svc-page .svc-eng-chip span:last-child{font-family:'Cabin',sans-serif;font-size:14px;font-weight:600;color:#142533;line-height:1.35;}

/* card grid: concept 5-col grouped layout */
.clx-svc-page .svc-eng-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:auto 1fr;gap:8px 14px;align-items:stretch;margin:28px 0 0;}
.clx-svc-page .svc-eng-grouphdr{grid-column:2 / 4;grid-row:1;display:flex;align-items:center;gap:8px;font-family:'Cabin',sans-serif;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--svc-orange);padding:0 2px;}
.clx-svc-page .svc-eng-grouphdr::after{content:"";flex:1;height:1px;background:var(--svc-orange);opacity:.4;}
.clx-svc-page .m-c1{grid-column:1;}.clx-svc-page .m-c2{grid-column:2;}.clx-svc-page .m-c3{grid-column:3;}.clx-svc-page .m-c4{grid-column:4;}.clx-svc-page .m-c5{grid-column:5;}
/* card look = page .svc-offer-card, but left-aligned, tighter, with a foot */
.clx-svc-page .svc-eng-model{grid-row:2;display:flex;flex-direction:column;text-align:left;padding:20px 18px;min-width:0;}
.clx-svc-page .svc-eng-model.is-grouped{border-color:var(--svc-orange);}
.clx-svc-page .svc-eng-mt{font-family:'Cabin',sans-serif;font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.2px;color:#142533;margin:0 0 8px;overflow-wrap:anywhere;}
.clx-svc-page .svc-eng-ms{font-family:'DM Sans',sans-serif;font-size:13.5px;line-height:1.55;color:#898D90;margin:0;overflow-wrap:anywhere;}
.clx-svc-page .svc-eng-foot{margin-top:auto;padding-top:14px;display:flex;justify-content:flex-end;border-top:1px solid var(--svc-line);}
.clx-svc-page .svc-eng-ms{margin-bottom:16px;}
.clx-svc-page .svc-eng-cta{display:inline-flex;align-items:center;gap:7px;color:var(--svc-orange);font-family:'DM Sans',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;text-decoration:none;white-space:nowrap;}
.clx-svc-page .svc-eng-cta span{transition:transform .2s;}
.clx-svc-page .svc-eng-cta:hover{color:var(--svc-orange);}
.clx-svc-page .svc-eng-cta:hover span{transform:translateX(4px);}

/* table caption = simple h3 */
.clx-svc-page .svc-eng-tblcap{font-family:'Cabin',sans-serif;font-size:24px;font-weight:700;line-height:1.3;letter-spacing:-.3px;color:#142533;margin:48px 0 18px;}
/* site standard gray table (matches live .clx-eng-table-ai / .clx-llm-table) */
.clx-svc-page .svc-table{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.clx-svc-page .svc-table table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;margin:0;border:1px solid #D8D8D8;background:#fff;}
.clx-svc-page .svc-table thead th{font-family:'Cabin',sans-serif;font-size:15px;font-weight:600;line-height:22px;color:#1C1E21;text-align:left;vertical-align:middle;padding:16px 18px;background:#F8F8F8;border-left:1px solid #EAEAEA !important;border-top:0 !important;border-right:0 !important;border-bottom:0 !important;}
.clx-svc-page .svc-table thead th:first-child{border-left:0 !important;}
.clx-svc-page .svc-table tbody td{font-family:'DM Sans',sans-serif;font-size:15px;line-height:26px;color:#5C5C66;font-weight:400;padding:18px;vertical-align:top;text-align:left;background:#fff;border-left:1px solid #EAEAEA !important;border-top:1px solid #EAEAEA !important;border-right:0 !important;border-bottom:0 !important;overflow-wrap:break-word;}
.clx-svc-page .svc-table tbody td:first-child{border-left:0 !important;font-weight:600;color:#1C1E21;font-family:'Cabin',sans-serif;}

/* --- responsive --- */
@media (max-width:960px){
  .clx-svc-page .svc-eng-intro{grid-template-columns:1fr;gap:22px;}
  .clx-svc-page .svc-eng-imgwrap{min-height:220px;}
  /* Auto-placement follows DOM order, where the group header comes FIRST — so it
     landed above card 1 and labelled the wrong card. Reorder so it still heads the
     grouped pair (m-c2 / m-c3), as it does on desktop. */
  .clx-svc-page .svc-eng-grid{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:auto;}
  /* grid-row must be released too: an explicitly-placed item ignores `order`,
     so with the base `grid-row:1` still in force the header stayed pinned to the
     first row no matter what order it was given. */
  .clx-svc-page .svc-eng-grouphdr{grid-column:1 / -1;grid-row:auto;order:2;}
  .clx-svc-page .svc-eng-model{grid-row:auto;grid-column:auto !important;}
  .clx-svc-page .m-c1{grid-column:1 / -1 !important;order:1;}
  .clx-svc-page .m-c2{order:3;}
  .clx-svc-page .m-c3{order:4;}
  .clx-svc-page .m-c4{order:5;}
  .clx-svc-page .m-c5{order:6;}
}
@media (max-width:620px){
  .clx-svc-page .svc-eng-stats{grid-template-columns:repeat(2,1fr);}
  .clx-svc-page .svc-eng-grid{grid-template-columns:1fr;}
  .clx-svc-page .svc-eng-tblcap{font-size:20px;}
}

/* engagement footer CTA: separator + text left + right-aligned link */
.clx-svc-page .svc-eng-estimate{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:44px;padding-top:32px;border-top:1px solid var(--svc-line);}
@media (max-width:620px){.clx-svc-page .svc-eng-estimate{flex-direction:column;align-items:flex-start;}}

/* ============================================================
   SECTION 13 — A.I. System Security & Compliance
   Concept layout (dark rounded banner, image-left/copy-right, tabbed
   pillars) with LIVE type/color mapping. Scoped, self-contained.
   ============================================================ */
.clx-svc-page .svc-secbanner{display:grid;grid-template-columns:.82fr 1fr;background:#0e0e0f;border-radius:24px;overflow:hidden;color:#fff;}
.clx-svc-page .svc-secbanner-media{position:relative;min-height:100%;background:#1a1a1c;}
.clx-svc-page .svc-secbanner-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.clx-svc-page .svc-secbanner-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,14,15,0) 55%,rgba(14,14,15,.95) 100%),linear-gradient(0deg,rgba(14,14,15,.35),rgba(14,14,15,0) 40%);}
.clx-svc-page .svc-secbanner-copy{padding:48px 52px;min-width:0;}
/* live type/color */
.clx-svc-page .svc-secbanner-eyebrow{display:inline-block;font-family:'Cabin',sans-serif;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--svc-orange);margin-bottom:14px;}
.clx-svc-page .svc-secbanner-eyebrow::after{content:"";display:block;height:2px;border-radius:2px;background:var(--svc-orange);margin-top:12px;}
.clx-svc-page .svc-secbanner-h{font-family:'Cabin',sans-serif;font-size:clamp(26px,2.5vw,32px);font-weight:700;line-height:1.18;letter-spacing:-.3px;color:#fff;margin:0 0 16px;}
.clx-svc-page .svc-secbanner-body{font-family:'Cabin',sans-serif;font-size:16px;line-height:1.6;color:rgba(255,255,255,.86);margin:0;max-width:560px;}
.clx-svc-page .svc-secbanner-rule{border:none;height:1px;background:rgba(255,255,255,.18);margin:24px 0 20px;}
/* tabs — concept underline layout, live colors */
.clx-svc-page .svc-sectabs{display:flex;gap:26px;flex-wrap:wrap;position:relative;}
.clx-svc-page .svc-sectab{background:none;border:none;cursor:pointer;font-family:'Cabin',sans-serif;display:flex;align-items:baseline;gap:7px;padding:0 0 12px;color:rgba(255,255,255,.5);border-bottom:2px solid transparent;transition:.18s;}
.clx-svc-page .svc-sectab .n{font-family:'Cabin',sans-serif;font-size:11px;font-weight:600;letter-spacing:1.5px;}
.clx-svc-page .svc-sectab .nm{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.clx-svc-page .svc-sectab:hover{color:rgba(255,255,255,.82);}
.clx-svc-page .svc-sectab.is-active{color:#fff;border-bottom-color:var(--svc-orange);}
/* panels */
/* Panels are STACKED in one grid cell so the container always reserves the
   tallest of the four. The tabs auto-cycle every 3.5s; with display:none the
   banner resized on each swap and the page jumped under the reader. Hidden
   panels keep their box and lose visibility, which also takes them out of the
   accessibility tree and out of hit testing, so the [hidden] semantics hold. */
.clx-svc-page .svc-secpanels{margin-top:24px;display:grid;}
.clx-svc-page .svc-secpanel{display:block;grid-area:1 / 1;}
.clx-svc-page .svc-secpanel[hidden]{display:block;visibility:hidden;pointer-events:none;}
.clx-svc-page .svc-secpanel h3{font-family:'Cabin',sans-serif;font-size:20px;font-weight:700;line-height:1.25;color:#fff;margin:0 0 16px;}
.clx-svc-page .svc-secpanel h3 .sub{font-weight:400;color:rgba(255,255,255,.6);font-size:15px;}
.clx-svc-page .svc-secitems{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px;}
.clx-svc-page .svc-secitem{display:flex;flex-direction:column;gap:3px;padding-left:14px;border-left:2px solid rgba(250,73,0,.55);}
.clx-svc-page .svc-secitem .lbl{font-family:'Cabin',sans-serif;font-size:13.5px;font-weight:600;color:#fff;}
.clx-svc-page .svc-secitem .note{font-family:'DM Sans',sans-serif;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.62);}
.clx-svc-page .svc-secimpact{margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-family:'Cabin',sans-serif;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.82);display:flex;gap:11px;}
.clx-svc-page .svc-secimpact::before{content:"";flex:none;width:9px;height:9px;margin-top:5px;border-radius:50%;background:var(--svc-orange);box-shadow:0 0 0 4px rgba(250,73,0,.22);}
@media (max-width:860px){
  .clx-svc-page .svc-secbanner{grid-template-columns:1fr;}
  .clx-svc-page .svc-secbanner-media{min-height:240px;}
  .clx-svc-page .svc-secbanner-copy{padding:32px 26px;}
  .clx-svc-page .svc-secitems{grid-template-columns:1fr;}
  .clx-svc-page .svc-sectabs{gap:18px;}
}
.clx-svc-page .svc-table td em{color:var(--svc-orange);font-style:normal;font-weight:600;}

/* ============================================================
   SECTION 14 — The Standards Your CISO Will Ask For (compact logo grid)
   ============================================================ */
.clx-svc-page .svc-cert-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:28px 16px;margin:36px 0 0;}
/* no boxes — logos sit clean; label uses the standard card-title heading */
.clx-svc-page .svc-cert-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:16px;text-align:center;}
.clx-svc-page .svc-cert-logo{width:auto;height:60px;max-width:100%;object-fit:contain;}
.clx-svc-page .svc-cert-label{font-family:'Cabin',sans-serif;font-size:18px;font-weight:700;color:#142533;line-height:1.3;}
.clx-svc-page .svc-cert-foot{margin-top:36px;padding-top:32px;border-top:1px solid var(--svc-line);}
@media (min-width:900px){.clx-svc-page .svc-cert-foot{flex-wrap:nowrap;align-items:center;}.clx-svc-page .svc-cert-foot .svc-why-foottext{flex:1 1 0;min-width:0;max-width:none;}}

@media (max-width:1024px){.clx-svc-page .svc-cert-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.clx-svc-page .svc-cert-grid{grid-template-columns:repeat(2,1fr);}}

/* ------------------------------------------------------------------
   homepage.css (loaded for the cloned bottom widgets) applies
   `body.page .elementor h1-h6 { color: var(--hp-dark) !important }`,
   which greys out headings on OUR dark-background sections. Re-assert
   white with a more specific selector (3 classes > their 2). Bounded:
   only headings bleed — no p/link/font rules in that homepage block.
   ------------------------------------------------------------------ */
body.page .clx-svc-page .svc-costmap-h,
body.page .clx-svc-page .svc-secbanner-h,
body.page .clx-svc-page .svc-sysbanner-h,
body.page .clx-svc-page .svc-secpanel h3{color:#fff !important;}

/* ============================================================
   Mobile TOC — FAB + bottom sheet (shown < 1548px, where the
   desktop right-margin overlay is hidden). Scoped, self-contained.
   ============================================================ */
/* FAB sits bottom-LEFT (the site's live-chat widget is bottom-right) and stays
   hidden until scrolled into the chapter range. Smaller on phones so it isn't
   a second big floating widget competing with the chat launcher. */
.clx-svc-page .svc-toc-fab{position:fixed;left:18px;right:auto;bottom:18px;z-index:60;width:48px;height:48px;border-radius:50%;border:none;background:var(--svc-orange);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(250,73,0,.42);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .22s ease,visibility .22s ease,transform .22s ease,box-shadow .18s ease;}
.clx-svc-page .svc-toc-fab.is-visible{opacity:1;visibility:visible;transform:none;}
.clx-svc-page .svc-toc-fab:hover{box-shadow:0 16px 34px rgba(250,73,0,.5);}
@media (max-width:600px){ .clx-svc-page .svc-toc-fab{width:42px;height:42px;left:14px;bottom:14px;} .clx-svc-page .svc-toc-fab svg{width:17px;height:17px;} }
@media (min-width:1548px){ .clx-svc-page .svc-toc-fab{display:none;} }
.clx-svc-page .svc-toc-sheet{position:fixed;inset:0;z-index:70;display:none;}
.clx-svc-page .svc-toc-sheet.is-open{display:block;}
.clx-svc-page .svc-toc-backdrop{position:absolute;inset:0;background:rgba(10,14,20,.5);opacity:0;transition:opacity .2s;}
.clx-svc-page .svc-toc-sheet.is-open .svc-toc-backdrop{opacity:1;}
.clx-svc-page .svc-toc-panel{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;padding:14px 16px calc(20px + env(safe-area-inset-bottom));max-height:72vh;overflow:auto;transform:translateY(100%);transition:transform .28s cubic-bezier(.4,.2,.2,1);box-shadow:0 -12px 40px rgba(10,14,20,.3);}
.clx-svc-page .svc-toc-sheet.is-open .svc-toc-panel{transform:translateY(0);}
.clx-svc-page .svc-toc-panel-h{display:flex;align-items:center;justify-content:space-between;font-family:'Cabin',sans-serif;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--svc-muted);padding:4px 4px 12px;border-bottom:1px solid var(--svc-line);}
.clx-svc-page .svc-toc-close{background:none;border:none;font-size:26px;line-height:1;color:var(--svc-muted);cursor:pointer;padding:0 6px;}
.clx-svc-page .svc-toc-panel-links{display:grid;gap:2px;padding-top:8px;}
.clx-svc-page .svc-toc-panel-links a{display:flex;gap:12px;align-items:baseline;font-size:15px;color:var(--svc-ink);padding:11px 8px;border-radius:9px;text-decoration:none;}
.clx-svc-page .svc-toc-panel-links a .i{font-family:'Cabin',sans-serif;font-size:12px;font-weight:600;color:var(--svc-muted);}
.clx-svc-page .svc-toc-panel-links a.on{background:var(--svc-orange-soft);color:#b5390a;font-weight:600;}
.clx-svc-page .svc-toc-panel-links a.on .i{color:#b5390a;}

/* tables: keep columns readable on small screens — scroll instead of cramming */
.clx-svc-page .svc-table table{min-width:620px;}

/* Sticky-header offset: in-page anchor jumps (hero Capabilities/Results, TOC,
   contact CTAs) must land ON the section heading, not under the 122px fixed
   header (49px top-bar + 73px nav). */
.clx-svc-page .svc-sec[id],
.clx-svc-page #lead-form,
#case-studies, #contact, #faq, #blogs{scroll-margin-top:130px;}

/* svc-appr-stats-row — 4-col stat row below the intro. Typography values
   mirror the homepage clxc-proof numeric tokens (Cabin ink, orange <em> unit)
   used on /our-solutions/. Row layout because the tokens sit under a 2-col
   intro; on mobile it stacks 2-up then 1-up. Source line is footnoted
   (12px italic, light gray). NO new tokens invented. */
.clx-svc-page .svc-appr-stats-row { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
/* Tokens now live INSIDE the intro's right column (owner layout call 2026-09-03),
   stacked one above another (owner call) rather than a 4-across row. Three full
   width tokens sit beside two stacked paragraphs.
   The standalone 4-across rule above is kept for any other page that still uses
   the old arrangement. */
.clx-svc-page .svc-appr-col--right .svc-appr-stats-row{grid-template-columns:1fr;gap:22px;margin:0;}
/* SPECIFICITY FIX 2026-09-03. Moving the token list inside .svc-appr-intro put
   .svc-appr-d / .svc-appr-src within reach of `.clx-svc-page .svc-appr-intro p`
   (0,2,1), which outranks `.clx-svc-page .svc-appr-d` (0,2,0) and silently
   rendered both at 18px/28px grey body text. These restore the cleanup hub's
   token hierarchy verbatim: 14px ink description, 11px muted italic source. */
.clx-svc-page .svc-appr-intro .svc-appr-d{font-family:'Cabin',sans-serif;font-size:14px;line-height:1.5;font-weight:400;color:#142533;margin:8px 0 6px;}
.clx-svc-page .svc-appr-intro .svc-appr-src{font-family:'Cabin',sans-serif;font-size:11px;line-height:1.4;font-weight:400;color:#AEB4BB;font-style:italic;margin:0;}
.clx-svc-page .svc-appr-stat { padding: 0; }
.clx-svc-page .svc-appr-n {
  font-family: 'Cabin', sans-serif;
  font-size: clamp(30px, 2.8vw, 38px); font-weight: 700;
  color: #142533; letter-spacing: -.5px; line-height: 1.1;
}
.clx-svc-page .svc-appr-n em { color: #FA4900; font-style: normal; }
.clx-svc-page .svc-appr-d { font-family: 'Cabin', sans-serif; font-size: 14px; color: #142533; line-height: 1.5; margin: 8px 0 6px; }
.clx-svc-page .svc-appr-src { font-family: 'Cabin', sans-serif; font-size: 11px; color: #AEB4BB; font-style: italic; margin: 0; line-height: 1.4; }
@media (max-width: 900px) {
  .clx-svc-page .svc-appr-stats-row { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}
@media (max-width: 560px) {
  .clx-svc-page .svc-appr-stats-row { grid-template-columns: 1fr; gap: 22px; }
}

/* ==================================================================
   svc-appr-framework — stacked layout: intro (full width) | animation
   (full width) | 3-col descriptions positioned directly under each
   .cm__steps rail cell above (heading + description share a column).
   Description grid uses the same repeat(3,minmax(0,1fr)) template
   as .cm__steps so they line up exactly.
   ================================================================== */
.clx-svc-page .svc-appr-fw-intro { font-family:'Cabin',sans-serif; font-size:17px; line-height:1.6; color:#142533; margin:24px 0 28px; }
.clx-svc-page .svc-appr-fw-anim { margin: 0 0 20px; }
.clx-svc-page .svc-appr-fw-descs { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin: 0; }
.clx-svc-page .svc-appr-fw-d { font-family:'Cabin',sans-serif; font-size:14px; line-height:1.55; color:#142533; margin:0; padding: 0 2px; }
/* "The benefit" marker inside each movement. Inline, not a block, because it
   sits mid sentence. Italics are turned off and replaced with brand orange at
   700 so it reads as a deliberate scan cue rather than stray emphasis. */
.clx-svc-page .svc-appr-fw-d em{font-style:normal;font-weight:700;color:var(--svc-orange);}
@media (max-width: 900px) {
  .clx-svc-page .svc-appr-fw-descs { grid-template-columns: 1fr; gap: 18px; }
}

/* ==================================================================
   Containment Method - Scattered Points animation.
   Copied verbatim from Claude Design project "Clixlogix website",
   file "Containment Method - Scattered Points (drop-in).html". Kept
   under .clx-svc-page scope so it never leaks off this page.
   ================================================================== */
.clx-svc-page .cm{--cm-orange:#FA4900;--cm-navy:#142533;--cm-body:#6C7A85;--cm-rule:#E7EAEC;--cm-dim:#BFC6CA;
  container-type:inline-size;font-family:'Cabin',system-ui,sans-serif}
.clx-svc-page .cm__stage{position:relative;width:100%;aspect-ratio:620/300;min-height:180px;max-height:340px;margin-inline:auto}
.clx-svc-page .cm__stage svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.clx-svc-page .cm__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:clamp(14px,2cqw,22px)}
.clx-svc-page .cm__step{border-top:2px solid var(--cm-rule);padding-top:9px;min-width:0;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:clamp(9.5px,1.05cqw,11.5px);
  letter-spacing:.09em;text-transform:uppercase;color:var(--cm-dim);
  transition:color .35s ease,border-color .35s ease}
.clx-svc-page .cm__step b{display:block;font-family:'Cabin',system-ui,sans-serif;font-size:clamp(12px,1.35cqw,15px);
  font-weight:500;letter-spacing:0;text-transform:none;color:var(--cm-dim);margin-top:3px;transition:color .35s ease}
.clx-svc-page .cm__step.is-on{color:var(--cm-orange);border-top-color:var(--cm-orange)}
.clx-svc-page .cm__step.is-on b{color:var(--cm-navy)}
.clx-svc-page .cm__step.is-past{color:var(--cm-body);border-top-color:#F4CDBB}
.clx-svc-page .cm__step.is-past b{color:var(--cm-body)}
@container (max-width:420px){
  .clx-svc-page .cm__steps{grid-template-columns:1fr;gap:0}
  .clx-svc-page .cm__step{border-top:none;border-left:2px solid var(--cm-rule);padding:4px 0 4px 12px}
  .clx-svc-page .cm__step.is-on{border-left-color:var(--cm-orange)}
  .clx-svc-page .cm__step.is-past{border-left-color:#F4CDBB}
  .clx-svc-page .cm__step b{display:inline;margin-left:6px}
}
@media (prefers-reduced-motion:reduce){.clx-svc-page .cm__step{transition:none}}

/* ===== Case Studies (vibe) — match AI page layout ===================
   Isotope inits via an inline boot script inside parts/case-studies.php,
   so the flex overrides that were forcing a fallback grid are gone —
   Isotope handles positioning. Remaining page-level deltas from AI page:
   the .svc-in wrapper caps too narrow, the container inside was too wide,
   and the subtitle color drifted from the theme default. */
.clx-svc-page .vibe-casestudies .axil-portfolio-area > .container.axil-masonary-wrapper{max-width:1140px !important;padding-left:20px !important;padding-right:20px !important;}
.clx-svc-page .vibe-casestudies .section-title .subtitle-2{color:#898D90 !important;max-width:none !important;text-align:center !important;padding:0 !important;}
.clx-svc-page .vibe-casestudies .section-title h2.title,
.clx-svc-page .vibe-casestudies .section-title .title{font-family:'Cabin',sans-serif !important;}
.clx-svc-page .vibe-casestudies .mesonry-list.grid-metro3{margin-top:32px !important;}
.clx-svc-page .vibe-casestudies .portfolio .thumb img{object-fit:cover !important;}
/* Full-viewport-width gray band: break out of the .clx-svc-page container. */
.clx-svc-page .vibe-casestudies{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;}

/* ===== Contact — 2-col layout matching AI page (form 58 / getintouch 42).
   Elementor column classes need explicit flex layout since we render outside
   Elementor's frontend renderer. Full-viewport section bg via same 100vw
   breakout used above. .clx-getintouch rules ship in homepage.css. */
.clx-svc-page .clx-contact-section{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;background:#F8F8F8;padding:60px 0;}
.clx-svc-page .clx-contact-section > .elementor-container{max-width:1140px;margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;}
.clx-svc-page .clx-contact-section .elementor-col-58{flex:0 0 calc(58% - 20px);max-width:calc(58% - 20px);}
.clx-svc-page .clx-contact-section .elementor-col-42{flex:0 0 calc(42% - 20px);max-width:calc(42% - 20px);}
@media (max-width:900px){
  .clx-svc-page .clx-contact-section .elementor-col-58,
  .clx-svc-page .clx-contact-section .elementor-col-42{flex:0 0 100%;max-width:100%;}
}

/* Sticky position:sticky fails when any ancestor has overflow != visible.
   The theme's critical CSS (inc/critical/service-legacy.css) sets
   body{overflow:hidden} which clips vertical scroll for sticky descendants.
   Restore overflow-y:visible on this page only (keep overflow-x:hidden so
   the 100vw case-studies/contact breakouts don't induce a horizontal
   scrollbar). Scoped by the page slug's body class. */
body.page-vibe-coding-cleanup-services{overflow-x:clip !important;overflow-y:visible !important;}

/* homepage.min.css ships `body.elementor-page .elementor-top-section >
   .elementor-container{max-width:var(--hp-max-w)}`, which leaks onto every
   service page on the homepage-CSS allowlist and caps the Elementor container. It is !important there, so this override must be too.
   That squeezes .svc-in to ~1044px instead of its designed 1140px. Scoped
   override so the family renders at its intended width. 2026-08-26. */
body.elementor-page .elementor-top-section:has(.clx-svc-page) > .elementor-container{max-width:none !important;}


/* ===== "Proof Rows" — Guarded Delivery in Three Movements =========================
   Claude Design handoff design_handoff_guarded_delivery, Concept C.
   Implemented 2026-09-03 in this component's conventions, not dropped in verbatim.

   TOKEN MAPPING (owner: "dont use new ones out of theme for design consistency").
   The handoff names its own palette; each is bound to the token this component
   already defines rather than adding a hex:
     --o    #FA4900  -> var(--svc-orange)   exact match
     --navy #142533  -> var(--svc-ink)      exact match
     --body #6C7A85  -> var(--svc-body)     #727272, theme body grey
     --rule #E7EAEC  -> var(--svc-line)     #ececf0, theme hairline
     --dim  #9BA6AE  -> #AEB4BB             already this component's muted source grey

   FONT: the handoff specifies JetBrains Mono for the movement labels and status
   tokens. The site does not load it and no webfont is being added, so those use
   Cabin with the same uppercase + letter-spacing treatment the component already
   uses for eyebrows. Sizes, spacing, timing and easing are as specified.

   Container queries are preserved: the section sizes to its column, not the
   viewport, so it survives being moved into a narrower slot later.
   ============================================================================= */
/* Top padding only. The handoff pads both ends because it was authored as a
   standalone section; here the parent .svc-sec already supplies the bottom
   gap, and stacking both left ~146px of dead space before the next heading. */
.clx-svc-page .gd{container-type:inline-size;font-family:'Cabin',sans-serif;color:var(--svc-ink);background:#fff;padding:clamp(24px,4.4cqw,60px) 0 0;}
/* Full layout width, not the handoff's 66ch measure (owner 2026-09-03), so the
   head block lines up with the section intro above it. */
.clx-svc-page .gd__head{max-width:none;}
.clx-svc-page .gd h3{margin:0;font-family:'Cabin',sans-serif;font-size:clamp(25px,3.4cqw,44px);font-weight:600;letter-spacing:-.8px;line-height:1.12;text-wrap:balance;color:var(--svc-ink);}
/* Matched to the section intro paragraphs above (.svc-appr-intro p): 18px / 28px
   Cabin in body grey, rather than the handoff's smaller fluid clamp. Two intro
   paragraphs at different sizes in one section read as a mistake. */
.clx-svc-page .gd__intro{margin:clamp(14px,1.6cqw,20px) 0 0;font-family:'Cabin',sans-serif;font-size:18px;line-height:28px;font-weight:400;color:var(--svc-body);text-wrap:pretty;}
.clx-svc-page .gd h4{margin:0;font-family:'Cabin',sans-serif;font-size:clamp(17px,1.7cqw,22px);font-weight:600;letter-spacing:-.3px;line-height:1.2;color:var(--svc-ink);}
.clx-svc-page .gd__copy{margin:0;font-family:'Cabin',sans-serif;font-size:clamp(13.5px,1.22cqw,15.5px);line-height:1.6;font-weight:400;color:var(--svc-body);text-wrap:pretty;}
/* Cabin standing in for JetBrains Mono, uppercase + tracked so it still reads as a label. */
.clx-svc-page .gd__n{font-family:'Cabin',sans-serif;font-size:clamp(10px,.92cqw,12px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#AEB4BB;}

.clx-svc-page .gd__rows{margin-top:clamp(28px,3.6cqw,50px);border-top:1px solid var(--svc-line);}
.clx-svc-page .gd__row{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(150px,.9fr) minmax(0,1.8fr) minmax(112px,auto);gap:clamp(16px,2.6cqw,40px);align-items:start;padding:clamp(20px,2.6cqw,32px) clamp(2px,.6cqw,8px);border-bottom:1px solid var(--svc-line);opacity:0;transform:translateY(10px);transition:opacity .5s ease var(--d,0s),transform .5s ease var(--d,0s);}
.clx-svc-page .gd__row:nth-child(2){--d:.5s;}
.clx-svc-page .gd__row:nth-child(3){--d:1s;}
.clx-svc-page .gd.is-in .gd__row{opacity:1;transform:none;}

.clx-svc-page .gd__scan{position:absolute;top:0;bottom:0;width:22%;left:-24%;pointer-events:none;background:linear-gradient(to right,rgba(250,73,0,0),rgba(250,73,0,.09),rgba(250,73,0,0));}
.clx-svc-page .gd.is-in .gd__row .gd__scan{animation:gdScan 1.15s cubic-bezier(.45,0,.35,1) both;animation-delay:calc(var(--d,0s) + .2s);}
@keyframes gdScan{from{left:-24%}to{left:104%}}

.clx-svc-page .gd__id{display:flex;flex-direction:column;gap:6px;min-width:0;}
.clx-svc-page .gd__bar{height:2px;background:var(--svc-line);position:relative;margin-bottom:2px;}
.clx-svc-page .gd__bar::after{content:"";position:absolute;inset:0;background:var(--svc-orange);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.45,0,.25,1);}
.clx-svc-page .gd.is-in .gd__row .gd__bar::after{transform:scaleX(1);transition-delay:calc(var(--d,0s) + .2s);}

.clx-svc-page .gd__token{display:inline-flex;align-items:center;gap:7px;justify-self:start;border:1px solid var(--svc-line);border-radius:2px;padding:6px 10px;font-family:'Cabin',sans-serif;font-size:clamp(9.5px,.86cqw,10.5px);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#AEB4BB;white-space:nowrap;transition:color .4s ease,border-color .4s ease;}
.clx-svc-page .gd__token em{display:grid;place-items:center;width:11px;height:11px;font-style:normal;}
.clx-svc-page .gd__token em svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.clx-svc-page .gd__token .on{display:none;}
.clx-svc-page .gd.is-in .gd__row .gd__token{color:var(--svc-orange);border-color:var(--svc-orange);transition-delay:calc(var(--d,0s) + 1.1s);}
.clx-svc-page .gd.is-in .gd__row .gd__token .off{display:none;}
.clx-svc-page .gd.is-in .gd__row .gd__token .on{display:inline;}

@container (max-width:760px){
  .clx-svc-page .gd__row{grid-template-columns:1fr;gap:clamp(10px,2cqw,14px);}
}
/* Mandatory per the handoff: final state, no motion, no sweep. */
@media (prefers-reduced-motion:reduce){
  .clx-svc-page .gd *{transition:none!important;animation:none!important;}
  .clx-svc-page .gd__row{opacity:1;transform:none;}
  .clx-svc-page .gd__bar::after{transform:scaleX(1);}
  .clx-svc-page .gd__token{color:var(--svc-orange);border-color:var(--svc-orange);}
  .clx-svc-page .gd__token .off{display:none;}
  .clx-svc-page .gd__token .on{display:inline;}
  .clx-svc-page .gd__scan{display:none;}
}

/* ===== SECTION 3.5 — Platform Specific Vibe Coding as a Service =================
   Added 2026-09-03. Two blocks modelled on /seo-reseller/: an image-left /
   text-right split (after clx-sr-whatis) and an old-vs-new comparison built on
   CSS subgrid so both columns' rows stay aligned (after clx-sr-compare).
   Theme tokens only, no new hexes, no new fonts.
   ============================================================================= */
/* Media column weighted 1.35 against the copy's 1. The clip is 16:9 and its
   edges carry the branded mug and the book spines, so it is given width rather
   than being stretched to the copy column's height: matching that height would
   crop 36% horizontally and cut both. Remaining height difference is absorbed
   by align-items:center. */
.clx-svc-page .svc-pvs-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,3.4vw,52px);align-items:center;margin-top:40px;}
.clx-svc-page .svc-pvs-fig{margin:0;line-height:0;border-radius:16px;overflow:hidden;box-shadow:0 12px 30px rgba(20,20,40,.09);}
/* 16/9, matching the supplied clip. object-fit:cover so a future recut at a
   different ratio still fills the frame instead of letterboxing. */
.clx-svc-page .svc-pvs-fig img,
.clx-svc-page .svc-pvs-vid{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
/* Placeholder until the artwork lands. Deliberately plain and labelled so it can
   never be mistaken for finished design in a review. */
.clx-svc-page .svc-pvs-ph{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--svc-paper);border:1px dashed var(--svc-line-2);}
.clx-svc-page .svc-pvs-ph-t{font-family:'Cabin',sans-serif;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--svc-muted);}
.clx-svc-page .svc-pvs-ph-p{font-family:'Cabin',sans-serif;font-size:11px;color:#AEB4BB;}

.clx-svc-page .svc-pvs-h3{font-family:'Cabin',sans-serif;font-size:clamp(22px,2.4vw,30px);font-weight:600;line-height:1.2;letter-spacing:-.4px;color:var(--svc-ink);margin:0 0 14px;}
/* Matched to the section intro (.svc-sec-intro and .gd__intro): 18px / 28px in
   body grey. Was 16px / 27px, which read as a smaller tier than the intro above
   it for no reason. */
.clx-svc-page .svc-pvs-copy p{font-family:'Cabin',sans-serif;font-size:18px;line-height:28px;color:var(--svc-body);margin:0 0 16px;}
.clx-svc-page .svc-pvs-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;}
.clx-svc-page .svc-pvs-list li{display:flex;align-items:flex-start;gap:10px;font-family:'Cabin',sans-serif;font-size:15px;line-height:1.5;color:var(--svc-ink);}
.clx-svc-page .svc-pvs-list svg{flex:0 0 auto;width:18px;height:18px;margin-top:2px;color:var(--svc-orange);}

/* Full container width, no measure cap, and the same 18px / 28px body grey as
   the section intro above it (owner 2026-09-03). */
.clx-svc-page .svc-pvs-lead{font-family:'Cabin',sans-serif;font-size:18px;line-height:28px;color:var(--svc-body);margin:clamp(40px,4.4vw,60px) 0 0;max-width:none;}

/* Comparison. Subgrid keeps row N of both columns on the same baseline even when
   one side wraps to two lines; the centre hairline is a ::before on the grid. */
.clx-svc-page .svc-pvs-cmp{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,4vw,56px);grid-template-rows:auto repeat(6,auto);margin-top:28px;}
.clx-svc-page .svc-pvs-cmp::before{content:"";position:absolute;top:6px;bottom:6px;left:50%;width:1px;background:linear-gradient(to bottom,transparent,var(--svc-line-2) 12%,var(--svc-line-2) 88%,transparent);transform:translateX(-50%);}
.clx-svc-page .svc-pvs-col{display:grid;grid-template-rows:subgrid;grid-row:1 / -1;align-content:start;min-width:0;}
.clx-svc-page .svc-pvs-ch{padding:0 4px 6px;}
.clx-svc-page .svc-pvs-tag{display:inline-block;font-family:'Cabin',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;}
.clx-svc-page .svc-pvs-tag-old{color:var(--svc-muted);}
.clx-svc-page .svc-pvs-tag-new{color:var(--svc-orange);}
.clx-svc-page .svc-pvs-ch h4{font-family:'Cabin',sans-serif;font-size:18px;line-height:1.3;font-weight:700;color:var(--svc-ink);margin:0;}
.clx-svc-page .svc-pvs-cell{display:flex;align-items:flex-start;gap:12px;padding:16px 4px;border-top:1px solid var(--svc-line);min-width:0;opacity:0;transform:translateY(8px);transition:opacity .45s ease var(--d,0s),transform .45s ease var(--d,0s);}
.clx-svc-page .svc-pvs-cmp.is-in .svc-pvs-cell{opacity:1;transform:none;}
.clx-svc-page .svc-pvs-col .svc-pvs-cell:nth-of-type(2){--d:.08s}
.clx-svc-page .svc-pvs-col .svc-pvs-cell:nth-of-type(3){--d:.16s}
.clx-svc-page .svc-pvs-col .svc-pvs-cell:nth-of-type(4){--d:.24s}
.clx-svc-page .svc-pvs-col .svc-pvs-cell:nth-of-type(5){--d:.32s}
.clx-svc-page .svc-pvs-col .svc-pvs-cell:nth-of-type(6){--d:.40s}
.clx-svc-page .svc-pvs-col .svc-pvs-cell:nth-of-type(7){--d:.48s}
.clx-svc-page .svc-pvs-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 .svc-pvs-ico svg{width:18px;height:18px;}
.clx-svc-page .svc-pvs-ico-x{background:#FDECEC;color:#D64545;}
.clx-svc-page .svc-pvs-ico-ok{background:var(--svc-orange-soft);color:var(--svc-orange);}
.clx-svc-page .svc-pvs-txt{font-family:'Cabin',sans-serif;font-size:15.5px;line-height:1.5;color:var(--svc-ink-2);min-width:0;overflow-wrap:break-word;}

@media (max-width:900px){
  .clx-svc-page .svc-pvs-split{grid-template-columns:1fr;}
}
@media (max-width:780px){
  /* Stack the two groups whole so each heading stays with its own list and the
     x / check items never interleave. Subgrid is dropped here on purpose. */
  .clx-svc-page .svc-pvs-cmp{grid-template-columns:1fr;grid-template-rows:none;row-gap:34px;}
  .clx-svc-page .svc-pvs-cmp::before{display:none;}
  .clx-svc-page .svc-pvs-col{display:block;grid-row:auto;}
}
@media (prefers-reduced-motion:reduce){
  .clx-svc-page .svc-pvs-cell{opacity:1;transform:none;transition:none;}
}

/* Reduced motion: the looping clip is decorative, so it is held on its poster
   frame instead of playing. Paused via JS in platform-service.php; this keeps the
   frame visible and stops any residual transition. */
@media (prefers-reduced-motion:reduce){
  .clx-svc-page .svc-pvs-vid{transition:none;}
}

/* Cross link to the cleanup hub, sitting under the comparison. Same 18px / 28px
   body type as the section intro; the link itself uses the component's existing
   inline link treatment. */
.clx-svc-page .svc-pvs-x{font-family:'Cabin',sans-serif;font-size:18px;line-height:28px;color:var(--svc-body);margin:clamp(28px,3vw,40px) 0 0;}
.clx-svc-page .svc-pvs-x a{color:var(--svc-orange);text-decoration:underline;text-underline-offset:3px;font-weight:600;}



/* ===== PLATFORM COVERAGE MATRIX =============================================
   Ported 2026-09-03 from clx-svc-erp's ERP coverage matrix (the "Which ERP
   Delivers What" block). Same interaction model: per-platform score cards that
   highlight a column, category filters, a legend, a bounded scroll box with the
   header row and the capability column both pinned, and expandable rows whose
   detail cards carry the source links.

   TOKEN VOCABULARY REMAPPED. The ERP scale was native/both/app/limited/none.
   Ours is native/integration/partial/none/unknown/na, so the dot marks are:
     native      solid orange        has it, first class
     integration ringed orange       has it, through a named third party
     partial     orange bar          present but limited
     none        hollow ring         documented as absent
     unknown     grey bar            searched the docs, could not verify
     na          small grey dash     not applicable to this product category

   NOT PORTED: the ERP block's trailing .svc-in full-width overrides. Those strip
   the container inset, which is right for the ERP page and wrong for this one.
   ========================================================================== */
/* ============================================================================
   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.integration{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.partial{width:13px;height:5px;border-radius:2.5px;background:#FA4900;}
.clx-svc-page .svc-coverage .dot.unknown{width:13px;height:4px;border-radius:2px;background:#b7bcc4;}
.clx-svc-page .svc-coverage .dot.na{width:9px;height:1.5px;border-radius:1px;background:#d0d3d9;}
.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


/* ---- matrix rules continued (ported 2026-09-03) ------------------------------
   Second half of the ERP coverage block. My first extraction stopped at line 209
   and took only 34 of 106 selectors, which broke the table: no sticky header, no
   column widths, no scroll box, no detail card layout.

   DELIBERATELY SKIPPED: the ERP file's `.svc-in{padding-left:0;padding-right:0}`
   override. That strips the container inset to give the ERP matrix the full 1140,
   and applying it here would knock every other section on this page out of
   alignment. This matrix lives inside the normal 1044 inset and scrolls instead.
   -------------------------------------------------------------------------- */
.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;}
/* max-width:100ch dropped (owner 2026-09-03). At 12.5px that measured about
   625px inside a 1044px container, so the provenance line stopped well short of
   the table it describes and read as misaligned. */
.clx-svc-page .svc-coverage .cvg-foot-lead{margin:0 0 12px;font-size:12.5px;line-height:1.6;color:#9a9ea7;max-width:none;}
.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);}
}

/* Scoping note under the archetypes table (2026-09-03). Sits tight to the table
   it qualifies, matching the caption spacing above it. */
.clx-svc-page .svc-eng-note{font-family:'Cabin',sans-serif;font-size:15px;line-height:1.6;color:var(--svc-body);margin:14px 0 0;max-width:none;}