/* clx-es — Enterprise Software (L2 hub) scoped delta layer.
 * Chassis + palette cloned from clx-svc-erp; CARDS will use clx-svc-card (DE-family).
 * References the shared --svc-* tokens defined on .clx-svc-page (clx-svc-ai.css).
 * ZERO dependency on site-wide.css. Enqueued only on /enterprise-software/.
 *
 * Build state: SCAFFOLD. Only the Section 2 economic-thesis stub is styled here;
 * section styles append as parts land.
 */

/* ================= Section 5.5 — Method Flexes By Platform Type =================
   Four platform-type rows: architecture diagram LEFT, copy RIGHT (H4 title +
   three bold lead-in items). Replicates the DE .svc-tl-block two-column pattern
   ES-scoped (that sheet isn't loaded here). Diagram-left for every row, matching
   the supplied reference. */
/* 5.1 is a SUB-section of Section 5 (How Delivery Works), not its own section:
   drop the .svc-sec top separator + top padding so it reads as a continuation of
   the phase timeline above it (keeps only the bottom rhythm before Section 6). */
.clx-svc-page .svc-es-platform-flex::before { display:none; }
.clx-svc-page .svc-es-platform-flex { padding-top:0; }
/* Method (Section 5) hands straight down into its 5.1 sub-section, so cut its big
   section bottom-padding (80px) right down — the stat's own 24px margin + this is
   enough of a gap before the bridge line. (Its TOP padding + separator stay.) */
.clx-svc-page .svc-es-method { padding-bottom:16px; }
.clx-svc-page .es-pf-inner { max-width:1132px; margin:0 auto; padding:0 20px; }
/* Bridge line — closes the parent phases and hands off to this sub-section.
   Left-aligned + full width to match the parent Section 5 copy above, so the
   whole thing reads as one continuous flow (not a new centered section). */
