/* Shared page gutters keep navigation and content aligned at every viewport. */
:root {
    --site-gutter: clamp(16px, 2.5vw, 64px);
    --site-content-width: calc(100% - var(--site-gutter) - var(--site-gutter));
}

.macpos-site-header-inner,
.landing-shell,
.site-shell,
.aff-wrap,
.nube-access-layout,
.nube-home,
.nube-footer {
    width: var(--site-content-width);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.nube-account-header {
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
}

/* Report tables and charts can use all of the space beside their sidebar. */
.workspace-content {
    max-width: none;
}

/* Wider page surfaces do not require wider input fields or long text lines. */
.checkout-card > .checkout-form,
.checkout-card > .license-entry-intro {
    max-width: 760px;
}

.checkout-summary > p,
.checkout-summary-list,
.feature-card-reference > p,
.contact-action-card > p {
    max-width: 65ch;
}

.nube-link-section > form {
    width: 100%;
    max-width: 640px;
    justify-self: end;
}

.nube-license-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

/* Access pages keep their story and form together, even on wide monitors. */
.access-page {
    --site-content-width: min(1240px, calc(100% - var(--site-gutter) - var(--site-gutter)));
}

.access-page .aff-hero {
    padding: 40px 0 48px;
}

.access-page .nube-access-layout {
    margin-top: 40px;
    margin-bottom: 48px;
}

.access-page .aff-hero > :first-child,
.access-page .nube-story {
    min-width: 0;
}

.access-page .aff-hero h1,
.access-page .nube-story h1 {
    font-size: clamp(38px, 4.2vw, 60px);
    max-width: 18ch;
    margin-top: 16px;
    margin-bottom: 20px;
}

.access-page .nube-lead {
    max-width: 54ch;
    line-height: 1.7;
}

.access-page .nube-illustration {
    max-width: 560px;
    margin-top: 24px;
}

.access-page .nube-auth-card {
    padding: 28px;
}

.access-page .nube-tabs {
    margin-bottom: 24px;
}

.access-page .nube-form-intro {
    margin-bottom: 20px !important;
}

.access-page form {
    gap: 12px;
}

.access-page .aff-access label > span {
    line-height: 1.5;
}

.access-page .aff-message:empty {
    display: none;
}

.access-page .aff-pills {
    margin-top: 22px;
}

@media (min-width: 851px) {
    .access-page .aff-hero,
    .access-page .nube-access-layout {
        grid-template-columns: minmax(0, 1fr) clamp(340px, 42%, 520px);
        gap: clamp(32px, 4vw, 64px);
    }
}
@media (max-width: 850px) {
    .access-page .aff-hero,
    .access-page .nube-access-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .access-page .aff-hero {
        padding-top: 28px;
    }

    .access-page .nube-access-layout {
        margin-top: 28px;
    }
}

@media (max-width: 520px) {
    .access-page .nube-auth-card {
        padding: 22px;
    }
}

@media (min-width: 1280px) {
    .hero-reference {
        gap: clamp(28px, 3vw, 64px);
    }

    .hero-copy-reference {
        padding-left: clamp(20px, 2vw, 48px);
    }

    .hero-copy-reference h1 {
        max-width: 14ch;
    }

    .hero-description {
        max-width: 56ch;
    }

    .hero-laptop {
        width: min(100%, 1000px);
        /* The square source includes empty space above and below the laptop. */
        aspect-ratio: 1.45;
        object-fit: cover;
    }

    .hero-compat-card-visual {
        width: min(100%, 640px);
        max-width: 640px;
    }
}