@charset "UTF-8";

.page-cennik .page-main {
    --rgb-lime-ink:      90, 140,  30;
    --rgb-pas-gastro:   241, 243, 236;
    --c-separator:      rgba(var(--rgb-test-proof-ink), 0.12);
    --karta-1-jasny:     var(--c-stats-1a);
    --karta-1-sredni:    var(--c-stats-1b);
    --karta-1-ciemny:    var(--c-mark-ink);
    --karta-2-jasny:     var(--c-stats-2a);
    --karta-2-sredni:    var(--c-stats-2b);
    --karta-2-ciemny:    rgb(var(--rgb-lime-ink));
    --karta-3-jasny:     var(--c-stats-4a);
    --karta-3-sredni:    var(--c-stats-4b);
    --karta-3-ciemny:    var(--c-test-proof-accent);
    --offer-kontener-gora: 1.875rem;
    --karty-space:         calc(var(--plans-space) + 1.1875rem);
    --fs-pakiet-nazwa:   1.875rem;
    --fs-polecamy:       2rem;
    --polecamy-obrot:    -8deg;
    --polecamy-gora:     0.5rem;
    --polecamy-lewo:     1rem;
    --polecamy-strzalka: 4.625rem;
    --polecamy-strzalka-odbicie: 1;
    --polecamy-margines-gora:  0.5rem;
    --polecamy-margines-lewo:  0.375rem;
    --fs-polecamy-min:         1.125rem;
    --fs-polecamy-waski:       1.5rem;
    --polecamy-zapas:          4rem;
    --polecamy-dlugosc:        3;
    --polecamy-strzalka-em:    2.3125em;
    --polecamy-od-nazwy:       5.8125rem;
    --swipe-raczka:      1.875rem;
    --swipe-droga:       1.25rem;
    --swipe-krycie:      0.85;
    --swipe-powtorzen:   3;
    --t-swipe:           2s;
    --karta-odstep-maly: 0.625rem;
    --karta-setup-gora:  1px;
    --karta-lista-gora:  var(--sp-6);
    --karta-cena-gora:   var(--sp-7);
    --karta-cena-gora-niski: 1.25rem;
    --karta-linia:       3px;
    --tarcza:            6.5rem;
    --tarcza-glif:       3.375rem;
    --rgb-tarcza-1-hi:   255, 255, 255;
    --rgb-tarcza-1-lo:   238, 235, 228;
    --c-tarcza-1-obrys:  #e4e0d8;
    --c-tarcza-1-glif:   #221d18;
    --rgb-tarcza-2-hi:   242, 251, 246;
    --rgb-tarcza-2-lo:   223, 243, 232;
    --c-tarcza-2-obrys:  #c9e8d8;
    --c-tarcza-2-glif:   #0b6e4f;
    --rgb-tarcza-3-hi:   253, 246, 232;
    --rgb-tarcza-3-lo:   242, 226, 191;
    --c-tarcza-3-obrys:  #e6cf9f;
    --c-tarcza-3-glif:   #8a6a1c;
    --naglowek-pakietu-pad: var(--sp-9);
    --karta-r:           var(--r-lg);
    --karta-pad:         var(--sp-7) var(--sp-6) var(--sp-6);
    --shadow-karta-pop:  0 1.75rem 3.25rem -1.5rem rgba(var(--rgb-black), 0.34);
    --fs-intro:   clamp(1.0625rem, 1.2vw, 1.25rem);
    --fs-intro-b: 1.6875rem;
}

:lang(de) .page-cennik .page-main { --polecamy-dlugosc: 3.5; }
:lang(en) .page-cennik .page-main { --polecamy-dlugosc: 4.6; }

.karty {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
    align-items: stretch;
    margin-top: var(--karty-space);
}

.karta {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--karta-pad);
    border: var(--karta-linia) solid var(--karta-jasny);
    border-radius: var(--karta-r);
    background: var(--grad-karta-wash), rgb(var(--rgb-test-proof-lit));
    text-align: center;
}

.karta--1 { --karta-jasny: var(--karta-1-jasny); --karta-sredni: var(--karta-1-sredni); --karta-ciemny: var(--karta-1-ciemny); }
.karta--2 { --karta-jasny: var(--karta-2-jasny); --karta-sredni: var(--karta-2-sredni); --karta-ciemny: var(--karta-2-ciemny); }
.karta--3 { --karta-jasny: var(--karta-3-jasny); --karta-sredni: var(--karta-3-sredni); --karta-ciemny: var(--karta-3-ciemny); }

.karta--polecana {
    border-color: var(--karta-sredni);
    box-shadow: var(--shadow-karta-pop);
}

