/* clx-svc-lowcode — low-code-only DELTAS on top of the shared clx-svc-ai.css base.
   Keep this file for genuine low-code differences ONLY (sections the AI page lacks,
   or accents that must differ). Everything the two pages share stays in the base
   stylesheet — never copy base rules here. Scope low-code deltas to
   body.page-low-code-development / body.page-low-code-redesign. */

/* "Why Architecture Decisions Compound" is a SUBSECTION that reads in continuation of
   the Low Code Solution Architecture intro — no hard divider, just breathing room. */
body.page-low-code-redesign .clx-svc-page .svc-arch-subh,
body.page-low-code-development .clx-svc-page .svc-arch-subh{font-family:'Cabin',sans-serif;font-weight:500;font-size:clamp(24px,3vw,32px);line-height:1.18;letter-spacing:-.8px;color:#142533;margin:26px 0 12px;}
body.page-low-code-redesign .clx-svc-page .svc-arch-map,
body.page-low-code-development .clx-svc-page .svc-arch-map{margin-top:44px;}

/* Normalize the platform-map title to the page heading scale (its widget CSS forces
   36px/700) — it is a chart heading, subordinate to the "Why Architecture…" subhead. */
body.page-low-code-redesign .clx-svc-page .clx-map h2.clx-map__title,
body.page-low-code-development .clx-svc-page .clx-map h2.clx-map__title{font-family:'Cabin',sans-serif!important;font-weight:500!important;font-size:clamp(22px,2.4vw,26px)!important;line-height:1.2!important;letter-spacing:-.4px!important;color:#142533!important;}

/* Security Assurance — compact dark band (no tabs/image on low-code). Reuses the AI
   security banner text tokens (orange eyebrow, white heading/body). */
body.page-low-code-redesign .clx-svc-page .svc-lcsec,
body.page-low-code-development .clx-svc-page .svc-lcsec{background:#0e0e0f;border-radius:24px;color:#fff;padding:52px 56px;}
body.page-low-code-redesign .clx-svc-page .svc-lcsec .svc-secbanner-body,
body.page-low-code-development .clx-svc-page .svc-lcsec .svc-secbanner-body{max-width:820px;}
body.page-low-code-redesign .clx-svc-page .svc-lcsec .svc-secbanner-body + .svc-secbanner-body,
body.page-low-code-development .clx-svc-page .svc-lcsec .svc-secbanner-body + .svc-secbanner-body{margin-top:14px;}
body.page-low-code-redesign .clx-svc-page .svc-lcsec-cta,
body.page-low-code-development .clx-svc-page .svc-lcsec-cta{margin-top:26px;text-align:right;}
@media (max-width:640px){
  body.page-low-code-redesign .clx-svc-page .svc-lcsec,
  body.page-low-code-development .clx-svc-page .svc-lcsec{padding:36px 28px;}
}

/* Investment CTA: "Talk to a Low Code Architect" (265px) is wider than the Industries
   CTA, so cap the foot text a touch narrower — keeps the CTA on the same row (vertically
   centered via the base align-items:center) instead of wrapping to a second line. */
body.page-low-code-redesign .clx-svc-page .svc-inv .svc-why-foottext,
body.page-low-code-development .clx-svc-page .svc-inv .svc-why-foottext{max-width:690px;}

/* Low Code Platforms — reuses the shared clx-tp tabbed component (like the AI page).
   Each panel is a single platform, so present its logo in a prominent box above the copy. */
/* logos are composited on white (-bal versions) — use a white box so they blend
   seamlessly instead of showing a white rectangle on an off-white panel. */
body.page-low-code-redesign .clx-svc-page .svc-plat-solo,
body.page-low-code-development .clx-svc-page .svc-plat-solo{display:flex;align-items:center;justify-content:flex-start;min-height:104px;border:1px solid #ececf1;border-radius:14px;background:#fff;padding:22px 28px;margin:0 0 22px;}
body.page-low-code-redesign .clx-svc-page .svc-plat-solo img,
body.page-low-code-development .clx-svc-page .svc-plat-solo img{max-height:64px;max-width:260px;width:auto;height:auto;object-fit:contain;display:block;}
body.page-low-code-redesign .clx-svc-page .svc-arch-subh,
body.page-low-code-development .clx-svc-page .svc-arch-subh{font-family:'Cabin',sans-serif;font-weight:500;font-size:clamp(26px,3.4vw,38px);line-height:1.16;letter-spacing:-1px;color:#142533;margin:0 0 12px;}

/* Solution-architecture banner: the AI style lays text over the photo behind a dark
   scrim, which hides this lighter conference render. For low-code, show the photo as a
   visible top band with the dark text panel below — same AI tokens (orange eyebrow,
   white text, stat treatment), image now fully visible. Scoped to this section only. */
body.page-low-code-redesign .clx-svc-page .svc-sysdesign .svc-sd-grid .svc-sysbanner,
body.page-low-code-development .clx-svc-page .svc-sysdesign .svc-sd-grid .svc-sysbanner{padding:0;overflow:hidden;}
body.page-low-code-redesign .clx-svc-page .svc-sysdesign .svc-sysbanner-media,
body.page-low-code-development .clx-svc-page .svc-sysdesign .svc-sysbanner-media{position:relative;inset:auto;height:220px;}
body.page-low-code-redesign .clx-svc-page .svc-sysdesign .svc-sysbanner-media img,
body.page-low-code-development .clx-svc-page .svc-sysdesign .svc-sysbanner-media img{object-position:center;}
body.page-low-code-redesign .clx-svc-page .svc-sysdesign .svc-sysbanner-scrim,
body.page-low-code-development .clx-svc-page .svc-sysdesign .svc-sysbanner-scrim{display:none;}
body.page-low-code-redesign .clx-svc-page .svc-sysdesign .svc-sd-grid .svc-sysbanner-in,
body.page-low-code-development .clx-svc-page .svc-sysdesign .svc-sd-grid .svc-sysbanner-in{height:auto;padding:38px 42px 40px;}
@media (max-width:640px){
  body.page-low-code-redesign .clx-svc-page .svc-sysdesign .svc-sysbanner-media,
  body.page-low-code-development .clx-svc-page .svc-sysdesign .svc-sysbanner-media{height:170px;}
  body.page-low-code-redesign .clx-svc-page .svc-sysdesign .svc-sd-grid .svc-sysbanner-in,
  body.page-low-code-development .clx-svc-page .svc-sysdesign .svc-sd-grid .svc-sysbanner-in{padding:28px 26px 30px;}
}