/* WHY PAGE REFINEMENTS ONLY */

.why h1 {
    margin-bottom: 12px;
}

.why-subtitle {
    opacity: 0.65;
    font-size: 1.05rem;
    margin-bottom: 28px;
}

.why p {
    margin-bottom: 18px;
    line-height: 1.7;
}

.why h2 {
    margin-bottom: 20px;
}

.why-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 24px 0;
}

    .why-list li {
        margin-bottom: 8px;
        opacity: 0.85;
    }

.why-links {
    margin-top: 32px;
    display: flex;
    gap: 28px;
}

    .why-links a {
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: border-color 0.2s ease;
    }

        .why-links a:hover {
            border-bottom: 1px solid currentColor;
        }

/* Keep spacing consistent with site.css rhythm */
.why.section {
    padding-top: 80px;
    padding-bottom: 80px;
}


// how it works
/* ============================================================
   HOW IT WORKS — Scoped Styling
   ============================================================ */
.howItWorks .page__title {
    font-size: clamp(24px, 3vw, 28px);
}

.howItWorks .steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}

@media (min-width: 860px) {
    .howItWorks .steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 48px;
    }
}

.howItWorks .step__text p {
    margin-bottom: 10px;
}

.howItWorks .step {
    border-left: 2px solid var(--color-border);
}

@media (min-width: 860px) {
    .howItWorks .step {
        border-left: none;
        border-top: 2px solid var(--color-border);
        padding-top: 12px;
    }
}