.karta__polecamy {
    position: absolute;
    top: var(--polecamy-gora);
    left: var(--polecamy-lewo);
    margin-top: var(--polecamy-margines-gora);
    margin-left: var(--polecamy-margines-lewo);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transform: rotate(var(--polecamy-obrot));
    color: var(--karta-ciemny);
    font-family: var(--font-odreczny);
    font-size: var(--fs-polecamy);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.karta__polecamy-strzalka {
    width: var(--polecamy-strzalka);
    height: auto;
    align-self: center;
    transform: scaleX(var(--polecamy-strzalka-odbicie));
}

.karta__name {
    font-size: var(--fs-pakiet-nazwa);
    font-weight: 800;
    line-height: var(--lh-tight);
    color: var(--c-text-strong);
}

.karta__tagline {
    margin-top: var(--karta-odstep-maly);
    font-size: var(--fs-xs);
    font-style: italic;
    line-height: var(--lh-small);
    color: var(--c-text-60);
}

.karta__lista {
    display: flex;
    flex-direction: column;
    gap: var(--karta-odstep-maly);
    margin: var(--karta-lista-gora) 0 auto;
    text-align: left;
}

.karta__punkt {
    position: relative;
    padding-left: var(--sp-6);
    font-size: var(--fs-xs);
    line-height: var(--lh-small);
    color: var(--c-text-strong);
}

.karta__punkt::before {
    content: '';
    position: absolute;
    top: 0.3125rem;
    left: 0;
    width: 0.375rem;
    height: 0.6875rem;
    border: solid var(--karta-ciemny);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.karta__pricing { margin-top: var(--karta-cena-gora); }

.karta .plan__amount { justify-content: center; }

.karta .plan__value { color: var(--karta-ciemny); }

.karta .plan__save { color: var(--karta-ciemny); }

.karta .plan__period,
.karta__setup { text-align: center; }

.karta__setup { margin: var(--karta-setup-gora) 0 var(--sp-6); }

.karta__cta {
    width: 100%;
    padding: 0.8125rem var(--sp-6);
    background: var(--karta-ciemny);
    border-color: var(--karta-ciemny);
    color: rgb(var(--rgb-test-proof-lit));
    font-size: var(--fs-label);
    font-weight: 800;
    letter-spacing: var(--ls-cta);
    text-transform: uppercase;
}

.karta__cta:hover,
.karta__cta:focus-visible {
    background: var(--karta-sredni);
    border-color: var(--karta-sredni);
    color: rgb(var(--rgb-test-proof-lit));
}

.page-cennik .offer > .container { margin-top: calc(var(--offer-kontener-gora) * -1); }

@media (min-width: 860.02px) and (min-height: 500.02px) and (max-height: 900px) {
    .page-cennik .page-main {
        --karty-space: var(--offer-karty-odstep);
        --polecamy-margines-gora:  0.125rem;
        --polecamy-margines-lewo:  0.625rem;
        --polecamy-zapas:          4.25rem;
    }

    .karta__tagline { display: none; }

    .karta__pricing { margin-top: var(--karta-cena-gora-niski); }
}

.page-cennik .plans { margin-top: var(--sp-10); }

.plans__wstep { display: none; }

.page-cennik .plans__intro { padding: var(--sp-6) var(--sp-5); }

.page-cennik .plans__intro-title {
    margin-bottom: 0;
    padding-bottom: var(--sp-5);
    font-size: var(--fs-intro-b);
    line-height: var(--lh-tight);
}

.page-cennik .plans__intro-note {
    padding-top: var(--sp-4);
    border-top: 0;
}

.page-cennik .plans__intro-eyebrow {
    margin-bottom: var(--sp-5);
    letter-spacing: var(--ls-label);
}

.page-cennik .plans__intro-eyebrow::before { display: none; }

.intro-lista {
    margin-bottom: auto;
    border-top: 1px solid var(--c-border-soft);
}

.intro-lista__poz {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-border-soft);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-text-strong);
}

.intro-lista__nr {
    flex: 0 0 auto;
    font-size: var(--fs-micro);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-cta);
    color: var(--c-accent);
}

.page-cennik .plans__slot--nazwa {
    padding: 0;
    background: var(--grad-karta-wash);
    vertical-align: middle;
}

.page-cennik .plans__slot--nazwa + .plans__slot--nazwa {
    border-left: 1px solid var(--c-separator);
}

.naglowek-pakietu {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--naglowek-pakietu-pad) var(--sp-5);
}

