/* =========================
   Steps Widget - Desktop
========================= */

.stp-head {
    margin-bottom:58px;
}

.stp .betit-w {
    color: var(--uicolor);
    font-size: 30px;
    font-weight: 700;
}

.stp-list {
    display:flex;
    align-items:flex-start;
    gap:64px;
    overflow-x:auto;
    padding-block:52px;
}

.stp-list:empty {
    display:none;
    padding:0;
}

.stp-itm {
    position:relative;
    flex:1;
    min-width:410px;
    display:flex;
    align-items:center;
    gap:22px;
}

.shepe_arrow {
    position:absolute;
    inset-inline-start:auto;
    inset-inline-end:-55px;
    bottom:-50px;
    width:104px;
    height:46px;
    background-image:var(--photo-url);
    background-repeat:no-repeat;
    background-size:contain;
}

.stp-itm:nth-child(even) .shepe_arrow {
    top:-50px;
    bottom:auto;
    transform:rotateX(180deg);
}

.stp-itm:last-child .shepe_arrow {
    display: none !important;
}

.stp-icn {
    flex:0 0 86px;
    width:86px;
    height:86px;
    display:flex;
    align-items:center;
    justify-content:center;
    border: 5px solid color-mix(in srgb,var(--uicolor2) 40%,var(--background));
    border-radius:50%;
    background: var(--uicolor2);
    color: var(--Text-color);
    font-size:33px;
}

.stp-txt {
    flex:1;
    min-width:0;
}

.stp-txt h3 {
    margin:0 0 12px;
    color:var(--primary-text);
    font-size:26px;
    font-weight: 700;
    line-height:1.25;
}

.stp-txt p {
    max-width:360px;
    margin:0;
    color:var(--secondarytext);
    font-size:17px;
    line-height:1.65;
}

.stp-btn {
    margin-top:96px;
}

.-ycw-section.-ycwt-steps {
    padding-bottom:130px;
    background: linear-gradient(
69deg, var(--diver2), transparent);
}

/* =========================
   English / LTR Support
========================= */

html[dir="ltr"] .stp {
    direction:ltr;
    font-family:var(--f-number);
}

html[dir="ltr"] .stp-head {
    max-width:900px;
    margin-inline-start:0;
    margin-inline-end:auto;
    text-align:start;
}

html[dir="ltr"] .stp .betit-w {
    justify-content:flex-start;
    margin-inline-start:0;
    margin-inline-end:auto;
}

html[dir="ltr"] .stp .tit-wdt {
    max-width:820px;
    line-height:1.18;
    letter-spacing:-1px;
}

html[dir="ltr"] .stp-itm,
html[dir="ltr"] .stp-txt {
    text-align:start;
}

html[dir="ltr"] .stp-txt h3 {
    line-height:1.2;
}

html[dir="ltr"] .stp-txt p {
    line-height:1.55;
}

html[dir="ltr"] .stp .shepe_arrow {
    transform:scaleX(-1);
}

html[dir="ltr"] .stp .stp-itm:nth-child(even) .shepe_arrow {
    transform:rotateX(180deg) scaleX(-1);
}

html[dir="ltr"] .stp-btn {
    justify-content:flex-start;
}

/* =========================
   Tablet Responsive
========================= */

@media only screen and (max-width:1199px) {
    .stp-head {
        margin-bottom:38px;
    }

    .stp .tit-wdt {
        font-size:38px;
    }

    .stp-list {
        counter-reset:step-item;
        align-items:stretch;
        gap:16px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:4px 2px 18px;
        scroll-padding-inline:2px;
        scroll-snap-type:inline proximity;
        scrollbar-width:thin;
        scrollbar-color:color-mix(in srgb,var(--uicolor) 35%,transparent) transparent;
        overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch;
    }

    .stp-itm {
        counter-increment:step-item;
        flex:0 0 clamp(320px,42vw,420px);
        min-width:0;
        display:grid;
        grid-template-columns:64px minmax(0,1fr);
        align-content:start;
        align-items:start;
        gap:16px;
        padding:20px;
        border:1px solid color-mix(in srgb,var(--uicolor) 14%,var(--diver));
        border-radius:22px;
        background:var(--surface-color,var(--background-color));
        box-shadow:0 14px 34px -30px color-mix(in srgb,var(--primary-text) 45%,transparent);
        scroll-snap-align:start;
        text-align:start;
    }

    .stp-itm::before {
        content:counter(step-item,decimal-leading-zero);
        position:absolute;
        inset-block-start:18px;
        inset-inline-end:18px;
        color:color-mix(in srgb,var(--uicolor2) 86%,var(--primary-text));
        font-family:var(--f-number);
        font-size:13px;
        font-weight:900;
        line-height:1;
        letter-spacing:.4px;
    }

    .stp .shepe_arrow {
        display: none !important;
    }

    .stp-icn {
        grid-column:1;
        flex-basis:64px;
        width:64px;
        height:64px;
        border-width:7px;
        font-size:25px;
    }

    .stp-txt {
        grid-column:2;
        min-width:0;
        padding-inline-end:28px;
    }

    .stp-txt h3 {
        margin-bottom:8px;
        font-size:20px;
        line-height:1.35;
    }

    .stp-txt p,
    html[dir="ltr"] .stp-txt p {
        max-width:none;
        font-size:14px;
        line-height:1.7;
    }

    .stp-btn {
        margin-top:38px;
    }

    .stp-btn .yc-widget-btn {
        min-width:0;
    }

    .stp-btn .yc-widget-btn > a {
        min-height:52px;
    }

    .-ycw-section.-ycwt-steps {
        padding-bottom:80px;
    }

    html[dir="ltr"] .stp-head {
        max-width:850px;
        margin-inline:auto;
        text-align:center;
    }

    html[dir="ltr"] .stp .betit-w {
        justify-content:center;
        margin-inline:auto;
    }
}