.clx-svc-page .es-pf-bridge {
  font-family:'Cabin',sans-serif; font-size:18px; line-height:28px; color:#727272;
  text-align:left; max-width:none; margin:0 0 26px;
}
/* H3 sub-heading — left-aligned, sized clearly below the parent H2. */
.clx-svc-page .es-pf-heading {
  font-family:'Cabin',sans-serif; font-weight:500; font-size:clamp(24px,3vw,34px);
  line-height:1.2; letter-spacing:-0.6px; color:#142533; text-align:left; margin:0 0 14px;
}
.clx-svc-page .es-pf-intro {
  font-family:'Cabin',sans-serif; font-size:18px; line-height:28px; color:#727272;
  text-align:left; max-width:none; margin:0 0 14px;
}
.clx-svc-page .es-pf-intro-list {
  list-style:none; margin:0 0 14px; padding:0;
}
.clx-svc-page .es-pf-intro-list li {
  position:relative; padding-left:26px; margin:0 0 10px;
  font-family:'Cabin',sans-serif; font-size:18px; line-height:28px; color:#727272;
}
.clx-svc-page .es-pf-intro-list li:last-child { margin-bottom:0; }
.clx-svc-page .es-pf-intro-list li::before {
  content:""; position:absolute; left:6px; top:11px; width:7px; height:7px;
  border-radius:50%; background:var(--svc-orange,#FA4900);
}
.clx-svc-page .es-pf-intro-list li b { color:#142533; font-weight:600; }
.clx-svc-page .es-pf-intro--close { margin:0 0 56px; }
.clx-svc-page .es-pf-row {
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  margin:0 0 64px;
}
.clx-svc-page .es-pf-row:last-child { margin-bottom:0; }
.clx-svc-page .es-pf-media img {
  width:100%; height:auto; display:block; border-radius:20px;
  border:1px solid #E7E9EC; background:#fff;
  cursor:zoom-in; transition:box-shadow .2s ease;
}
.clx-svc-page .es-pf-media img:hover { box-shadow:0 8px 28px rgba(0,0,0,.10); }
/* small "expand" affordance so users know the dense diagram opens larger */
.clx-svc-page .es-pf-media { position:relative; }
.clx-svc-page .es-pf-media::after {
  content:"\2922"; /* diagonal expand glyph */
  position:absolute; top:12px; right:12px; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,37,51,.72); color:#fff; border-radius:8px;
  font-size:16px; line-height:1; pointer-events:none;
  opacity:0; transition:opacity .2s ease;
}
.clx-svc-page .es-pf-media:hover::after { opacity:1; }

/* Diagram lightbox — injected once by clx-es.js, click/Esc to close. */
.clx-es-lightbox {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:32px; background:rgba(12,18,26,.86);
  opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s ease;
  cursor:zoom-out;
}
.clx-es-lightbox.is-open { opacity:1; visibility:visible; }
.clx-es-lightbox img {
  max-width:min(1200px,96vw); max-height:92vh; width:auto; height:auto;
  border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.5); background:#fff;
}
.clx-es-lightbox-close {
  position:absolute; top:20px; right:24px; width:44px; height:44px;
  border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff;
  font-size:24px; line-height:1; cursor:pointer;
}
.clx-es-lightbox-close:hover { background:rgba(255,255,255,.26); }
.clx-svc-page .es-pf-title {
  font-family:'Cabin',sans-serif; font-weight:600; font-size:clamp(24px,2.6vw,30px);
  line-height:1.25; letter-spacing:-0.4px; color:#142533; margin:0 0 20px;
  display:inline-block; padding-bottom:8px;
  border-bottom:2px solid var(--svc-orange, #FA4900);
}
.clx-svc-page .es-pf-item {
  font-family:'DM Sans',sans-serif; font-size:16px; line-height:26px; color:#4D5660;
  margin:0 0 16px;
}
.clx-svc-page .es-pf-item:last-child { margin-bottom:0; }
.clx-svc-page .es-pf-item b { color:#142533; font-weight:700; }
/* Tablet / phone: stack the diagram above the copy. */
@media (max-width:1024px){
  .clx-svc-page .es-pf-row { grid-template-columns:1fr; gap:28px; margin-bottom:48px; }
  .clx-svc-page .es-pf-item { max-width:none; }
}

/* The shared .clx-svc-page .svc-sec::before draws a 1px divider at the top of every
   section; the economics section sits directly under the hero, so that line reads as
   an orphaned separator above the H2. Suppress it here (DE has none there either). */
.clx-svc-page .svc-es-econ::before { display:none; }

/* ---- On-this-page TOC — mobile FAB live-section-label deltas.
   The base svc-toc styles (desktop overlay nav, FAB, bottom sheet) ship in the
   shared clx-svc-ai.css; only these FAB current-section-label rules live in the
   per-page delta (ported verbatim from clx-svc-erp.css). ---- */
.clx-svc-page .svc-toc-fab .svc-toc-fab-cur{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.1;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;text-align:left;transition:max-width .34s cubic-bezier(.4,0,.2,1),opacity .26s ease,padding .34s ease;}
.clx-svc-page .svc-toc-fab.has-cur{width:auto;border-radius:21px;padding:0 13px 0 2px;gap:6px;justify-content:flex-start;}
.clx-svc-page .svc-toc-fab.has-cur > svg{flex:none;margin-left:6px;}
.clx-svc-page .svc-toc-fab.has-cur .svc-toc-fab-cur{max-width:148px;opacity:1;padding-left:5px;}
.clx-svc-page .svc-toc-fab .svc-toc-fab-cur .n{font-size:8px;font-weight:700;letter-spacing:.1em;opacity:.78;text-transform:uppercase;}
.clx-svc-page .svc-toc-fab .svc-toc-fab-cur .t{font-size:11.5px;font-weight:600;letter-spacing:-.1px;max-width:140px;overflow:hidden;text-overflow:ellipsis;}

/* ---- Section 3 — Practices grid + Row-1 right-rail ----
   The card grid (.svc-cards-grid, 3-col) + the image-overlay banner
   (.clx-ai-sysdesign-banner--aside) are styled by the global site-wide.css;
   card internals by clx-svc-card.css. The rail column layout + the placeholder
   partner-badge tiles are replicated here from the DE clx-cost-curves.css aside
   rules (170×128 tiles, fixed heights) but ES-scoped + env-portable (no page-id).

   The grid + heading are NOT wrapped in .svc-in (which caps at 1100px) — they
   sit at the grid's native 1132px box so the row width matches /digital-engineering/. */
.clx-svc-page .svc-es-practices .svc-es-cards-head {
  max-width:1132px; margin:0 auto 36px; padding:0 20px;
}
/* Grid = the DE cards-grid layout (values replicated, ES-scoped, no DE sheet):
   two flexible card columns + a fixed 360px rail, tight 24px gaps (the base
   site-wide.css uses 80px row-gap — that was the "too much space between rows"). */
.clx-svc-page .svc-es-practices .svc-cards-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:0;
}

/* Rail column — DE aside behaviour: stretches to the Row-1 height, badges pinned
   to the top, image-overlay banner grows to fill down to the card bottom
   (justify-content:space-between + banner flex:1). With 4 badges (2 rows) instead
   of DE's 6 (3 rows) the overlay gets more height and reads larger. */
.clx-svc-page .svc-es-practices .svc-card-aside {
  align-self:stretch;              /* fill the Row-1 height so the rail bottom meets the card floor */
  display:flex; flex-direction:column; justify-content:flex-start;
  gap:24px; margin-top:52px;       /* aligns the badges with the card content line (below the icon) */
  min-height:0;
}
/* Banner grows to fill the rail down to the card floor, but never below its own
   content (min-height keeps it from collapsing when space is tight). */
.clx-svc-page .svc-es-practices .clx-ai-sysdesign-banner--aside { flex:1 1 auto; min-height:260px; }

/* 2×2 partner badges — DE tile footprint (170×128). Real partner artwork
   (Zoho + Odoo from ERP, Microsoft Solutions Partner, HubSpot from DM). */
/* NOTE: the badge grid carries the shared .clx-logo-grid class, whose base rule
   (site-wide.css) sets height:100% + flex:1 1 auto + align-content:stretch —
   that made the badges stretch to the FULL aside height (843px), leaving the
   banner no room to fill and forcing it to overflow. Override all three here so
   the badges keep their natural 2×128 height and the banner gets the remainder. */
/* Fluid 2×2 badge grid — fills whatever the (now-equal) rail column gives it,
   so equalizing the card columns can't crop the aside. Tiles hold the DE
   170:128 footprint via aspect-ratio and fill edge-to-edge with cover (the
   /erp-services/ treatment): the artwork's own background becomes the tile.
   Microsoft + HubSpot (~1.34:1) match the tile aspect and don't crop; the
   square Zoho/Odoo lockups crop ~12% top+bottom. */
.clx-svc-page .svc-es-practices .clx-es-badge-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:12px; flex:0 0 auto; width:100%; height:auto; align-content:start;
}
.clx-svc-page .svc-es-practices .clx-es-badge {
  width:auto; height:auto; aspect-ratio:170/128; padding:0;
  background:#fff; border:1px solid #E3E3E3; border-radius:16px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
/* cover-fill edge to edge (4-class specificity beats the shared .clx-logo-tile
   img 70px cap in site-wide.css). */
.clx-svc-page .svc-es-practices .clx-es-badge img {
  width:100%; height:100%; max-width:none; max-height:none;
  object-fit:cover; display:block;
}
/* Banner (Row-1 "Rollouts that hold") fills the fluid aside width. */
.clx-svc-page .svc-es-practices .clx-ai-sysdesign-banner__media,
.clx-svc-page .svc-es-practices .clx-ai-sysdesign-banner__media img { width:100%; }

/* ---- Card rhythm + fit (handoff fixes 2026-07-31, ES-scoped) ----
   Reserve description + chip heights for even vertical rhythm so the divider,
   KPI tiles and outcome start near the same baseline across cards. */
.clx-svc-page .svc-es-practices .svc-card-desc { min-height:4.9em; }
.clx-svc-page .svc-es-practices .clx-svc-card__chips { min-height:5.2em; align-content:flex-start; }
/* Heading wrap + overflow-safe token columns + token wrapping are now GLOBAL in
   clx-svc-card.css (promoted 2026-07-31, [[project_svc_card_global_hardening]]).
   Only the ES-specific smaller KPI number size stays scoped here. */
.clx-svc-page .svc-es-practices .clx-svc-card__stats .clx-eb-num {
  font-size:20px; line-height:1.15;
}
/* Pin the VIEW MORE footer to the card bottom so buttons align across each row.
   Needed because the shared .clx-svc-card__foot { margin-top:20px } (clx-svc-card
   .css:208, a deliberate GLOBAL default) overrides the theme's
   .svc-card-link-wrap { margin-top:auto }. ES-scoped only — other pages keep the
   20px default (auto there left unwanted whitespace on uneven-height cards; on ES
   the equal columns + desc/chip min-heights make auto align cleanly). The foot is
   a direct flex child of .svc-card (display:flex;column), so auto pins it. */
.clx-svc-page .svc-es-practices .svc-card .clx-svc-card__foot {
  margin-top: auto !important;
}
/* Tablet: collapse the fixed 3-col (1fr 1fr 360px) to 2 equal columns — our own
   grid override out-specifies the base site-wide.css responsive rules, so we must
   re-declare the breakpoints here. The rail (aside) flows to the next row; badges
   go fluid and the rail no longer needs to match a card's height. */
@media (max-width:1024px){
  .clx-svc-page .svc-es-practices .svc-cards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .clx-svc-page .svc-es-practices .svc-card-aside { align-self:auto; margin-top:0; }
  .clx-svc-page .svc-es-practices .clx-ai-sysdesign-banner--aside { flex:0 0 auto; min-height:280px; }
  .clx-svc-page .svc-es-practices .clx-es-badge-grid { grid-template-columns:1fr 1fr; }
  /* aspect-ratio from the base rule keeps the tile shape; no min-height override. */
}
/* Phone: single column — every card and the rail stack full-width. */
@media (max-width:768px){
  .clx-svc-page .svc-es-practices .svc-cards-grid { grid-template-columns:1fr; }
}

/* ---- Section 2 — economic thesis (stub; chart pending data) ----
   DE-family Section 2 shape: two columns — heading + intro text on the LEFT,
   the chart/visual on the RIGHT (same proportions as the seo-reseller economics
   section: ~1.05fr text / 1fr visual, 48px gap, vertically centered). */
.clx-svc-page .svc-es-grid {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:56px;
  align-items:center;
}
@media (max-width:880px){
  .clx-svc-page .svc-es-grid { grid-template-columns:1fr; gap:32px; }
}

/* H2 replicates the shared .svc-heading-title (DE/ERP Section-2 heading) so the
   format matches the other pages, kept in scoped CSS (no core/site-wide dependency). */
.clx-svc-page .svc-es-h2 {
  font-family:'Cabin',sans-serif;
  font-size:52px; font-weight:500; line-height:60px; letter-spacing:-1.56px;
  color:#142533;
  margin:0 0 18px;
}
@media (max-width:1024px){
  .clx-svc-page .svc-es-h2 { font-size:38px; line-height:44px; letter-spacing:-1px; }
}
@media (max-width:600px){
  .clx-svc-page .svc-es-h2 { font-size:28px; line-height:34px; }
}
/* intro body replicates the shared .svc-heading-desc (DE/ERP Section-2 intro). */
.clx-svc-page .svc-es-text p {
  font-size:18px; line-height:28px; color:#898D90;
  margin:0 0 16px;
}
/* leading line — the honest-measure sentence, emphasized above the detail. */
.clx-svc-page .svc-es-text p.svc-es-lead {
  font-family:'Cabin',sans-serif;
  font-size:20px; line-height:30px; font-weight:500; color:#142533;
  margin:0 0 18px;
}
@media (max-width:600px){
  .clx-svc-page .svc-es-text p { font-size:16px; line-height:24px; }
}

/* Section-2 cost diagram (concept D: two bars, fragmented vs consolidated).
   Card shell matches the DE cost-curve card; JS (clx-es.js) builds + animates the
   SVG and counts the readout on every scroll-in. */
.clx-svc-page .svc-es-viz {
  background:linear-gradient(#FFF6F1,#fff);
  border:1px solid #E3E3E3; border-radius:20px;
  padding:16px 14px 18px;
  display:flex; flex-direction:column;
}
.clx-svc-page .svc-es-viz-meta {
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  padding:6px 6px 10px;
}
/* labels use Cabin + our --svc-* palette (matches DE cost-curves + .clx-svc-page). */
.clx-svc-page .svc-es-viz-eyebrow {
  font-family:'Cabin',sans-serif; font-weight:600;
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--svc-muted);
  max-width:170px; line-height:1.5;
}
.clx-svc-page .svc-es-viz-rd { display:flex; gap:18px; }
.clx-svc-page .svc-es-viz-rd .rd { display:flex; flex-direction:column; gap:3px; }
.clx-svc-page .svc-es-viz-rd .rd span {
  font-family:'Cabin',sans-serif; font-weight:600;
  font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--svc-muted);
}
.clx-svc-page .svc-es-viz-rd .rd b {
  font-family:'Cabin',sans-serif; font-size:20px; font-weight:700; letter-spacing:-.4px;
  color:var(--svc-ink); line-height:1; font-variant-numeric:tabular-nums;
}
.clx-svc-page .svc-es-viz-rd .rd--acc b { color:var(--svc-orange); }
.clx-svc-page .svc-es-viz svg { width:100%; height:auto; display:block; }
.clx-svc-page .svc-es-viz .t-unit {
  font-family:'Cabin',sans-serif; font-weight:500; font-size:12.5px; letter-spacing:.2px; fill:var(--svc-muted);
}
.clx-svc-page .svc-es-viz .t-cap {
  font-family:'Cabin',sans-serif; font-weight:600; font-size:11px; letter-spacing:1.2px;
  text-transform:uppercase; fill:var(--svc-muted);
}