.plans__swipe {
    position: absolute;
    inset: 0;
    z-index: var(--z-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    animation: swipeGest var(--t-swipe) ease-in-out var(--swipe-powtorzen) forwards;
}

.plans__swipe svg {
    display: block;
    width: var(--swipe-raczka);
    height: auto;
}

@keyframes swipeGest {
    0%   { transform: translateX(var(--swipe-droga)); opacity: 0; }
    20%  { transform: translateX(var(--swipe-droga)); opacity: var(--swipe-krycie); }
    70%  { transform: translateX(calc(var(--swipe-droga) * -1)); opacity: var(--swipe-krycie); }
    100% { transform: translateX(calc(var(--swipe-droga) * -1)); opacity: 0; }
}

.ikona-pakietu {
    --grad-tarcza: radial-gradient(120% 120% at 32% 22%,
                       rgb(var(--rgb-tarcza-hi)) 0%,
                       rgb(var(--rgb-tarcza-lo)) 100%);

    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--tarcza);
    height: var(--tarcza);
    border: 1px solid var(--c-tarcza-obrys);
    border-radius: 50%;
    background: var(--grad-tarcza);
    color: var(--c-tarcza-glif);
}

.ikona-pakietu svg {
    display: block;
    width: var(--tarcza-glif);
    height: var(--tarcza-glif);
}

.naglowek-pakietu__nazwa {
    font-size: var(--fs-pakiet-nazwa);
    font-weight: 800;
    line-height: var(--lh-tight);
    color: var(--c-text-strong);
    text-align: center;
}

.karta-kolor--1 {
    --karta-jasny: var(--karta-1-jasny); --karta-sredni: var(--karta-1-sredni); --karta-ciemny: var(--karta-1-ciemny);
    --rgb-tarcza-hi: var(--rgb-tarcza-1-hi); --rgb-tarcza-lo: var(--rgb-tarcza-1-lo);
    --c-tarcza-obrys: var(--c-tarcza-1-obrys); --c-tarcza-glif: var(--c-tarcza-1-glif);
}

.karta-kolor--2 {
    --karta-jasny: var(--karta-2-jasny); --karta-sredni: var(--karta-2-sredni); --karta-ciemny: var(--karta-2-ciemny);
    --rgb-tarcza-hi: var(--rgb-tarcza-2-hi); --rgb-tarcza-lo: var(--rgb-tarcza-2-lo);
    --c-tarcza-obrys: var(--c-tarcza-2-obrys); --c-tarcza-glif: var(--c-tarcza-2-glif);
}

.karta-kolor--3 {
    --karta-jasny: var(--karta-3-jasny); --karta-sredni: var(--karta-3-sredni); --karta-ciemny: var(--karta-3-ciemny);
    --rgb-tarcza-hi: var(--rgb-tarcza-3-hi); --rgb-tarcza-lo: var(--rgb-tarcza-3-lo);
    --c-tarcza-obrys: var(--c-tarcza-3-obrys); --c-tarcza-glif: var(--c-tarcza-3-glif);
}

.page-cennik .plans__group-label {
    border-block-color: var(--c-test-proof-ink);
    background: var(--c-test-proof-ink);
    color: rgb(var(--rgb-gold-header));
}

.page-cennik .plans__group-icon {
    background: rgb(var(--rgb-gold-header));
    color: var(--c-test-proof-ink);
}

.page-cennik .plans__cell--popular,
.page-cennik .plans__row:nth-child(even) .plans__cell--popular {
    background: rgb(var(--rgb-pas-gastro));
}

.page-cennik .plans__row .plans__cell:nth-child(2) { --karta-ciemny: var(--karta-1-ciemny); }
.page-cennik .plans__row .plans__cell:nth-child(3) { --karta-ciemny: var(--karta-2-ciemny); }
.page-cennik .plans__row .plans__cell:nth-child(4) { --karta-ciemny: var(--karta-3-ciemny); }

.page-cennik .plans__mark--yes,
.page-cennik .plans__cell--popular .plans__mark--yes {
    padding-inline: 0;
    background: transparent;
    color: var(--karta-ciemny);
}

.page-cennik .plans__enterprise-in { align-items: center; }

@media (min-width: 860.02px) and (min-height: 500.02px) {
    .karta--polecana { container-type: inline-size; }

    .karta__polecamy {
        font-size: clamp(var(--fs-polecamy-min),
                         calc((50cqi - var(--polecamy-zapas)) / var(--polecamy-dlugosc)),
                         var(--fs-polecamy));
    }

    .karta__polecamy-strzalka { width: min(var(--polecamy-strzalka), var(--polecamy-strzalka-em)); }
}

@container (max-width: 18.75rem) {
    .karta__polecamy {
        position: static;
        width: max-content;
        margin: 0 auto var(--sp-2);
        font-size: var(--fs-polecamy-waski);
    }

    .karta__polecamy-strzalka path + path { display: none; }
}

@media (max-width: 1080px), (orientation: landscape) and (max-height: 500px) {
    .karty { gap: var(--sp-4); }

    .page-cennik .page-main { --karta-pad: var(--sp-6) var(--sp-5); }
}

