/* Explain: Layout and spacing helpers for page sections. */
.section-pad {
    padding-block: 4rem;
}

@media (min-width: 640px) {
    .section-pad {
        padding-block: 5rem;
    }
}

.hero-glow {
    position: relative;
    isolation: isolate;
}

.hero-glow::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4rem;
    width: min(34rem, 86vw);
    height: min(34rem, 86vw);
    transform: translateX(-50%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--secondary-color) 55%, transparent);
    filter: blur(6px);
    z-index: -1;
}

.stat-tile {
    border-radius: 1.5rem;
    background: color-mix(in srgb, var(--cream-color) 88%, transparent);
    border: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
}

.process-line {
    position: relative;
}

@media (min-width: 1024px) {
    .process-line::before {
        content: "";
        position: absolute;
        left: 10%;
        right: 10%;
        top: 2.5rem;
        height: 2px;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary-color) 55%, transparent), transparent);
    }

    .process-line > article {
        z-index: 1;
    }
}

@media (max-width: 640px) {
    .hero-glow h1 {
        text-wrap: balance;
    }
}