/* ===== Section 6 — Why Clixlogix: stat boxes dropped =====
   Without the right-hand stat grid, the 7 numbered reasons span the full width
   in two balanced columns instead of the ERP bullets/stats split. */
.clx-svc-page .svc-es-why .svc-why-grid { grid-template-columns:1fr; }
.clx-svc-page .svc-es-why .svc-why-list {
  display:grid; grid-template-columns:1fr 1fr; gap:24px 48px; align-content:start;
}
@media (max-width:768px){
  .clx-svc-page .svc-es-why .svc-why-list { grid-template-columns:1fr; }
}

/* ===== Section 8 — Case Studies: drop the shared .clx-casestudies-section gray =====
   The keystroke-project widget is wrapped in .clx-casestudies-section (for the grid
   layout), which carries the site-wide #F8F8F8 background. Force it transparent so
   the section sits on the page's white background. */
/* The case-studies section is a top-level Elementor section (ERP EAE-slider clone),
   OUTSIDE .clx-svc-page, carrying .clx-casestudies-section (site-wide #F8F8F8 gray).
   Target it by slug + id (env-portable) to force it transparent. */
body.page-enterprise-software #case-studies,
body.page-enterprise-software #case-studies.clx-casestudies-section,
body.page-enterprise-software #case-studies .elementor-widget-container { background:transparent !important; }
/* Match the .svc-sec centered hairline separator the in-component sections have
   (this Elementor section can't inherit --svc-line from .clx-svc-page). */
