/*
 * Dodatki do vs-page.css dla rodziny /add-google-reviews-to-<platforma>.
 * Ladowane PO vs-page.css (patrz template/platform-landing.php), wiec korzysta
 * z tych samych tokenow --jrv-*. Osobny plik, zeby nie ruszac arkusza, ktory
 * obsluguje /vs, /testimonial-widget i /free-google-reviews-widget.
 *
 * 🚨 Gotcha odziedziczona po vs-page.css (komentarz przy .jrv-lead): regula dla
 * akapitu MUSI zawierac element w selektorze (np. `.jrv p.jrp-foo`), bo
 * `.jrv p { margin: 0 0 16px }` ma te sama specyficznosc i wygrywa kolejnoscia.
 */

.jrv .jrp-hero {
    padding-top: 16px;
}

/* Logotyp platformy nad nadtytulem. 88x88 w HTML, zeby przegladarka rezerwowala
   miejsce i nie bylo przesuniecia ukladu (CLS) przy ladowaniu obrazka. */
.jrv .jrp-logo {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    object-fit: contain;
}

/* Lista pulapek: te same odstepy co .jrv-steps, ale bez numeracji, bo to nie sa
   kroki w kolejnosci, tylko rozlaczne przypadki. */
.jrv ul.jrp-pitfalls {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.jrv ul.jrp-pitfalls li {
    position: relative;
    margin: 0 0 18px;
    padding: 0 0 0 20px;
    line-height: 1.62;
}

.jrv ul.jrp-pitfalls li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--jrv-magenta);
}

.jrv ul.jrp-pitfalls li strong {
    display: block;
    color: var(--jrv-navy);
    margin-bottom: 3px;
}

@media (max-width: 900px) {
    .jrv .jrp-logo {
        width: 60px;
        height: 60px;
    }
}

/* --- Warstwa sprzedazowa dolozona 30.08.2026 -------------------------------
   Powod: pomiar wlasnej strony przeciw konkurencji z tego SERP-a. Mielismy
   1 obrazek, 2 CTA i 1452 slowa, a elfsight.com/google-reviews-widget/squarespace/
   ma 9 obrazkow i 18 wywolan do dzialania, embedsocial.com 43 obrazki. Sama tresc
   nie sprzedaje, jesli klient nie widzi produktu i nie ma gdzie kliknac.
   --------------------------------------------------------------------------- */

/* Zrzut ekranu panelu platformy przy krokach. */
.jrv figure.jrp-shot {
    margin: 22px 0 0;
    padding: 0;
}

.jrv figure.jrp-shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--jrv-line);
    border-radius: 12px;
    box-shadow: var(--jrv-card);
}

.jrv figure.jrp-shot figcaption {
    margin-top: 10px;
    font-size: 14.5px;
    color: var(--jrv-grey);
    text-align: center;
}

/* CTA w srodku sekcji, nie tylko w hero i stopce. */
.jrv p.jrp-cta-inline {
    margin: 24px 0 0;
    text-align: center;
}

/* Karty planow. Siatka .jrv-prices-grid z vs-page.css jest dwukolumnowa
   (porownanie "my vs oni"), tu potrzebne sa trzy rowne kolumny. */
.jrv .jrp-prices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.jrv .jrp-prices-grid article {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--jrv-line);
    border-radius: 16px;
    padding: 22px 20px 20px;
    background: #fff;
    box-shadow: var(--jrv-card);
}

/* Plan polecany wyroznia sie tak samo jak kolumna "my" w tabelach porownan. */
.jrv .jrp-prices-grid article.is-us {
    border-top: 4px solid var(--jrv-amber);
}

.jrv .jrp-prices-grid h3 {
    margin: 0 0 6px;
    font-size: 20px;
    color: var(--jrv-navy);
}

.jrv p.jrp-price {
    margin: 0 0 14px;
    font-size: 30px;
    font-weight: 700;
    color: var(--jrv-purple);
    line-height: 1.2;
}

.jrv p.jrp-price span {
    font-size: 15px;
    font-weight: 400;
    color: var(--jrv-grey);
}

.jrv ul.jrp-plan-points {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    flex: 1 1 auto;
    font-size: 15.5px;
    line-height: 1.55;
}

.jrv ul.jrp-plan-points li {
    position: relative;
    padding: 0 0 0 18px;
    margin: 0 0 7px;
}

.jrv ul.jrp-plan-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--jrv-magenta);
}

.jrv a.jrp-plan-cta {
    display: block;
    text-align: center;
    padding: 12px 18px;
    border-radius: 100px;
    background: var(--jrv-amber);
    color: #3b2200;
    font-weight: 700;
    text-decoration: none;
}

.jrv a.jrp-plan-cta:hover {
    background: var(--jrv-amber-soft);
}

.jrv p.jrp-plan-note {
    margin: 10px 0 0;
    font-size: 13.5px;
    color: var(--jrv-grey);
    text-align: center;
}

@media (max-width: 900px) {
    .jrv .jrp-prices-grid {
        grid-template-columns: 1fr;
    }
}