/* Saleng CMS v1.1.2 — one consistent public content grid.
 * Backgrounds, decorative fills and the sticky mobile CTA may extend to the
 * viewport; all actual site CONTENT aligns to the same 1220px container.
 * Loaded after the legacy template and component styles on every public page.
 */
body.saleng-responsive,
body.saleng-privacy-body {
  --saleng-content-max: 1220px;
  --saleng-content-gutter: clamp(16px, 4vw, 24px);
}

/* All legacy templates use either .container (homepage/articles) or .wrap
 * (the 116 product pages).  Third-party and future template content inside
 * those wrappers retains its own text measure and card padding. */
body.saleng-responsive :is(.container, .wrap),
body.saleng-responsive section.saleng-feature > :is(.container, .wrap),
body.saleng-responsive .saleng-showcase .saleng-showcase__shell,
body.saleng-responsive .saleng-services,
body.saleng-responsive section#faq.saleng-faq .saleng-faq__inner,
body.saleng-responsive footer.saleng-site-footer .saleng-footer__inner,
body.saleng-privacy-body section#faq.saleng-faq .saleng-faq__inner,
body.saleng-privacy-body footer.saleng-site-footer .saleng-footer__inner {
  box-sizing: border-box;
  width: min(var(--saleng-content-max), calc(100% - var(--saleng-content-gutter) - var(--saleng-content-gutter))) !important;
  max-width: var(--saleng-content-max) !important;
  margin-inline: auto !important;
}

/* The showcase's previous shell had 24px extra inner padding, which made its
 * real alignment differ even when its outside width was equal to the others. */
body.saleng-responsive .saleng-showcase .saleng-showcase__shell {
  padding-inline: 0 !important;
}

/* Images and editorial copy should not override the common outer edges.
 * They can have narrower INTERNAL columns for readability and art direction. */
body.saleng-responsive .saleng-feature__full-image,
body.saleng-responsive .saleng-feature__story-panel,
body.saleng-responsive .saleng-showcase__grid,
body.saleng-responsive .saleng-services__shell,
body.saleng-responsive .saleng-footer__main {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 380px) {
  body.saleng-responsive,
  body.saleng-privacy-body { --saleng-content-gutter: 12px; }
}

/* Some original product templates used an intrinsic 1fr column in their
 * numbered step cards. On narrow screens an unbroken model/spec string could
 * force the entire card beyond its aligned parent. */
body.saleng-responsive .steps .step {
  grid-template-columns: 56px minmax(0, 1fr);
  min-width: 0;
  max-width: 100%;
}
body.saleng-responsive .steps .step > :not(.num) {
  min-width: 0;
  overflow-wrap: anywhere;
}