body.page-enterprise-software #case-studies { position:relative; }
body.page-enterprise-software #case-studies::before {
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1100px,calc(100% - 40px)); height:1px; background:#ececf0;
}

/* ===================== Section 9 — Partnership "Stepper Rail" =====================
   Established page palette only (--svc-ink #111111 / --svc-orange #FA4900 /
   --svc-muted / --svc-line #ececf0; existing card border #E3E3E3) — no new colours.
   LEFT: vertical numbered stepper + tab panels. RIGHT: a large image column that
   carries real weight (~45% of the row). Standard white section + hairline. */
/* Black (not the page navy) for this section's heading too, per request. */
.clx-svc-page .svc-es-buys .svc-sec-h2 { color:#111111; }
.clx-svc-page .es-by {
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(400px,0.88fr);
  gap:52px; margin-top:40px; align-items:stretch;
}
.clx-svc-page .es-by-left { display:grid; grid-template-columns:200px minmax(0,1fr); gap:36px; align-items:start; }
/* Stepper rail */
.clx-svc-page .es-by-rail { display:flex; flex-direction:column; }
.clx-svc-page .es-by-step {
  position:relative; display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:start;
  background:none; border:0; padding:0 0 26px; margin:0; text-align:left; cursor:pointer; font:inherit; color:inherit;
}
.clx-svc-page .es-by-step:last-child { padding-bottom:0; }
.clx-svc-page .es-by-step:not(:last-child)::before {
  content:""; position:absolute; left:11px; top:22px; bottom:0; width:2px; background:var(--svc-line,#ececf0);
}
.clx-svc-page .es-by-node {
  width:22px; height:22px; border-radius:50%; border:2px solid #D7D7DE; background:#fff;
  position:relative; z-index:1; margin-top:2px; transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.clx-svc-page .es-by-step.is-active .es-by-node {
  border-color:var(--svc-orange,#FA4900); background:var(--svc-orange,#FA4900); box-shadow:0 0 0 5px rgba(250,73,0,.14);
}
.clx-svc-page .es-by-step-txt { display:flex; flex-direction:column; gap:3px; padding-top:0; }
.clx-svc-page .es-by-num {
  font-family:'Cabin',sans-serif; font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--svc-muted,#757589);
}
.clx-svc-page .es-by-step.is-active .es-by-num { color:var(--svc-orange,#FA4900); }
.clx-svc-page .es-by-lab {
  font-family:'Cabin',sans-serif; font-size:17px; font-weight:500; line-height:1.25; color:var(--svc-muted,#757589);
  transition:color .16s ease;
}
.clx-svc-page .es-by-step:hover .es-by-lab { color:#111111; }
.clx-svc-page .es-by-step.is-active .es-by-lab { color:#111111; font-weight:600; }
/* Panels — all four stacked in ONE grid cell so the container is always the
   height of the TALLEST panel; switching tabs never reflows (no jump). Inactive
   panels stay in layout (visibility:hidden) instead of display:none. */
.clx-svc-page .es-by-panels { display:grid; }
.clx-svc-page .es-by-panel { grid-area:1 / 1; visibility:hidden; }
.clx-svc-page .es-by-panel.is-active { visibility:visible; }
.clx-svc-page .es-by-h3 {
  font-family:'Cabin',sans-serif; font-size:clamp(20px,2.2vw,26px); font-weight:600; line-height:1.3;
  letter-spacing:-.3px; color:#111111; margin:0 0 22px;
}
.clx-svc-page .es-by-stats { list-style:none; margin:0 0 24px; padding:0; }
.clx-svc-page .es-by-stat { position:relative; padding-left:22px; margin:0 0 18px; }
.clx-svc-page .es-by-stat:last-child { margin-bottom:0; }
.clx-svc-page .es-by-stat::before {
  content:""; position:absolute; left:0; top:6px; width:9px; height:9px; border-radius:2px;
  background:var(--svc-orange,#FA4900); transform:rotate(45deg);
}
.clx-svc-page .es-by-st-t { display:block; font-family:'Cabin',sans-serif; font-size:16px; font-weight:700; color:#111111; margin-bottom:2px; }
.clx-svc-page .es-by-st-d { display:block; font-family:'DM Sans',sans-serif; font-size:14.5px; line-height:1.5; color:var(--svc-muted,#757589); }
.clx-svc-page .es-by-payoff {
  font-family:'Cabin',sans-serif; font-size:16px; font-weight:600; font-style:italic; line-height:1.5;
  color:#111111; margin:0; padding-top:18px; border-top:1px solid var(--svc-line,#ececf0);
}
/* Media (right) — large image column, existing card border treatment (#E3E3E3). */
.clx-svc-page .es-by-media { align-self:stretch; min-height:460px; border-radius:20px; overflow:hidden; border:1px solid #E3E3E3; }
.clx-svc-page .es-by-media img { width:100%; height:100%; min-height:100%; object-fit:cover; display:block; }
/* Tablet / phone: image on top (kept prominent), stepper becomes a wrapping row. */
@media (max-width:1024px){
  .clx-svc-page .es-by { grid-template-columns:1fr; gap:28px; }
  .clx-svc-page .es-by-left { grid-template-columns:1fr; gap:24px; }
  .clx-svc-page .es-by-media { order:-1; min-height:0; }
  .clx-svc-page .es-by-media img { max-height:360px; }
  .clx-svc-page .es-by-rail { flex-direction:row; flex-wrap:wrap; gap:10px 22px; }
  .clx-svc-page .es-by-step { padding-bottom:0; }
  .clx-svc-page .es-by-step:not(:last-child)::before { display:none; }
  .clx-svc-page .es-by-panels { min-height:0; }
}

/* Contact/form section (ERP clone) ships with padding-top:0 — add breathing room
   above the "Just Drop Us A Line" card. */
body.page-enterprise-software #contact { padding-top:80px !important; }