.ngx-container {
    width: min(calc(100% - (var(--ngx-page-gutter) * 2)), var(--ngx-container));
    margin-inline: auto;
}

.ngx-container--narrow {
    width: min(calc(100% - (var(--ngx-page-gutter) * 2)), var(--ngx-container-narrow));
    margin-inline: auto;
}

.ngx-reading-width { max-width: var(--ngx-container-reading); }
.ngx-section { padding-block: var(--ngx-section-gap); }
.ngx-section--compact { padding-block: var(--ngx-section-gap-compact); }
.ngx-section--flush { padding-block: 0; }

.ngx-grid { display: grid; gap: var(--ngx-space-6); }
.ngx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ngx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ngx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ngx-stack { display: flex; flex-direction: column; gap: var(--ngx-space-4); }
.ngx-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ngx-space-3); }
.ngx-muted { color: var(--ngx-text-muted); }
.ngx-secondary { color: var(--ngx-text-secondary); }
.ngx-primary-text { color: var(--ngx-primary-2); }
.ngx-surface { background: var(--ngx-surface); }
.ngx-border { border: 1px solid var(--ngx-border); }

.ngx-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Large desktop: >= 1440px */
@media (min-width: 1440px) {
    :root {
        --ngx-page-gutter: 28px;
        --ngx-section-gap: 88px;
    }
}

/* Desktop / small desktop: 1024–1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
    :root {
        --ngx-page-gutter: 24px;
        --ngx-section-gap: 72px;
    }
}

/* Tablet: 640–1023px */
@media (min-width: 640px) and (max-width: 1023px) {
    :root {
        --ngx-page-gutter: 20px;
        --ngx-section-gap: 60px;
        --ngx-content-gap: 24px;
        --ngx-hero-padding-top: 52px;
        --ngx-hero-padding-bottom: 48px;
        --ngx-hero-title-size: clamp(2.7rem, 3.05vw, 3.15rem);
        --ngx-page-end-space: 64px;
    }
    .ngx-grid--4,
    .ngx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile: < 640px */
@media (max-width: 639px) {
    :root {
        --ngx-page-gutter: 16px;
        --ngx-section-gap: 48px;
        --ngx-section-gap-compact: 32px;
        --ngx-content-gap: 20px;
        --ngx-header-height: 68px;
        --ngx-hero-padding-top: 40px;
        --ngx-hero-padding-bottom: 36px;
        --ngx-hero-grid-gap: 30px;
        --ngx-hero-title-size: clamp(2.25rem, 10.6vw, 3rem);
        --ngx-hero-lead-size: .95rem;
        --ngx-page-end-space: 48px;
    }
    .ngx-grid--2,
    .ngx-grid--3,
    .ngx-grid--4 { grid-template-columns: 1fr; }
}


/* Shared marketing helpers. Keep page-specific layout inside scoped CSS. */
.ngx-page-end { padding-bottom: var(--ngx-page-end-space); }
.ngx-anchor-target { scroll-margin-top: calc(var(--ngx-header-height) + var(--ngx-space-5)); }

@media (max-width: 639px) {
    .ngx-mobile-stack { display: grid !important; grid-template-columns: 1fr !important; }
    .ngx-mobile-stack > * { width: 100%; }
}