/* =================================================================== DP HERO section css =================================================================== */
/* Distribution partner page hero: pitch on the left (sticky), Gravity Forms #2 card on the right. */
.dp-hero {
    position: relative;
    padding-block: var(--sp80) var(--sp100);
    background: var(--blue-50);
    border-bottom: 1px solid var(--line);
    overflow: hidden;

    & .dp-hero__ring {
        position: absolute;
        border: 1px solid var(--blue-100);
        border-radius: var(--r-full);
        pointer-events: none;
    }
    & .dp-hero__ring--1 { top: -220px; right: -160px; width: 620px; height: 620px; }
    & .dp-hero__ring--2 { bottom: -260px; left: -200px; width: 520px; height: 520px; }

    & .container { position: relative; z-index: 1; }

    & .dp-hero__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        align-items: start;
        gap: var(--sp80);
    }

    /* WordPress: no partner form configured → copy only */
    & .dp-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }

    & .dp-hero__copy { position: sticky; top: var(--sp40); }

    & .dp-hero__crumbs {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: var(--sp8);
        margin-bottom: var(--sp30);
        font-size: var(--f14);
        color: var(--muted);

        & li { display: flex; align-items: center; gap: var(--sp8); }
        & li + li::before { content: "/"; opacity: .5; }
        & a { color: var(--ink); transition: var(--transition); }
        & a:hover { color: var(--primary); }
    }

    & .dp-hero__eyebrow { margin-bottom: var(--sp25); }

    & .dp-hero__title { max-width: 620px; }

    & .dp-hero__lead { max-width: 580px; margin-top: var(--sp20); font-size: var(--f18); }

    /* Two ways to partner: one panel, numbered rows */
    & .dp-hero__ways {
        max-width: 580px;
        margin-top: var(--sp40);
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    & .dp-hero__ways-title {
        padding: var(--sp15) var(--sp25);
        border-bottom: 1px solid var(--line);
        font-size: var(--f13);
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--muted);
    }

    & .dp-hero__way {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: var(--sp20);
        padding: var(--sp25);
        transition: var(--transition);

        & + .dp-hero__way { border-top: 1px dashed var(--line); }
        &:hover { background: var(--surface-2); }
        & p { font-size: var(--f15); }
    }

    & .dp-hero__way-icon {
        display: grid; place-items: center;
        width: 52px; height: 52px;
        background-image: var(--gradient1);
        border-radius: var(--r-md);
        color: var(--white);
    }

    & .dp-hero__way-num { font-size: var(--f13); font-weight: 700; letter-spacing: .06em; color: var(--primary); }

    & .dp-hero__way-title { margin-block: 2px var(--sp4); font-size: var(--f20); }

    & .dp-hero__ways-foot {
        display: flex; align-items: center;
        gap: var(--sp10);
        padding: var(--sp15) var(--sp25);
        background: var(--blue-50);
        border-top: 1px solid var(--line);
        font-size: var(--f14);
        color: var(--body);
        transition: var(--transition);

        & strong { color: var(--ink); }
        &:hover { color: var(--primary); }
    }

    & .dp-hero__ways-plus {
        display: grid; place-items: center;
        width: 24px; height: 24px;
        background: var(--white);
        border: 1px solid var(--blue-100);
        border-radius: var(--r-full);
        color: var(--primary);
    }

    & .dp-hero__types { margin-top: var(--sp40); padding-top: var(--sp30); border-top: 1px solid var(--line); }

    & .dp-hero__types-title {
        margin-bottom: var(--sp15);
        font-size: var(--f13);
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--muted);
    }

    & .dp-hero__types-list {
        display: flex; flex-wrap: wrap;
        gap: var(--sp10);

        & li {
            display: inline-flex; align-items: center;
            gap: var(--sp8);
            padding: var(--sp8) var(--sp15);
            background: var(--white);
            border: 1px solid var(--blue-100);
            border-radius: var(--r-full);
            font-size: var(--f13);
            font-weight: 600;
            color: var(--ink);
        }
        & svg { color: var(--primary); }
    }

    & .dp-hero__card { border: 1px solid var(--line); }
    & .dp-hero__card-wrap { scroll-margin-top: var(--sp100); }
}

/* =================================================================== RESPONSIVE =================================================================== */
@media (max-width: 1199.98px) {
    .dp-hero {
        & .dp-hero__grid { gap: var(--sp50); }
    }
}

@media (max-width: 991.98px) {
    .dp-hero {
        & .dp-hero__grid { grid-template-columns: 1fr; }
        & .dp-hero__copy { position: static; }
        & .dp-hero__card-wrap { max-width: 720px; }
    }
}

@media (max-width: 575.98px) {
    .dp-hero {
        & .dp-hero__way { gap: var(--sp15); padding: var(--sp20); }
        & .dp-hero__way-icon { width: 44px; height: 44px; }
    }
}