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

.section {
    padding-top: clamp(2.25rem, 3.5vw, 4rem);
    padding-bottom: clamp(2.25rem, 3.5vw, 4rem);
}

.surface {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-1);
}

.surface-soft {
    background: var(--color-surface-2);
    border-color: transparent;
    box-shadow: none;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-4));
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-3));
    align-items: center;
}

.grid {
    display: grid;
    gap: var(--grid-gap, var(--space-8));
}

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

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

@media (min-width: 820px) {
    .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

.pad {
    padding: var(--space-8);
}

.muted {
    color: var(--color-muted);
}

.faint {
    color: var(--color-faint);
}

.kicker {
    font-size: var(--fs-200);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.lead {
    font-size: var(--fs-500);
    line-height: var(--lh-normal);
    color: var(--color-muted);
}

.sg-2 { --stack-gap: var(--space-2); }
.sg-3 { --stack-gap: var(--space-3); }
.sg-4 { --stack-gap: var(--space-4); }
.sg-5 { --stack-gap: var(--space-5); }
.sg-6 { --stack-gap: var(--space-6); }
.sg-8 { --stack-gap: var(--space-8); }
.sg-10 { --stack-gap: var(--space-10); }
.sg-12 { --stack-gap: var(--space-12); }

.cg-3 { --cluster-gap: var(--space-3); }

.gg-6 { --grid-gap: var(--space-6); }
.gg-10 { --grid-gap: var(--space-10); }
.gg-12 { --grid-gap: var(--space-12); }