/* ============================================================
   BESTEL — mobile-first
   Root font-size = 2rem (32px), so .5rem = 16px body text
   ============================================================ */

/* --- Steps section --- */

.bestel-steps {
    background: radial-gradient(circle at bottom left, hsl(from var(--background) h s l / .8), var(--background));
    color: var(--white);
    padding: clamp(1.5rem, 6vw, 3rem) clamp(.75rem, 5vw, 2.5rem);
}

.bestel-intro-text {
    font-size: .5rem;
    line-height: 1.7;
    margin: 0 0 1.5rem;
    color: hsl(from var(--white) h s l / .75);
}

.bestel-section-label {
    font-size: .5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--accent);
    margin: 0 0 1rem;
}

.steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.step {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .9rem 0;
    border-bottom: 1px solid hsl(from var(--accent) h s l / .15);
}

.step:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.step-num {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
    flex-shrink: 0;
    min-width: 1.5rem;
}

.step-body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding-top: .1rem;
}

.step-body strong {
    font-size: .5rem;
    font-weight: 700;
    line-height: 1.2;
}

.step-body p {
    font-size: .45rem;
    line-height: 1.65;
    color: hsl(from var(--white) h s l / .75);
    margin: 0;
}

.step-body a {
    color: var(--accent);
}

/* --- Payment section --- */

.bestel-payment {
    background: radial-gradient(circle at top right, hsl(from var(--accent) h s 88%), var(--accent));
    color: var(--background);
    padding: clamp(1.5rem, 6vw, 3rem) clamp(.75rem, 5vw, 2.5rem);
}

.bestel-payment .bestel-section-label {
    color: hsl(from var(--background) h s l / .5);
}

.payment-list {
    border: 1px solid hsl(from var(--background) h s l / .2);
    margin: 0;
}

.payment-row {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .6rem .75rem;
    border-bottom: 1px solid hsl(from var(--background) h s l / .12);
}

.payment-row:last-child {
    border-bottom: none;
}

dt {
    font-size: .35rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    opacity: .5;
}

dd {
    font-size: .5rem;
    font-weight: 500;
    margin: 0;
    overflow-wrap: break-word;
}

/* --- CTA section --- */

.bestel-cta {
    background: var(--background);
    padding: clamp(1.5rem, 6vw, 3rem) clamp(.75rem, 5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
}

.bestel-cta a {
    display: block;
    text-align: center;
    background: var(--accent);
    color: var(--background);
    padding: .75rem 1.5rem;
    font-size: .55rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .08em;
    box-sizing: border-box;
}

.bestel-cta a:hover {
    background: hsl(from var(--accent) h s 85%);
}

.cta-note {
    font-size: .4rem;
    color: hsl(from var(--white) h s l / .4);
    margin: 0;
    text-align: center;
    line-height: 1.6;
}

/* ============================================================
   DESKTOP — min-width: 700px
   ============================================================ */

@media (min-width: 700px) {
    /* Steps: 3 columns */
    .steps-list {
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
    }

    .step {
        flex: 1;
        flex-direction: column;
        padding: 1.25rem;
        border-bottom: none;
        border-left: 2px solid hsl(from var(--accent) h s l / .25);
        gap: .4rem;
    }

    .step:last-child {
        padding-bottom: 1.25rem;
    }

    /* Payment rows: label beside value */
    .payment-row {
        flex-direction: row;
        align-items: baseline;
        gap: 1rem;
        padding: .65rem 1rem;
    }

    dt {
        min-width: 7rem;
        flex-shrink: 0;
    }

    /* CTA: centered, auto-width button */
    .bestel-cta {
        align-items: center;
    }

    .bestel-cta a {
        width: auto;
        padding: .75rem 3rem;
    }
}