/* P26M — container & section primitives. */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.container--narrow { max-width: 768px; }
.container--text   { max-width: 560px; }

/* Section base — every landing section uses this. */
.section {
    position: relative;
    padding-block: var(--section-pad-y);
    isolation: isolate;
}

.section__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    max-width: 720px;
}
.section__head--center {
    margin-inline: auto;
    text-align: center;
    align-items: center;
}

.section__title {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
}

.section__lead {
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
    line-height: var(--lh-relaxed);
    max-width: 60ch;
}