/* Explain: Layout utilities for page sections and responsive grid structures. */
.section-pad {
    padding-top: clamp(3.75rem, 6vw, 6rem);
    padding-bottom: clamp(3.75rem, 6vw, 6rem);
}

.wrap {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 80rem;
}

.hero-band {
    position: relative;
    overflow: hidden;
    padding-top: 8.5rem;
    padding-bottom: clamp(3.5rem, 6vw, 6rem);
    background:
        radial-gradient(circle at 10% 6%, rgba(232, 213, 140, 0.3), transparent 32rem),
        linear-gradient(180deg, var(--surface-color), var(--background-color));
}

.page-band {
    padding-top: 8rem;
    padding-bottom: clamp(2.25rem, 4vw, 3.5rem);
    background: linear-gradient(180deg, var(--surface-color), var(--background-color));
}

.dash-layout {
    display: flex;
    gap: 2rem;
}