/* ───────────────────────────────── Pricing page ───────────────────────────────── */
:root{
    --pricing-content-w:1260px;
    --pricing-card-radius:11px;
}

/* The cacheable shell starts in guest mode; the signed plans response reveals account navigation. */
.pricing-body[data-pricing-authenticated="false"] .pricing-main,
.pricing-body[data-pricing-authenticated="false"] .pricing-footer{margin-left:0}
.pricing-body[data-pricing-authenticated="false"]{padding-bottom:0}

.pricing-guest-actions{
    display:flex;
    align-items:center;
    gap:12px;
    white-space:nowrap;
}
.pricing-guest-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:0 14px;
    border-radius:5px;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}
.pricing-login{color:#8035e8}
.pricing-signup{color:#fff;background:var(--dash-button-gradient)}
.pricing-guest-actions a:focus-visible{outline:2px solid #8035e8;outline-offset:3px}

.pricing-body .dash-price-link.is-active{
    color:#ff2d67;
    border-color:#ff2d67;
    box-shadow:0 0 0 2px rgba(255,45,103,.03) inset;
}

.pricing-main{
    min-height:704px;
    background-color:#f7f7f8;
}

.pricing-main::before,
.pricing-main::after{opacity:.10}

.pricing-content{
    width:min(calc(100% - 108px),var(--pricing-content-w));
    padding:58px 0 52px;
}

.pricing-hero{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    margin:0 0 26px;
}

.pricing-title-block h1{
    margin:0 0 11px;
    font-size:31px;
    line-height:1.08;
    letter-spacing:-.025em;
    color:#f91bac;
    background:var(--dash-title-gradient);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    font-weight:800;
}

.pricing-title-block p{
    margin:0;
    color:#757575;
    font-size:16px;
    line-height:1.35;
}

.billing-toggle{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:18px;
    margin:37px 9px 0 0;
    padding:0;
    border:0;
}

.billing-toggle button{
    padding:0;
    border:0;
    background:transparent;
    color:#77727b;
    font-size:14px;
    font-weight:700;
    line-height:1;
}

.billing-toggle button[aria-pressed="true"]{color:#ff2d67}

.billing-switch{
    position:relative;
    width:38px;
    height:20px;
    display:inline-flex;
    align-items:center;
    cursor:pointer;
}

.billing-switch input{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    opacity:0;
    cursor:pointer;
}

.billing-switch span{
    position:relative;
    width:38px;
    height:20px;
    border:1.5px solid transparent;
    border-radius:999px;
    background:linear-gradient(#fff,#fff) padding-box,var(--dash-gradient-horizontal) border-box;
    box-shadow:0 6px 14px rgba(128,53,232,.08);
}

.billing-switch span::before{
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--dash-gradient-horizontal);
    transition:transform .18s ease;
}

.billing-switch input:checked + span::before{transform:translateX(17px)}
.billing-switch input:focus-visible + span{box-shadow:0 0 0 3px rgba(128,53,232,.18)}

.pricing-status{
    max-width:620px;
    margin:-14px 0 22px;
    padding:13px 16px;
    border:1px solid rgba(255,45,103,.18);
    border-radius:8px;
    color:#e23859;
    background:rgba(255,45,103,.06);
    font-size:14px;
    font-weight:700;
}

.pricing-status.is-success{
    color:#0d8f43;
    border-color:rgba(13,143,67,.22);
    background:rgba(13,143,67,.08);
}

.pricing-availability{
    margin:0 0 34px;
    color:#757575;
    font-size:14px;
    line-height:1.5;
}

.pricing-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:28px;
    align-items:stretch;
}

.plan-card{
    position:relative;
    min-height:455px;
    display:flex;
    flex-direction:column;
    padding:34px 30px 28px;
    border-radius:var(--pricing-card-radius);
    background:#fff;
    box-shadow:none;
}

.plan-card--loading{
    overflow:hidden;
    background:linear-gradient(90deg,#fff 0%,#f6f3fb 50%,#fff 100%);
    background-size:220% 100%;
    animation:pricing-skeleton 1.05s linear infinite;
}

@keyframes pricing-skeleton{to{background-position:-220% 0}}

.plan-card.is-featured{
    border:1.5px solid transparent;
    background:linear-gradient(#fff,#fff) padding-box,var(--dash-gradient-horizontal) border-box;
    box-shadow:0 14px 36px rgba(128,53,232,.14);
}

.plan-ribbon{
    position:absolute;
    top:-11px;
    left:50%;
    transform:translateX(-50%);
    min-width:118px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 14px;
    color:#fff;
    font-size:10px;
    line-height:1;
    font-weight:800;
    text-transform:uppercase;
    border-radius:4px;
    background:var(--dash-gradient-horizontal);
    box-shadow:0 8px 16px rgba(128,53,232,.16);
}

.plan-name{
    margin:0 0 11px;
    color:#ff2d67;
    font-size:18px;
    font-weight:800;
    line-height:1.2;
}

.plan-price{
    display:flex;
    align-items:flex-end;
    gap:8px;
    margin:0 0 4px;
    color:#7b7480;
}

.plan-price__currency{
    align-self:center;
    color:#7b7480;
    font-size:15px;
    font-weight:600;
}

.plan-price__amount{
    color:#8035E8;
    font-size:38px;
    line-height:.95;
    letter-spacing:-.035em;
    font-weight:900;
}

.plan-price__period{
    margin-bottom:4px;
    color:#697186;
    font-size:14px;
    white-space:nowrap;
}

.plan-vat{
    min-height:18px;
    margin:0 0 18px;
    color:#74707b;
    font-size:13px;
    line-height:1.3;
}

.plan-desc{
    margin:0 0 29px;
    color:#77727b;
    font-size:14px;
    line-height:1.35;
}

.plan-features{
    display:flex;
    flex-direction:column;
    gap:15px;
    margin:0 0 24px;
    padding:0;
    list-style:none;
}

.plan-features li{
    position:relative;
    display:flex;
    gap:16px;
    color:#7b7680;
    font-size:13px;
    line-height:1.35;
}

.plan-features li::before{
    content:"✓";
    flex:0 0 14px;
    margin-top:1px;
    color:#ff2d67;
    font-size:15px;
    font-weight:900;
    line-height:1;
}

.plan-action{
    width:100%;
    min-height:49px;
    margin-top:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:0;
    border-radius:5px;
    color:#fff;
    background:var(--dash-button-gradient);
    font-size:16px;
    font-weight:800;
    text-decoration:none;
    box-shadow:0 14px 24px rgba(128,53,232,.13);
    transition:filter .15s ease,transform .08s ease,opacity .15s ease;
}

.plan-action:hover{filter:saturate(1.06) brightness(1.02)}
.plan-action:active{transform:translateY(1px)}
.plan-action[disabled]{opacity:.68;cursor:not-allowed;filter:none;transform:none}
.plan-action.is-loading::after{
    content:"";
    width:16px;
    height:16px;
    border:2px solid rgba(255,255,255,.45);
    border-top-color:#fff;
    border-radius:50%;
    animation:pricing-spin .75s linear infinite;
}
@keyframes pricing-spin{to{transform:rotate(360deg)}}

.plan-note{
    margin:13px 0 0;
    color:#8a8790;
    font-size:11px;
    line-height:1.35;
    text-align:center;
}

@media (max-width:1400px){
    :root{--pricing-content-w:1130px}
    .pricing-grid{gap:24px}
    .plan-card{padding:31px 25px 25px}
    .plan-price__amount{font-size:35px}
    .plan-price__period{font-size:13px}
}

@media (max-width:1260px){
    :root{--pricing-content-w:940px}
    .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .plan-card{min-height:460px}
}

@media (min-width:1261px){
    .pricing-grid{padding:14px 6px}
    .plan-card.is-featured{
        z-index:1;
        margin:-14px -6px;
        padding-top:48px;
        padding-bottom:42px;
    }
}

@media (max-width:1100px){
    .pricing-body .dash-head-actions{gap:12px}
    .pricing-guest-actions{gap:2px}
    .pricing-guest-actions a{min-height:34px;padding:0 9px;font-size:12px}
    .pricing-main{
        min-height:auto;
        background-color:#f7f7f8;
    }

    .pricing-main::before{
        width:300px;
        height:300px;
        right:-130px;
        top:18px;
    }

    .pricing-main::after{
        width:300px;
        height:300px;
        left:-122px;
        bottom:10px;
    }

    .pricing-content{
        width:100%;
        padding:30px 19px 31px;
    }

    .pricing-hero{
        display:block;
        margin-bottom:17px;
    }

    .pricing-title-block h1{
        margin-bottom:6px;
        font-size:26px;
        line-height:1.12;
    }

    .pricing-title-block p{
        max-width:270px;
        font-size:13px;
        line-height:1.3;
    }

    .billing-toggle{
        margin:17px 0 0;
        gap:17px;
    }

    .billing-toggle button{
        font-size:12px;
    }

    .billing-switch,
    .billing-switch span{
        width:34px;
        height:18px;
    }

    .billing-switch span::before{
        top:3px;
        left:3px;
        width:10px;
        height:10px;
    }

    .billing-switch input:checked + span::before{transform:translateX(16px)}

    .pricing-status{
        margin:0 0 14px;
        padding:10px 12px;
        font-size:12px;
    }

    .pricing-availability{
        margin-bottom:20px;
        font-size:12px;
    }

    .pricing-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .plan-card{
        min-height:0;
        padding:23px 22px 19px;
        border-radius:7px;
    }

    .plan-card.is-featured{margin-top:13px}

    .plan-ribbon{
        top:-10px;
        height:21px;
        min-width:98px;
        padding:0 10px;
        font-size:8px;
        border-radius:3px;
    }

    .plan-name{
        margin-bottom:10px;
        font-size:15px;
    }

    .plan-price{
        gap:7px;
        margin-bottom:4px;
    }

    .plan-price__currency{
        font-size:11px;
    }

    .plan-price__amount{
        font-size:30px;
    }

    .plan-price__period{
        margin-bottom:3px;
        font-size:12px;
    }

    .plan-vat{
        min-height:15px;
        margin-bottom:13px;
        font-size:11px;
    }

    .plan-desc{
        margin-bottom:20px;
        font-size:12px;
    }

    .plan-features{
        gap:14px;
        margin-bottom:22px;
    }

    .plan-features li{
        gap:14px;
        font-size:11px;
    }

    .plan-features li::before{
        flex-basis:11px;
        font-size:12px;
    }

    .plan-action{
        min-height:44px;
        border-radius:4px;
        font-size:14px;
    }

    .plan-note{
        font-size:10px;
    }

    .pricing-footer{
        padding-top:43px;
    }
}

@media (max-width:380px){
    .pricing-body .dash-header__inner{padding:0 12px;gap:8px}
    .pricing-body .dash-brand img{width:110px}
    .pricing-body .dash-head-actions{gap:6px}
    .pricing-guest-actions a{padding:0 7px}
    .pricing-content{padding-left:17px;padding-right:17px}
    .plan-card{padding-left:20px;padding-right:20px}
}