.container {
    width: min(calc(100% - 2rem), var(--container));
    margin: 0 auto;
}

.container.narrow,
.narrow {
    width: min(calc(100% - 2rem), var(--container-narrow));
    margin: 0 auto;
}

.section {
    padding: 5.5rem 0;
}

.section-muted {
    background: rgba(232, 242, 255, 0.32);
    border-block: 1px solid rgba(214, 224, 234, 0.75);
}

.public-main {
    min-height: 100vh;
}

.nav-shell,
.shell-bar,
.footer-bottom,
.panel-head,
.button-row,
.cta-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.hero-grid,
.two-panel-grid,
.contact-grid,
.auth-panel,
.auth-panel-wide {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

.hero-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
}

.two-panel-grid,
.contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid,
.docs-grid,
.steps-grid,
.pricing-preview-grid,
.app-grid,
.stack-grid {
    display: grid;
    gap: 1.5rem;
}

.three-col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.two-col,
.two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.four-up {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.three-up {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-preview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.docs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stack-grid {
    grid-template-columns: 1fr;
}

.page-hero {
    padding-bottom: 2rem;
}

.page-hero h1,
.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.page-hero p,
.hero-copy {
    margin-top: 1.2rem;
    color: var(--text-soft);
    font-size: 1.08rem;
    line-height: 1.8;
}

.section-title {
    max-width: 720px;
    margin-bottom: 2rem;
}

.section-title h2 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    letter-spacing: -0.04em;
}

.section-title p:last-child {
    margin-top: 0.8rem;
    color: var(--text-soft);
    line-height: 1.8;
}

.table-wrap {
    overflow-x: auto;
}

@media (max-width: 980px) {
    .hero-grid,
    .two-panel-grid,
    .contact-grid,
    .two-up,
    .three-col,
    .three-up,
    .four-up,
    .docs-grid,
    .steps-grid,
    .pricing-preview-grid {
        grid-template-columns: 1fr;
    }

    .nav-shell,
    .footer-bottom,
    .shell-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}