.container {
    width: min(100% - 32px, var(--container-width));
    margin-inline: auto;
}

.section {
    padding-block: var(--space-xl);
}


/* ==========================================================================
   Base
   ========================================================================== */

body {
    margin: 0;
    padding: 0;

    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);

    color: var(--color-text);
    background-color: var(--color-background);
}

/* ==========================================================================
   Header & Footer
   ========================================================================== */

.site-header,
.site-footer {
    box-sizing: border-box;
    padding-inline: var(--space-sm);
    text-align: center;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    position: relative;
    z-index: var(--z-header);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);

    height: var(--header-height);
    min-height: var(--header-height);

    background-color: var(--brand-secondary);
    color: var(--color-white);
}


.solution-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15.625rem;
    gap: 3rem;
    max-width: 1440px;
    margin: 0 auto;
    padding: 3rem 4rem;
}

.solution-content {
    min-width: 0;
}

.solution-nav {
    width: 15.625rem;
}

.site-main {
    margin: 0 auto;
    scroll-behavior: smooth;
    /* transform: translateY(-50px); */
}

/* Align with header logo + banner arrow (shared page grid), desktop only.
   "body" prefix: these page stylesheets load after this file. */
@media (min-width: 769px) {
    body .contact-content__container,
    body .demo-content__container,
    body .trial-content__container,
    body .privacy-policy__container,
    body .cookie-policy__container,
    body .legal-notes__container,
    body .code-of-ethics__container,
    body .why-beexact__container,
    body .impact-stats__container,
    body .product-family__container,
    body .site-footer .footer-inner {
        max-width: var(--page-max);
        margin-inline: auto;
        padding-inline: var(--page-gutter);
        box-sizing: border-box;
    }

    /* Legal text uses the full page width (review: was capped at 60rem). */
    body .privacy-policy__content,
    body .cookie-policy__content,
    body .legal-notes__content,
    body .code-of-ethics__content {
        max-width: none;
    }

    /* First (white) column starts on the line; the grey form column keeps
       its inner padding. */
    body .contact-split > .wp-block-column:first-child,
    body .demo-content__container .wp-block-columns > .wp-block-column:first-child,
    body .trial-content__container .wp-block-columns > .wp-block-column:first-child {
        padding-left: 0 !important;
    }

    body .site-footer {
        padding-inline: 0;
    }

    /* .site-footer is a flex row, so its inner box shrank to its content
       and was centred - make it span the page width like the other rows. */
    body .site-footer .footer-inner {
        width: 100%;
    }

    /* Home hero text block starts exactly on the line (no auto margin). */
    body .banner-content .banner-content-left {
        margin-left: 0;
    }
}