@media (max-width: 860px), (orientation: landscape) and (max-height: 500px) {
    .karty {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-6);
        margin-top: var(--sp-7);
    }

    .karta { box-shadow: var(--shadow-karta-pop); }

    .page-cennik .plans { margin-top: var(--sp-8); }

    .page-cennik .page-main {
        --naglowek-pakietu-pad: var(--sp-6);
        --tarcza: 5.25rem;
        --tarcza-glif: 2.625rem;
        --fs-polecamy: 1.625rem;
        --polecamy-lewo: 0.75rem;
    }

    .page-cennik .plans {
        --plans-min: 44rem;
        --plans-wciecie: var(--sp-5);
    }

    .page-cennik .plans__scroll { container-type: inline-size; }

    .page-cennik .plans__slot--intro,
    .page-cennik .plans__label {
        position: sticky;
        left: 0;
        z-index: var(--z-raised);
        background-color: rgb(var(--rgb-test-proof-lit));
        box-shadow: 1px 0 0 var(--c-separator);
    }

    .page-cennik .plans__row:nth-child(even) .plans__label {
        background: linear-gradient(var(--c-fill-zebra), var(--c-fill-zebra)) rgb(var(--rgb-test-proof-lit));
    }

    .page-cennik .plans__label { padding-left: var(--plans-wciecie); }

    .page-cennik .plans__group-label {
        padding-inline: var(--plans-wciecie);
        white-space: normal;
    }

    .page-cennik .plans__enterprise { padding-inline: var(--plans-wciecie); }

    .page-cennik .plans__group-in,
    .page-cennik .plans__enterprise-in {
        position: sticky;
        left: var(--plans-wciecie);
        max-width: calc(100cqi - 2 * var(--plans-wciecie));
    }

    .page-cennik .plans__group-in { width: fit-content; }
}

@media (max-width: 560px), (orientation: landscape) and (max-height: 500px) {
    .page-cennik .page-main {
        --fs-pakiet-nazwa: 1.5rem;
        --fs-polecamy: 1.375rem;
        --polecamy-gora: 0rem;
        --polecamy-lewo: 0rem;
        --polecamy-strzalka: 3.5rem;
        --karta-lista-gora: 0.875rem;
        --karta-cena-gora: var(--sp-5);
    }

    :lang(fr) .page-cennik .page-main { --polecamy-dlugosc: 4.5; }
    :lang(es) .page-cennik .page-main { --polecamy-dlugosc: 4.55; }
    :lang(it) .page-cennik .page-main { --polecamy-dlugosc: 3.8; }

    .karta__polecamy {
        left: max(var(--polecamy-lewo),
                  calc(50% - var(--polecamy-od-nazwy) - var(--polecamy-dlugosc) * var(--fs-polecamy)));
    }

    .karta__tagline { display: none; }

    .karty { margin-top: var(--sp-6); }

    .karta__lista { gap: var(--sp-1); }

    .page-cennik .plans {
        --plans-min: min(38rem, calc(var(--plans-label-w) + 3 * (100cqi - var(--plans-label-w))));
        --plans-label-w: 9.5rem;
        --plans-wciecie: var(--sp-4);
        --naglowek-pakietu-pad: var(--sp-2);
        --tarcza: 3rem;
        --tarcza-glif: 1.5rem;
        --fs-pakiet-nazwa: 1.0625rem;
    }

    .plans__wstep {
        --karta-ciemny: var(--c-test-proof-accent);

        display: block;
        padding: var(--sp-5) var(--plans-wciecie);
        border-bottom: 1px solid var(--c-separator);
    }

    .plans__wstep-nota {
        margin-top: var(--karta-lista-gora);
        font-size: var(--fs-micro);
        line-height: var(--lh-small);
        color: var(--c-text-60);
    }

    .page-cennik .plans__intro {
        justify-content: center;
        padding: var(--sp-4) var(--sp-3) var(--sp-4) var(--plans-wciecie);
    }

    .page-cennik .plans__intro-eyebrow { margin-bottom: 0; }

    .page-cennik .plans__intro-title,
    .page-cennik .plans__intro-note,
    .page-cennik .intro-lista { display: none; }

    .naglowek-pakietu {
        gap: var(--sp-3);
        padding-inline: var(--sp-3);
    }

    .page-cennik .plans__label,
    .page-cennik .plans__cell {
        padding-block: var(--sp-3);
        padding-right: var(--sp-3);
    }

    .page-cennik .plans__label,
    .page-cennik .plans__cell {
        overflow-wrap: break-word;
    }

    .page-cennik .plans__cell { padding-left: var(--sp-3); }
}