/* =====================================================================
   Payouts for platforms — landing page styles
   Prefix: .pfp
   ===================================================================== */

.pfp {
    --pfp-bg: #000;
    --pfp-surface: #222;
    --pfp-white: #fff;
    --pfp-muted: #888;
    --pfp-secondary: #727272;
    --pfp-green: #22e243;
    --pfp-line: rgba(255, 255, 255, .1);
    --pfp-max: 1360px;

    background: var(--pfp-bg);
    color: var(--pfp-white);
    font-family: Nunito, -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: clip;
}

.pfp *,
.pfp *::before,
.pfp *::after {
    box-sizing: border-box;
}

.pfp-container {
    width: 100%;
    max-width: var(--pfp-max);
    margin-inline: auto;
    padding-inline: 24px;
}

.pfp-section {
    padding-block: 64px;
}

.pfp-usecases {
    /* --Gradient-Darkside nigdzie nie jest zdefiniowany (renderował się fallback 143deg); Figma: 160deg */
    background: linear-gradient(160deg, #222 0.72%, #000 100%);
}

/* ---- Breadcrumbs ---- */
.pfp .zen-breadcrumbs {
    max-width: var(--pfp-max);
    margin: 0 auto;
    padding: 20px 24px 0;
}

.pfp .zen-breadcrumbs a,
.pfp .zen-breadcrumbs li,
.pfp .zen-breadcrumbs span {
    color: var(--pfp-muted);
}

.pfp .zen-breadcrumbs li:last-child span {
    color: var(--pfp-green);
}

/* ---- Shared primitives ---- */
.pfp-eyebrow {
    margin: 0;
    color: var(--pfp-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.pfp-eyebrow--center {
    text-align: center;
}

.pfp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 64px;
    padding: 0 38px; /* 38 + 2px border = 40px efektywnego insetu jak w Figmie (32px pad + 8px spacer) */
    border: 2px solid transparent;
    border-radius: 64px;
    font-family: Nunito, sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.pfp-btn--green {
    background: var(--pfp-green);
    color: #000;
}

/* Standardowy hover przycisku – jak clp_bf-hero__btn na pozostałych landingach */
.pfp-btn--green:hover {
    border: 2px solid #000;
    background: #f7f7f7;
    color: #222;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, .15);
    background-image: url(https://www.zen.com/wp-content/themes/zen/images/deals-landing/patern.webp);
    background-position: center;
    background-size: cover;
}

/* =====================================================================
   HERO
   ===================================================================== */
.pfp-hero {
    padding-top: 40px;
    padding-bottom: 72px;
}

.pfp-hero__inner {
    display: flex;
    align-items: center;
    /* Figma: wiersz hero (528+32+644=1204; wizual 640+4px na obwódkę węzła karty) dosunięty
       do prawej krawędzi contentu 1312 — spójne z trust barem i FAQ */
    justify-content: flex-end;
    gap: 32px;
}

.pfp-hero__content {
    flex: 0 1 528px;
    max-width: 528px;
}

.pfp-hero__title {
    margin: 24px 0 48px;
    color: var(--pfp-white);
    font-size: 56px;
    font-weight: 700;
    line-height: 64px;
}

.pfp-hero__subtitle {
    margin: 0 0 40px;
    color: var(--pfp-muted);
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}

.pfp-hero__visual {
    position: relative;
    container-type: inline-size;
    flex: 0 0 auto;
    width: 644px; /* = szerokość canvasu SVG (640 + 4px, żeby obwódka węzła karty się nie przycinała) */
    max-width: 100%;
}

/* Hero visual = exported Figma SVG (phone + 3D badges + connectors + side pills). */
.pfp-hero__visual-svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Phone-screen UI as an HTML overlay so the label can wrap inside the phone and the
   green "Withdraw" pill can grow with its text. Positions are % of the 644x612 visual;
   font sizes use cqw so they scale with the phone. */
.pfp-hero__screen {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pfp-hero__balance-box {
    position: absolute;
    top: 48.5%;
    left: 50%; /* = 322px, środek telefonu (canvas poszerzony do 644) */
    transform: translate(-50%, -50%);
    width: 34%; /* ≈ phone-screen inner width → label wraps here, not across the image */
    text-align: center;
}

.pfp-hero__balance {
    margin: 0;
    color: var(--pfp-white);
    font-weight: 700;
    font-size: 7.5cqw; /* ≈ 48px @ 640 — mniejszy niż makietowe 56px, żeby "500 EUR" stało w 1 linii */
    line-height: 1.05;
    white-space: nowrap; /* kwota nigdy się nie zawija; box wyśrodkowany, więc nadmiar rozchodzi się symetrycznie */
    transition: opacity .35s ease; /* JS podmienia kwotę na przezroczystym tekście */
}

.pfp-hero__balance-label {
    margin: 1.4cqw 0 0;
    color: var(--pfp-muted);
    font-weight: 500;
    font-size: 1.875cqw; /* = 12px @ 640 */
    line-height: 1.3;
    letter-spacing: .05em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.pfp-hero__withdraw {
    position: absolute;
    top: 81.5%;
    left: 50.1%; /* = 322.6px w canvasie 644 (dawne 50.4% z 640) */
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 62cqw; /* nie wychodzi poza obrys telefonu nawet przy długim tekście */
    padding: 2.3cqw 5cqw;
    border-radius: 64px;
    background: var(--pfp-green);
    color: #000;
    font-weight: 800;
    font-size: 2.3cqw; /* ≈ 15px @ 640; pill rośnie z tekstem dzięki paddingowi */
    line-height: 1;
    white-space: nowrap;
    transition: transform .15s ease;
}

/* "Wciśnięcie" przycisku Withdraw na starcie każdego scenariusza animacji */
.pfp-hero__withdraw.is-pressed {
    transform: translate(-50%, -50%) scale(.92);
}

/* Nakładka animacji: niewidoczne ścieżki konektorów (puls jedzie po nich w JS) + kropka pulsu.
   Ten sam viewBox 640x612 co eksport z Figmy, więc współrzędne 1:1. */
.pfp-hero__anim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pfp-hero__anim path {
    fill: none;
    stroke: none;
}

/* Boczne pigułki jako HTML (jak ekran telefonu) — tłumaczenie zmienia szerokość dzięki
   paddingowi, a JS może je wygaszać/pokazywać w scenariuszach wypłat.
   Pozycje = centra pigułek z eksportu Figmy: card (585.7, 186.6), crypto (585.2, 409.6),
   bank (57, 283.8) w układzie 644x612. */
.pfp-hero__pill {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12.5cqw; /* = 80px @ 640 (szerokość pigułki z Figmy) */
    height: 5cqw;       /* = 32px @ 640 */
    padding: 0 2.5cqw;
    border: 1px solid var(--pfp-green);
    border-radius: 64px;
    background: #000;
    color: var(--pfp-white);
    font-weight: 800;
    font-size: 1.72cqw; /* = 11px @ 640 */
    line-height: 1;
    white-space: nowrap;
    transition: opacity .4s ease;
}

.pfp-hero__pill--card   { left: 90.95%; top: 30.5%; }
.pfp-hero__pill--crypto { left: 90.9%;  top: 66.9%; }
.pfp-hero__pill--bank   { left: 8.85%;  top: 46.4%; }

/* Gdy JS wystartuje animację (.is-animating), pigułki znikają i pokazuje je scenariusz.
   Bez JS / przy prefers-reduced-motion klasa nie jest dodawana — pigułki stoją statycznie. */
.pfp-hero__visual.is-animating .pfp-hero__pill {
    opacity: 0;
}

.pfp-hero__visual.is-animating .pfp-hero__pill.is-visible {
    opacity: 1;
}

/* Trust badges — desktopowe wyrównanie do lewej (wcięcie 112px) jest w bloku min-width:1025px,
   bo poniżej układ przechodzi w wyśrodkowaną kolumnę */
.pfp-hero__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 64px;
    margin-top: 96px;
    padding-inline: 24px;
    list-style: none;
}

.pfp-hero__trust-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pfp-hero__trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 32px;
    background: var(--Shades-Dark-Side-Antracite, #222);
}

.pfp-hero__trust-text {
    color: var(--pfp-white);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.pfp-hero__trust-text strong {
    font-weight: 700;
}

/* =====================================================================
   TABS (Card / Crypto / Bank)
   ===================================================================== */
.pfp-tabs__nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 72px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 48px;
    background:
        linear-gradient(175deg, #222 1%, #000 100%) padding-box,
        linear-gradient(178deg, var(--Secondary, #727272) 1.89%, rgba(0, 0, 0, 0.00) 97.72%) border-box;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

.pfp-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 57px;
    padding: 0 32px 0 24px; /* Figma: 24px od strony ikony, 32px od strony tekstu */
    border: 0;
    border-radius: 64px;
    background: transparent;
    color: var(--pfp-white);
    font-family: Nunito, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease;
}

.pfp-tabs__tab:hover {
    background: rgba(255, 255, 255, .06);
}

.pfp-tabs__tab.is-active {
    background: var(--pfp-surface);
}

.pfp-tabs__tab-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

/* Panels */
.pfp-tabs__panel {
    display: none;
}

.pfp-tabs__panel.is-active {
    display: block;
}

.pfp-panel__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 864px;
    margin: 0 auto 72px;
    text-align: center;
}

.pfp-panel__title {
    margin: 0;
    color: var(--pfp-white);
    font-size: 56px;
    font-weight: 700;
    line-height: 64px;
}

.pfp-panel__subtitle {
    margin: 24px 0 0; /* 24px gap + 24px margin = 48px H2→subtitle jak w Figmie */
    color: var(--pfp-muted);
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}

.pfp-panel__body {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* Figma: card 139 / crypto 141 / bank 112 (dryf projektowy) — 140 dla spójności między zakładkami,
       bank ma własne 112 w bloku min-width:1025px */
    gap: 140px;
}

.pfp-panel__phone {
    position: relative;
    flex: 0 0 304px;
    width: 304px;
    max-width: 100%;
    aspect-ratio: 304 / 611;
    overflow: hidden;
}

/* Źródłowy PNG to kwadrat 4096x4096 (telefon + marginesy) — bez kadru renderował się
   jako 304x304. Wartości kadru 1:1 z ramki Figmy (Mockup_3-1 2, węzeł 36684:18929). */
.pfp-panel__phone img {
    position: absolute;
    top: -7.15%;
    left: -63.26%;
    width: 227.55%;
    max-width: none;
    height: 113.21%;
}

/* Nagranie ekranu wpasowane w czarny ekran mockupu (crypto 560x1200, card 226x526).
   Kadr z bboxa czarnego pola w PNG (1614x3460+1240+350) przeliczonego na % kontenera
   304x611. object-fit: cover — crypto ma proporcje ekranu 1:1, card jest węższe, więc
   lekko przycina górę/dół. Promień ~250px ekranu w PNG x skala 0.169 ≈ 42px zaokrągla
   rogi wideo do rogów ekranu (spod nadmiaru wychodzi czarny ekran, nie krawędź ramki). */
.pfp-panel__phone-video {
    position: absolute;
    top: 2.52%;
    left: 5.63%;
    width: 89.66%;
    height: 95.63%;
    object-fit: cover;
    border-radius: 43px;
}

.pfp-panel__content {
    flex: 0 1 528px;
    max-width: 528px;
    padding-top: 46px;
}

.pfp-panel__lead {
    margin: 16px 0 58px;
    color: var(--pfp-white);
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}

/* Numbered steps */
.pfp-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pfp-steps__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 0; /* globalny ol li z global.css dokłada 10px */
}

.pfp-steps__num {
    position: relative;
    flex: 0 0 40px;
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 32px;
    background:
        radial-gradient(circle at center, var(--pfp-green) 0 10.25px, transparent 10.25px),
        var(--pfp-surface);
    color: #000;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.pfp-steps__text {
    max-width: 360px; /* szerokość boksu tekstu kroków w Figmie */
    color: var(--pfp-white);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.pfp-panel__content .pfp-btn {
    margin-top: 64px;
}

/* Chips (crypto coins + currencies) */
.pfp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Komponent cashback.category z Figmy: 57px, padding 24/32, ikona 24px z ringiem ~17.4px */
.pfp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 57px;
    padding: 0 32px 0 24px;
    border-radius: 64px;
    background: var(--pfp-surface);
    color: var(--pfp-white);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

.pfp-chip__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

.pfp-chip__dot::before {
    content: '';
    width: 17.4px;
    height: 17.4px;
    border: 1.8px solid var(--pfp-green);
    border-radius: 50%;
}

/* Info cards (crypto stacked + bank grid) */
.pfp-info-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}

.pfp-info-cards--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 32px; /* Figma: 32px w poziomie, 25px w pionie (celowo nierówne) */
    margin-top: 0;
}

.pfp-info-card {
    border-radius: 16px;
    padding: 32px 60px 32px 40px;
    background: linear-gradient(168deg, rgba(62, 60, 60, .72) 11.58%, rgba(34, 34, 34, .65) 55.39%, #000 66.15%) #000;
}

/* Karty bank (2x2) — inne proporcje, więc gradient i padding wg makiety bank */
.pfp-info-card--bank {
    padding: 36px 30px 19px 20px;
    background: linear-gradient(142deg, rgba(62, 60, 60, .72) 11.58%, rgba(34, 34, 34, .65) 55.39%, #000 66.15%) #000;
}

.pfp-info-card__badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 24px;
    border: 1px solid var(--pfp-white);
    border-radius: 32px;
    color: var(--pfp-white);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.pfp-info-card__label {
    margin: 0 0 16px;
    color: var(--pfp-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.pfp-info-card__text {
    margin: 0;
    color: var(--pfp-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
}

/* =====================================================================
   USE CASES (Two ways)
   ===================================================================== */
.pfp-usecases__head {
    max-width: 864px;
    margin: 0 auto 72px;
    text-align: center;
}

/* W Figmie to lead 24/32, nie duży nagłówek */
.pfp-usecases__title {
    margin: 32px 0 0;
    color: var(--pfp-white);
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}

.pfp-usecases__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 528px));
    justify-content: center;
    gap: 28px;
    align-items: stretch;
}

.pfp-usecase-card {
    display: flex;
    flex-direction: column;
    padding: 51px 30px 32px 34px;
    max-width: 528px;
    border-radius: 16px;
    background: linear-gradient(141deg, rgba(62, 60, 60, .72) 11.58%, rgba(34, 34, 34, .65) 55.39%, #000 66.15%);
}

.pfp-usecase-card__label {
    margin: 0 0 16px;
    color: var(--pfp-green);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
}

.pfp-usecase-card__title {
    margin: 0 0 16px;
    color: var(--Shades-Dark-Side-White, #FFF);
    font-family: Nunito, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    font-feature-settings: 'liga' off, 'clig' off;
}

.pfp-usecase-card__text {
    margin: 0 0 32px;
    color: var(--pfp-muted);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    max-width: 464px;
}

.pfp-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 8px;
    max-width: 464px;
}

.pfp-tag {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 24px;
    border: 1px solid var(--Shades-Dark-Side-Soft-Grey, #888);
    border-radius: 64px;
    color: var(--pfp-white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* =====================================================================
   BENEFITS + CURRENCIES
   ===================================================================== */
.pfp-benefits__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.pfp-benefits__title {
    margin: 0 0 40px;
    color: var(--pfp-white);
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
}

.pfp-benefits__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pfp-benefits__item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pfp-benefits__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 32px;
    background: var(--Shades-Dark-Side-Antracite, #222);
}

.pfp-benefits__text {
    color: var(--pfp-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
}

.pfp-benefits__text strong {
    font-weight: 700;
}

.pfp-currencies {
    margin-top: 128px;
}

.pfp-currencies__title {
    margin: 0 0 32px;
    color: var(--pfp-white);
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
}

.pfp-chips--currencies {
    gap: 8px;
}

.pfp-currencies__note {
    margin: 32px 0 0;
    color: var(--pfp-muted);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
}

/* =====================================================================
   FAQ — nadpisania współdzielonego komponentu landing-referral pod design Payouts
   (scoped do .pfp, żeby nie dotykać landing-referral)
   ===================================================================== */
.pfp .zenref-faq__q {
    font-weight: 700; /* Figma: bold w obu stanach, nie tylko po otwarciu */
}

.pfp .zenref-faq__a,
.pfp .zenref-faq__a p,
.pfp .zenref-faq__a ol li {
    color: var(--pfp-white); /* zamiast beżu z referrala */
}

.pfp .zenref-faq__item {
    border-bottom-color: #222;
}

.pfp .zenref-faq__item:first-child {
    border-top: 1px solid #222;
}

.pfp .zenref-faq__item details[open] .zenref-faq__icon circle {
    fill: #22E243;
    stroke: #22E243; /* ikona zostaje zielona po otwarciu (referral przebarwia na beż) */
}

@media (min-width: 768px) {
    .pfp .zenref-faq {
        margin-top: 0;
        padding: 128px 24px;
    }

    .pfp .zenref-faq__title {
        margin-bottom: 64px;
    }

    .pfp .zenref-faq__item {
        padding: 64px 112px; /* stałe 112px zamiast 7vw — pytania równają się z wcięciem hero (x=416) */
    }

    .pfp .zenref-faq__a,
    .pfp .zenref-faq__a p,
    .pfp .zenref-faq__a ol li {
        font-size: 18px !important; /* musi przebić 16px !important z faq.css */
        margin-top: 32px;
        max-width: 864px;
    }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (min-width: 1024px) {
    .pfp-section {
        padding-block: 128px;
    }

    /* .pfp-hero deklaruje padding-top/bottom, ale późniejszy padding-block .pfp-section
       wygrywa kaskadą — stąd jawne nadpisania sekcji hero i tabs */
    .pfp-section.pfp-hero {
        padding-top: 40px;
        padding-bottom: 67px; /* 67 + 64 (tabs padding-top) = 131px odstępu trust bar → taby */
    }

    .pfp-section.pfp-tabs {
        padding-top: 64px;
        padding-bottom: 125px;
    }
}

@media (min-width: 1025px) {
    /* Trust bar wyrównany do lewej z wcięciem 112px (24 container + 112) — jak tekst hero i FAQ */
    .pfp-hero__trust {
        justify-content: flex-start;
        padding-inline: 136px 24px;
    }

    /* Szerokości kolumn treści per zakładka (Figma: crypto 616, bank 644) */
    #pfp-panel-crypto .pfp-panel__content {
        flex: 0 1 620px;
        max-width: 620px;
        padding-top: 0; /* w makiecie crypto obie kolumny zaczynają się na tej samej wysokości */
    }

    #pfp-panel-bank .pfp-panel__content {
        flex: 0 1 644px;
        max-width: 644px;
        padding-top: 15px;
    }

    #pfp-panel-bank .pfp-panel__body {
        gap: 112px;
    }
}

/* Tablet / stacked hero */
@media (max-width: 1180px) {
    .pfp-hero__inner {
        flex-direction: column;
        text-align: center;
    }

    .pfp-hero__content {
        flex: initial;
        max-width: 640px;
        width: 100%;
    }

    .pfp-hero__cta {
        margin-inline: auto;
        width: 100%;
        max-width: 100%;
        padding-inline: 24px;
    }

    .pfp-hero__visual {
        margin-top: 8px;
    }
}

@media (max-width: 1024px) {
    .pfp-panel__body {
        flex-direction: column;
        align-items: center;
        gap: 48px;
    }

    /* W układzie kolumnowym flex-basis 304px stałby się wysokością i przyciął telefon */
    .pfp-panel__phone {
        flex: 0 0 auto;
    }

    .pfp-panel__content {
        padding-top: 0;
        max-width: 528px;
        width: 100%;
    }

    .pfp-info-cards--grid {
        grid-template-columns: 1fr;
        gap: 16px; /* w układzie 1-kolumnowym wraca ciaśniejszy odstęp */
    }

    .pfp-usecases__grid,
    .pfp-benefits__grid {
        grid-template-columns: 1fr;
    }

    .pfp-hero__trust {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .pfp-usecase-card{
        margin-left:auto;
        margin-right:auto;
    }
}

/* Mobile — makieta 400px: kolumna treści 304px (gutter 48), karty use cases 352px (gutter 24) */
@media (max-width: 767px) {
    .pfp-container {
        padding-inline: 48px;
    }

    .pfp-usecases .pfp-container {
        padding-inline: 24px;
    }

    .pfp-section {
        padding-block: 48px;
    }

    .pfp-hero__content {
        width: 100%;
        max-width: 100%;
    }

    /* Po mobilnym .pfp-section — ta sama specyficzność, decyduje kolejność w bloku */
    .pfp-hero {
        padding-top: 48px;
        padding-bottom: 40px;
    }

    .pfp-tabs {
        padding-top: 8px;
    }

    .pfp-hero__title {
        margin-bottom: 24px;
        font-size: 32px;
        line-height: 40px;
    }

    .pfp-hero__subtitle {
        margin-bottom: 24px;
        font-size: 20px;
        line-height: 28px;
    }

    .pfp-hero__visual {
        width: 100%;
        max-width: 420px;
    }

    .pfp-hero__trust {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 8px 48px 40px 48px;
        align-self: stretch;
        margin-top: 56px;
    }

    .pfp-tabs__nav {
        position: sticky;
        top: 0;
        z-index: 40;
        width: calc(100% + 96px);
        max-width: none;
        justify-content: flex-start;
        margin: -16px -48px 56px;
        padding: 16px 24px 8px;
        border: 0;
        border-radius: 0;
        background: var(--pfp-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        overflow-x: auto; /* bez tego taby w ogóle się nie przewijają */
        overscroll-behavior-x: contain;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .pfp-tabs__nav::-webkit-scrollbar {
        display: none;
    }

    .pfp-tabs__tab {
        padding: 0 32px 0 24px;
        flex: 0 0 auto;
    }

    .pfp-panel__head {
        gap: 16px;
        margin-bottom: 32px;
    }

    .pfp-panel__title {
        font-size: 28px;
        line-height: 36px;
    }

    .pfp-panel__subtitle {
        margin-top: 16px; /* 16 gap + 16 margin = 32px H2→subtitle na mobile */
        color: var(--pfp-white);
        font-size: 16px;
        line-height: 24px;
    }

    .pfp-panel__body {
        gap: 32px;
    }

    /* Mobilne tokeny Figmy: zielona etykieta z trackingiem 8% */
    .pfp-panel__content .pfp-eyebrow,
    .pfp-usecases__head .pfp-eyebrow {
        color: #00D06C;
        letter-spacing: 1.12px;
        line-height: normal;
    }

    .pfp-panel__lead {
        margin: 12px 0 32px;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

    .pfp-steps {
        gap: 16px;
    }

    .pfp-btn {
        height: 50px;
        font-size: 14px;
        line-height: 18px;
    }

    /* CTA w panelu większe niż hero CTA i wyśrodkowane */
    .pfp-panel__content .pfp-btn {
        display: flex;
        max-width: max-content;
        margin: 32px auto 0;
        height: 64px;
        font-size: 16px;
        line-height: 24px;
    }

    /* Karty info (crypto/bank) nie występują na mobilnej makiecie — bezpieczny jednolity padding */
    .pfp-info-card,
    .pfp-info-card--bank {
        padding: 24px;
    }

    .pfp-usecases {
        background: linear-gradient(116.5deg, #222 0.72%, #000 100%);
    }

    .pfp-usecases__head {
        margin-bottom: 32px;
        padding-inline: 24px;
    }

    .pfp-usecases__title {
        margin-top: 12px;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

    .pfp-usecase-card {
        padding: 32px 24px;
        background: linear-gradient(146deg, rgba(62, 60, 60, .72) 11.58%, rgba(34, 34, 34, .65) 55.39%, #000 66.15%);
    }

    .pfp-usecase-card__title {
        font-size: 24px;
        line-height: 32px;
    }

    .pfp-usecase-card__text {
        margin-bottom: 24px;
    }

    /* Tagi w makiecie mobilnej to instancje przeskalowane 0.8x (40px → 32px) */
    .pfp-tag {
        height: 32px;
        padding: 0 16px;
        font-size: 9.6px;
    }

    .pfp-benefits__grid {
        gap: 40px;
    }

    .pfp-benefits__title {
        margin-bottom: 96px;
        font-size: 24px;
        line-height: 32px;
    }

    .pfp-currencies {
        margin-top: 40px;
    }

    .pfp-currencies__title {
        font-size: 24px;
        line-height: 32px;
    }

    .pfp-currencies__note {
        font-size: 14px;
    }

    /* FAQ mobile wg makiety Payouts (nadpisuje mobilne reguły faq.css specyficznością .pfp) */
    .pfp .zenref-faq {
        margin-top: 0;
        padding: 48px 48px 32px;
    }

    .pfp .zenref-faq__title {
        margin-bottom: 48px;
        text-align: left;
        font-size: 28px;
        line-height: 36px;
    }

    .pfp .zenref-faq__item {
        padding: 32px 0;
        border-bottom: 0;
        border-top: 1px solid #222;
    }

    .pfp .zenref-faq__item + .zenref-faq__item {
        margin-top: 8px;
    }

    .pfp .zenref-faq__q {
        line-height: 28px;
    }

    .pfp .zenref-faq__a {
        margin-top: 32px;
    }
}