:root{
    --blue:#2962FF;
    --navy:#262F4A;
    --muted:#6E778A;
    --line:#DDE3EC;
    --soft:#F6F8FC;
    --soft-blue:#F3F6FF;
    --white:#fff;
    --green:#168A52;
    --shadow:0 16px 38px rgba(38,47,74,.08);
    --sticky-header-offset:0px;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:Inter,Arial,Helvetica,sans-serif;
    color:var(--navy);
    background:#fff;
}
.wrap{max-width:1280px;margin:0 auto;padding:64px 24px 88px}
.hero{text-align:center;margin-bottom:30px}
.hero h1{
    margin:0 auto 14px;
    max-width:940px;
    font-size:clamp(42px,5vw,68px);
    line-height:1.02;
    letter-spacing:-.05em;
}
.hero p{
    max-width:720px;
    margin:0 auto;
    color:var(--muted);
    font-size:17px;
    line-height:1.5;
}
.pricing-controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;
    margin:30px auto 40px;
    flex-wrap:wrap;
}

.currency-switcher{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.currency-switcher button{
    padding: 6px 13px;
    background: #EEEFF3;
    border-radius: 6px;
    font: 18px / 26px 'Inter';
    letter-spacing: -0.01em;
    color: #181818;
    border: none;
}

.currency-switcher button.active{
    background:#DCE6FF;
    color:var(--blue);
}

.billing{
    padding: 8px;
    background: rgba(41, 41, 41, 0.05);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.billing button{
    background: rgba(41, 41, 41, 0.05);
    height: 56px;
    width: 180px;
    border-radius: 12px;
    margin: 0 4px;
    font: 18px / 26px 'Inter';
    letter-spacing: -0.01em;
    color: #181818;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}
.billing button.active{
    background:var(--blue);
    color:#fff;
    box-shadow:0 2px 8px rgba(41,98,255,.18);
}
.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    align-items:stretch;
}
.card{
    border:1px solid #D8DCE4;
    border-radius:14px;
    background:#fff;
    padding:26px;
    display:flex;
    flex-direction:column;
    min-height:620px;
}
.card.business{
    border:2px solid var(--blue);
    padding:25px;
    background:#fff;
    box-shadow:none;
    position:relative;
}
.badge{
    position:absolute;
    top:-12px;
    left:50%;
    transform: translateX(-50%);
    background:var(--blue);
    color:#fff;
    border-radius:999px;
    padding:5px 10px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.02em;
}
.plan-title{
    font-size:28px;
    font-weight:900;
    letter-spacing:-.035em;
    margin:0 0 6px;
}
.plan-sub{
    color:var(--muted);
    font-size:14px;
    line-height:1.45;
    min-height:38px;
}
.selector-label{
    font-size:12px;
    font-weight:800;
    color:var(--muted);
    margin:22px 0 8px;
    text-transform:none;
    letter-spacing:0;
}
.segment{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px;
}
.segment button{
    border:1px solid var(--line);
    background:#fff;
    color:var(--navy);
    border-radius:8px;
    padding:10px 12px;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
}
.segment button.active{
    border-color:var(--blue);
    background:#F1F5FF;
    color:var(--blue);
    box-shadow:inset 0 0 0 1px var(--blue);
}
.price-wrap{
    margin:24px 0 2px;
    min-height:78px;
}
.price{
    font-size:46px;
    line-height:1;
    font-weight:900;
    letter-spacing:-.05em;
}
.price small{
    font-size:17px;
    letter-spacing:0;
    font-weight:700;
}
.price-note{
    color:var(--muted);
    margin-top:6px;
    font-size:13px;
}
.divider{
    height:1px;
    background:var(--line);
    margin:18px 0;
}
.list{
    display:grid;
    gap:10px;
    margin:0;
    padding:0;
    list-style:none;
}
.list li{
    position:relative;
    padding-left:24px;
    font-size:14px;
    line-height:1.45;
}
.list li:before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:var(--green);
    font-weight:900;
}
.list li.upgrade:before{
    content:"+";
    color:var(--blue);
}

.inheritance{
    margin:18px 0 12px;
    padding:10px 12px;
    border-left:3px solid var(--blue);
    border-radius:0 8px 8px 0;
    background:#F6F8FF;
    color:var(--navy);
    font-size:13px;
    line-height:1.4;
    font-weight:900;
}

.inheritance span{
    color:var(--blue);
    margin-right:6px;
}

.group-label{
    margin:2px 0 9px;
    color:var(--muted);
    font-size:11px;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.optional-apps{
    margin-top:16px;
    padding:12px 13px;
    border:1px solid var(--line);
    border-radius:9px;
    background:#FAFBFC;
}

.optional-apps .optional-title{
    display:block;
    margin-bottom:5px;
    color:var(--navy);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.optional-apps .optional-copy{
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
}

.dynamic{
    font-weight:800;
}
.note{
    display:block;
    color:var(--muted);
    font-size:12px;
    line-height:1.4;
    margin-top:2px;
}
.spacer{flex:1}
.cta{
    margin-top:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:13px 16px;
    border-radius:8px;
    background:var(--blue);
    color:#fff;
    font-weight:900;
    text-decoration:none;
    font-size:13px;
}
.enterprise-note{
    margin-top:12px;
    padding:12px 13px;
    border:1px dashed #B7C1D3;
    border-radius:10px;
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
}
.enterprise-note strong{color:var(--navy)}
.custom-plan{
    margin-top:18px;
    padding:22px 24px;
    border:1px solid #C9D5F8;
    border-radius:12px;
    background:#F7F9FF;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
}
.custom-plan h2{margin:0 0 6px;font-size:24px;letter-spacing:-.025em}
.custom-plan p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.custom-plan .contact-sales{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:138px;
    padding:13px 18px;
    border-radius:10px;
    background:var(--blue);
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:900;
}
.compare{
    margin-top:42px;
    padding:22px 24px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
}
.compare h2{
    margin:0 0 5px;
    font-size:28px;
    letter-spacing:-.03em;
}
.compare p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.45;
}
.compare a{

}
@media(max-width:900px){
    .cards{grid-template-columns:1fr}
    .card{min-height:auto}
}
@media(max-width:620px){
    .wrap{padding:40px 14px 60px}
    .pricing-controls{gap:14px;margin:24px auto 32px}
    .currency-switcher{width:100%}
    .currency-switcher button{flex:1}
    .billing{width:100%}
    .billing button{flex:1}
    .compare{align-items:flex-start;flex-direction:column}
    .custom-plan{align-items:flex-start;flex-direction:column}
    .custom-plan .contact-sales{width:100%}
}

/* Reusable Shopify-style tooltip */
.info-tip{
    appearance:none;
    -webkit-appearance:none;
    display:inline-grid;
    place-items:center;
    width:18px;
    height:18px;
    margin-left:6px;
    padding:0;
    border:1px solid #AEB5C1;
    border-radius:50%;
    background:#fff;
    color:#657084;
    font:800 11px/1 Arial,Helvetica,sans-serif;
    vertical-align:middle;
    cursor:help;
}
.info-tip:hover,
.info-tip:focus-visible,
.info-tip[aria-expanded="true"]{
    border-color:var(--blue);
    color:var(--blue);
    outline:none;
}
.tooltip-popover{
    --arrow-left:50%;
    position:fixed;
    z-index:99999;
    left:0;
    top:0;
    width:min(290px,calc(100vw - 24px));
    padding:11px 12px;
    border-radius:8px;
    background:#20242C;
    color:#fff;
    font-size:12px;
    line-height:1.45;
    font-weight:400;
    text-align:left;
    box-shadow:0 10px 28px rgba(0,0,0,.18);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(3px);
    transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
}
.tooltip-popover.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.tooltip-popover::after{
    content:"";
    position:absolute;
    left:var(--arrow-left);
    bottom:-6px;
    width:12px;
    height:12px;
    background:#20242C;
    transform:translateX(-50%) rotate(45deg);
    border-radius:1px;
}
.tooltip-popover.is-below::after{
    top:-6px;
    bottom:auto;
}
@media(max-width:720px){
    .info-tip{
        width:20px;
        height:20px;
        font-size:11px;
    }
    .tooltip-popover{
        width:min(300px,calc(100vw - 24px));
        font-size:12px;
    }
}


.currency-status{
    display:none;
    width:100%;
    margin-top:-24px;
    margin-bottom:26px;
    text-align:center;
    color:var(--muted);
    font-size:12px;
    line-height:1.4;
}
.currency-status.is-visible{display:block}

.intro{
    max-width:760px;
    margin:0 0 40px;
    color:var(--muted);
    font-size:16px;
    line-height:1.55;
}

.table-card{
    background:#fff;
}

.table-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

table{
    width:100%;
    min-width:920px;
    border-collapse:collapse;
    table-layout:fixed;
}

th,td{
    padding:18px 18px;
    border-bottom:1px solid var(--line);
    text-align:center;
    vertical-align:middle;
}

th:first-child,
td:first-child{
    width:42%;
    text-align:left;
}

thead th{
    background:#fff;
    font-size:17px;
    font-weight:700;
    border-top:1px solid var(--line);
}

thead th:first-child{
    color:var(--muted);
    font-size:14px;
    font-weight:600;
}

.plan-head{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.plan-name{
    font-size:17px;
    font-weight:800;
}

.plan-name.business{
    color:var(--blue);
}

.mini-cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    padding: 12px 12px;
    border-radius: 7px;
    border: 1px solid var(--blue);
    background: #fff;
    color: var(--blue);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.mini-cta.primary{
    background:var(--blue);
    color:#fff;
}

.section-row td{
    padding:34px 18px 10px;
    border-bottom:0;
    background:#fff;
    color:var(--navy);
    font-size:18px;
    font-weight:800;
    letter-spacing:-.015em;
    text-transform:none;
}

.section-row + tr td{
    border-top:1px solid var(--line);
}

.subsection-row td{
    padding:26px 18px 10px;
    border-bottom:0;
    background:#fff;
    color:var(--muted);
    font-size:13px;
    font-weight:800;
    letter-spacing:.03em;
    text-transform:uppercase;
}

.feature{
    font-size:14px;
    line-height:1.45;
    font-weight:600;
}

.note{
    display:block;
    margin-top:4px;
    max-width:500px;
    color:var(--muted);
    font-size:14px;
    line-height:1.45;
    font-weight:400;
}

.value{
    font-size:14px;
    font-weight:700;
}

.check{
    color:var(--blue);
    font-size:20px;
    line-height:1;
    font-weight:900;
}

.dash{
    color:#B2B8C4;
    font-size:20px;
    line-height:1;
}

.separate{
    display:inline-block;
    color:var(--muted);
    font-size:14px;
    font-weight:700;
}

.integration-note td{
    padding:12px 18px 18px;
    border-bottom:1px solid var(--line);
    background:#fff;
    color:var(--muted);
    font-size:14px;
    line-height:1.5;
    text-align:left;
}

.integration-note strong{
    color:var(--navy);
}

.legend{
    margin-top:28px;
    padding-top:20px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
}

.legend strong{
    color:var(--navy);
}

tbody tr:last-child td{
    border-bottom:1px solid var(--line);
}

/* Sticky plan header */
.sticky-plan-header{
    display:none;
    position:fixed;
    z-index:1000;
    top:var(--sticky-header-offset);
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 4px 14px rgba(38,47,74,.06);
}

.sticky-plan-header.is-visible{
    display:grid;
    grid-template-columns:42% 19.333% 19.333% 19.333%;
}

.sticky-plan-header > div{
    min-height:104px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 18px;
    background:#fff;
    border-right:1px solid var(--line);
}

.sticky-plan-header > div:first-child{
    justify-content:flex-start;
    align-items:flex-start;
    padding-top:20px;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
}

.sticky-plan-header > div:last-child{
    border-right:0;
}

.sticky-plan{
    width:100%;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
        "name cta"
        "gmv gmv"
        "integrations integrations";
    column-gap:10px;
    row-gap:5px;
    align-items:center;
}

.sticky-plan-name{
    grid-area:name;
    font-size:14px;
    font-weight:800;
}

.sticky-plan.business .sticky-plan-name{
    color:var(--blue);
}

.sticky-plan .mini-cta{
    grid-area:cta;
    min-width:72px;
    padding:7px 10px;
    font-size:11px;
}

.sticky-plan-gmv{
    grid-area:gmv;
    color:var(--navy);
    font-size:12px;
    line-height:1.3;
    font-weight:700;
}

.sticky-plan-integrations{
    grid-area:integrations;
    color:var(--muted);
    font-size:11px;
    line-height:1.3;
    font-weight:600;
}

@media(max-width:720px){

    th,td{padding:15px 14px}
    .intro{font-size:15px}
    .sticky-plan-header > div{
        min-height:96px;
        padding:8px 6px;
    }
    .sticky-plan-header > div:first-child{
        padding-top:14px;
    }
    .sticky-plan{
        grid-template-columns:1fr;
        grid-template-areas:
          "name"
          "gmv"
          "integrations";
        row-gap:3px;
        text-align:center;
    }
    .sticky-plan .mini-cta{
        display:none;
    }
    .sticky-plan-name{font-size:12px}
    .sticky-plan-gmv{font-size:10px}
    .sticky-plan-integrations{font-size:10px}
}

/* Shopify-like mobile comparison: one selected plan at a time */
.mobile-comparison{
    display:none;
}

@media(max-width:720px){
    .table-card,
    .sticky-plan-header{
        display:none !important;
    }

    .mobile-comparison{
        display:block;
        margin-top:10px;
    }

    .mobile-plan-tabs-wrap{
        position:sticky;
        top:var(--sticky-header-offset);
        z-index:1000;
        margin:0 -14px;
        padding:10px 14px;
        background:rgba(255,255,255,.97);
        border-top:1px solid var(--line);
        border-bottom:1px solid var(--line);
        backdrop-filter:blur(8px);
    }
    .mobile-plan-tabs-wrap.is-visible{
        position: fixed;
        left: 15px;
        width: 100%;
    }

    .mobile-plan-tabs{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:6px;
        padding:4px;
        border-radius:10px;
        background:#F3F4F6;
    }

    .mobile-plan-tab{
        border:0;
        border-radius:8px;
        padding:10px 6px;
        background:transparent;
        color:var(--navy);
        font-size:12px;
        line-height:1.2;
        font-weight:800;
        cursor:pointer;
    }

    .mobile-plan-tab.active{
        background:#fff;
        color:var(--blue);
        box-shadow:0 1px 5px rgba(38,47,74,.10);
    }

    .mobile-plan-summary{
        padding:22px 0 10px;
    }

    .mobile-plan-summary-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:14px;
    }

    .mobile-plan-title{
        margin:0;
        font-size:26px;
        line-height:1.1;
        letter-spacing:-.03em;
    }

    .mobile-plan-cta{
        flex:0 0 auto;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:10px 14px;
        border-radius:8px;
        background:var(--blue);
        color:#fff;
        text-decoration:none;
        font-size:12px;
        font-weight:800;
    }

    .mobile-plan-meta{
        margin-top:8px;
        color:var(--muted);
        font-size:13px;
        line-height:1.45;
    }

    .mobile-section{
        padding:26px 0 0;
    }

    .mobile-section-title{
        margin:0 0 10px;
        font-size:18px;
        line-height:1.25;
        font-weight:800;
        letter-spacing:-.015em;
    }

    .mobile-subsection-title{
        margin:22px 0 7px;
        color:var(--muted);
        font-size:12px;
        line-height:1.3;
        font-weight:800;
        letter-spacing:.05em;
        text-transform:uppercase;
    }

    .mobile-feature-list{
        border-top:1px solid var(--line);
    }

    .mobile-feature-row{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        gap:14px;
        align-items:center;
        min-height:54px;
        padding:12px 0;
        border-bottom:1px solid var(--line);
    }

    .mobile-feature-name{
        font-size:13px;
        line-height:1.4;
        font-weight:600;
    }

    .mobile-feature-note{
        display:block;
        margin-top:3px;
        color:var(--muted);
        font-size:11px;
        line-height:1.4;
        font-weight:400;
    }

    .mobile-feature-value{
        max-width:132px;
        text-align:right;
        color:var(--navy);
        font-size:13px;
        line-height:1.35;
        font-weight:700;
    }

    .mobile-feature-value.yes{
        color:var(--blue);
        font-size:19px;
    }

    .mobile-feature-value.no{
        color:#A8AFBC;
        font-size:18px;
    }

    .mobile-feature-value.separate{
        color:var(--muted);
        font-size:11px;
        font-weight:700;
    }

    .mobile-integration-note{
        margin-top:8px;
        padding:12px 0 0;
        color:var(--muted);
        font-size:11px;
        line-height:1.5;
    }

    .mobile-integration-note strong{
        color:var(--navy);
    }

    .mobile-bottom-cta{
        margin-top:30px;
        padding:18px 0 4px;
        border-top:1px solid var(--line);
    }

    .mobile-bottom-cta a{
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        min-height:46px;
        border-radius:8px;
        background:var(--blue);
        color:#fff;
        text-decoration:none;
        font-size:14px;
        font-weight:800;
    }
}


/* Reusable Shopify-style tooltip */
.info-tip{
    appearance:none;
    -webkit-appearance:none;
    display:inline-grid;
    place-items:center;
    width:18px;
    height:18px;
    margin-left:6px;
    padding:0;
    border:1px solid #AEB5C1;
    border-radius:50%;
    background:#fff;
    color:#657084;
    font:800 11px/1 Arial,Helvetica,sans-serif;
    vertical-align:middle;
    cursor:help;
}
.info-tip:hover,
.info-tip:focus-visible,
.info-tip[aria-expanded="true"]{
    border-color:var(--blue);
    color:var(--blue);
    outline:none;
}
.tooltip-popover{
    --arrow-left:50%;
    position:fixed;
    z-index:99999;
    left:0;
    top:0;
    width:min(290px,calc(100vw - 24px));
    padding:11px 12px;
    border-radius:8px;
    background:#20242C;
    color:#fff;
    font-size:12px;
    line-height:1.45;
    font-weight:400;
    text-align:left;
    box-shadow:0 10px 28px rgba(0,0,0,.18);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(3px);
    transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
}
.tooltip-popover.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.tooltip-popover::after{
    content:"";
    position:absolute;
    left:var(--arrow-left);
    bottom:-6px;
    width:12px;
    height:12px;
    background:#20242C;
    transform:translateX(-50%) rotate(45deg);
    border-radius:1px;
}
.tooltip-popover.is-below::after{
    top:-6px;
    bottom:auto;
}
@media(max-width:720px){
    .info-tip{
        width:20px;
        height:20px;
        font-size:11px;
    }
    .tooltip-popover{
        width:min(300px,calc(100vw - 24px));
        font-size:12px;
    }
}
.tarif_month{
    display: none;
}
.tarif_year{
    display: none;
}
.tarif_month.active{
    display: block;
}
.tarif_year.active{
    display: block;
}
.add_text{
    padding: 12px 0;
    font-size: 14px;
    line-height: 1.45;
}
.data_tarif_info{
    display: none;
}
.data_tarif_info.active{
    display: block;
}
.btn_tarif3__amount_n{
    display: none;
}
.btn_tarif3__amount_n.active{
    display: block;
}
.js_select_subtarif_price{
    display: none;
}
.js_select_subtarif_price.active{
    display: block;
}
.mobile_plan{
    display: none;
}
.mobile_plan.active{
    display: block;
}