/* =========================
   Mobile Timeline Experience
========================= */

@media only screen and (max-width:767px) {
    .stp-head {
        margin-bottom:26px;
    }

    .stp .betit-w {
        margin-bottom:10px;
        font-size:16px;
    }

    .stp .tit-wdt,
    html[dir="ltr"] .stp .tit-wdt {
        max-width:100%;
        font-size:clamp(27px,7.3vw,33px);
        line-height:1.28;
        letter-spacing:-.3px;
    }

    .stp-list {
        display:grid;
        grid-template-columns:minmax(0,1fr);
        gap:14px;
        overflow:visible;
        padding:0;
        scroll-snap-type:none;
        scrollbar-width:auto;
    }

    .stp-itm {
        width:100%;
        min-width:0;
        display:grid;
        grid-template-columns:56px minmax(0,1fr);
        align-items:start;
        gap:14px;
        padding:16px;
        border-radius:18px;
        box-shadow:0 10px 28px -27px color-mix(in srgb,var(--primary-text) 55%,transparent);
        scroll-snap-align:none;
    }

    .stp-itm:not(:last-child)::after {
        content:"";
        position:absolute;
        z-index:0;
        inset-inline-start:43px;
        bottom:-15px;
        width:2px;
        height:15px;
        border-radius:999px;
        background:color-mix(in srgb,var(--uicolor) 48%,var(--diver));
    }

    .stp-itm::before {
        inset-block-start:14px;
        inset-inline-end:15px;
        font-size:12px;
    }

    .stp-icn {
        position:relative;
        z-index:1;
        flex-basis:56px;
        width:56px;
        height:56px;
        border-width:6px;
        font-size:22px;
    }

    .stp-txt {
        padding-inline-end:25px;
    }

    .stp-txt h3 {
        margin-bottom:6px;
        font-size:18px;
        line-height:1.4;
    }

    .stp-txt p,
    html[dir="ltr"] .stp-txt p {
        font-size:14px;
        line-height:1.7;
    }

    .stp-btn {
        align-items:stretch;
        margin-top:28px;
    }

    .stp-btn .yc-widget-btn {
        flex:1 1 180px;
    }

    .stp-btn .yc-widget-btn > a {
        width:100%;
        min-width:0;
        min-height:52px;
    }

    .-ycw-section.-ycwt-steps {
        padding-bottom:56px;
    }

    html[dir="ltr"] .stp-btn {
        justify-content:flex-start;
    }
}

/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:480px) {
   
    .stp-btn .yc-widget-btn {
        flex: 1;
        width:100%;
    }
}

@media only screen and (max-width:390px) {
    .stp-head {
        margin-bottom:22px;
    }

    .stp-list {
        gap:12px;
    }

    .stp-itm {
        grid-template-columns:48px minmax(0,1fr);
        gap:12px;
        padding:13px;
        border-radius:16px;
    }

    .stp-itm:not(:last-child)::after {
        inset-inline-start:36px;
        bottom:-13px;
        height:13px;
    }

    .stp-itm::before {
        inset-block-start:12px;
        inset-inline-end:12px;
    }

    .stp-icn {
        flex-basis:48px;
        width:48px;
        height:48px;
        border-width:5px;
        font-size:19px;
    }

    .stp-txt {
        padding-inline-end:22px;
    }

    .stp-txt h3 {
        font-size:17px;
    }

    .stp-txt p,
    html[dir="ltr"] .stp-txt p {
        font-size:13.5px;
        line-height:1.65;
    }
}