/*
 * Strony porownawcze /vs/<konkurent>. Wyglad dziedziczony ze /pricing
 * (assets/styles/pricing-page.css), zeby caly serwis mial jeden jezyk wizualny:
 *
 *   granat   #1f2670   naglowki
 *   magenta  #bf3664   eyebrow, akcenty
 *   fiolet   #380552   liczby i ceny
 *   lawenda  #dcdef9   pasy grup i pigulki
 *   bursztyn #faa633   kolumna JustReview w tabeli (odpowiednik planu rekomendowanego)
 *   szary    #606060   tekst drugorzedny
 *   karta:   border-radius 14px, box-shadow 0 3px 23px rgba(0,0,0,.15)
 *
 * Tabela jest prawdziwym <table>, nie siatka divow. Powod jest dwojaki: dostepnosc
 * oraz to, ze Cloudflare "Markdown for Agents" konwertuje <table> na poprawna tabele
 * markdown, a divy gubi (zmierzone 2026-07-26 na cenniku: z divow zostawaly same
 * nazwy planow bez cen). Strona porownawcza bez czytelnej tabeli jest bezuzyteczna
 * dla asystentow AI, ktore sa tu wazna publicznoscia.
 */

:root {
  --jrv-navy: #1f2670;
  --jrv-magenta: #bf3664;
  --jrv-purple: #380552;
  --jrv-lavender: #dcdef9;
  --jrv-amber: #faa633;
  --jrv-amber-soft: #fde0b7;
  --jrv-grey: #606060;
  --jrv-line: #e9ebf5;
  --jrv-card: 0 3px 23px rgba(0, 0, 0, 0.15);
}

.jrv {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 20px 96px;
  color: #2b2f45;
  font-size: 17px;
  line-height: 1.65;
}

.jrv .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.jrv h2 {
  font-size: 32px; line-height: 1.22; font-weight: 700;
  color: var(--jrv-navy); margin: 0 0 14px;
}
.jrv h3 { font-size: 21px; font-weight: 700; color: var(--jrv-navy); margin: 26px 0 8px; }
.jrv p { margin: 0 0 16px; }
.jrv a { color: var(--jrv-magenta); }
.jrv strong { color: var(--jrv-navy); }

/* ---------- hero ---------- */

.jrv-hero { text-align: center; padding: 24px 0 40px; }

.jrv-eyebrow {
  text-transform: uppercase; letter-spacing: .18em; font-size: 13px; font-weight: 700;
  color: var(--jrv-magenta); margin-bottom: 10px;
}

.jrv-hero h1 {
  font-size: 48px; line-height: 1.14; font-weight: 700;
  color: var(--jrv-navy); margin: 0 0 18px;
}

.jrv-lead {
  font-size: 19px; line-height: 1.6; color: var(--jrv-grey);
  max-width: 760px; margin: 0 auto;
}

.jrv-pills {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; padding: 0; margin: 26px 0 0;
}
.jrv-pills li {
  background: var(--jrv-lavender); color: var(--jrv-navy);
  border-radius: 100px; padding: 7px 18px; font-size: 15px; font-weight: 700;
}

/* ---------- werdykt: dwie karty ---------- */

.jrv-verdict {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 8px 0 54px;
}
.jrv-verdict article {
  background: #fff; border-radius: 14px; box-shadow: var(--jrv-card);
  padding: 26px 26px 22px; border-top: 5px solid var(--jrv-line);
}
.jrv-verdict article.is-us { border-top-color: var(--jrv-amber); }
.jrv-verdict article.is-them { border-top-color: var(--jrv-navy); }
.jrv-verdict h2 { font-size: 22px; margin-bottom: 12px; }
.jrv-verdict ul { padding-left: 20px; margin: 0; }
.jrv-verdict li { margin-bottom: 9px; }

/* ---------- tabela porownawcza ---------- */

.jrv-table-section { margin: 0 0 56px; }
.jrv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 18px 4px 8px; }

table.jrv-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; }

table.jrv-table th, table.jrv-table td {
  padding: 13px 18px; vertical-align: top; text-align: left; font-size: 15.5px;
}

table.jrv-table tbody th[scope="row"] {
  font-weight: 400; color: #3d4155; position: sticky; left: 0;
  background: #fff; z-index: 2; min-width: 230px; border-bottom: 1px solid var(--jrv-line);
}

table.jrv-table thead th { text-align: left; }

th.jrv-col {
  position: relative; background: #fff; border-radius: 14px 14px 0 0;
  box-shadow: 0 -3px 23px rgba(0, 0, 0, .07); padding: 26px 18px 20px; min-width: 250px;
}
th.jrv-col.is-us { background: var(--jrv-amber-soft); }
th.jrv-col .jrv-col-name { display: block; font-size: 21px; font-weight: 700; color: var(--jrv-navy); }
th.jrv-col .jrv-col-note { display: block; font-size: 14px; color: var(--jrv-grey); margin-top: 4px; }

table.jrv-table td { border-bottom: 1px solid var(--jrv-line); background: #fff; }
table.jrv-table td.is-us { background: #fffaf2; font-weight: 700; color: var(--jrv-navy); }

table.jrv-table tr.jrv-group th {
  background: var(--jrv-lavender); color: var(--jrv-navy); font-weight: 700;
  font-size: 14px; text-transform: uppercase; letter-spacing: .08em; padding: 9px 18px;
}

.jrv-yes { color: #1f7a4d; font-weight: 700; }
.jrv-no { color: #9a2b45; }
.jrv-unknown { color: var(--jrv-grey); font-style: italic; }

.jrv-scroll-hint { text-align: center; font-size: 14px; color: var(--jrv-grey); margin: 4px 0 0; }

/* ---------- blok "jedna roznica" ---------- */

.jrv-key {
  background: linear-gradient(135deg, var(--jrv-navy), var(--jrv-magenta));
  color: #fff; border-radius: 14px; padding: 34px 34px 28px; margin: 0 0 54px;
}
.jrv-key h2 { color: #fff; }
.jrv-key p { color: rgba(255, 255, 255, .93); }
.jrv-key strong { color: #fff; }
.jrv-key .jrv-key-fig {
  display: flex; flex-wrap: wrap; gap: 26px; margin: 22px 0 0; padding: 0; list-style: none;
}
.jrv-key .jrv-key-fig li {
  background: rgba(255, 255, 255, .14); border-radius: 12px; padding: 14px 20px; min-width: 200px;
}
.jrv-key .jrv-key-fig b { display: block; font-size: 26px; line-height: 1.2; }

/* ---------- ceny obok siebie ---------- */

.jrv-prices { margin: 0 0 54px; }
.jrv-prices-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.jrv-prices article {
  background: #fff; border-radius: 14px; box-shadow: var(--jrv-card); padding: 24px 26px;
}
.jrv-prices h3 { margin-top: 0; }
.jrv-prices table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.jrv-prices th, .jrv-prices td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--jrv-line); }
.jrv-prices td.jrv-amount { font-weight: 700; color: var(--jrv-purple); white-space: nowrap; }

/* ---------- uczciwosc: gdzie sa lepsi ---------- */

.jrv-fair {
  border: 2px dashed var(--jrv-lavender); border-radius: 14px;
  padding: 26px 30px 20px; margin: 0 0 54px; background: #fcfcff;
}
.jrv-fair ul { padding-left: 20px; }
.jrv-fair li { margin-bottom: 9px; }

/* ---------- FAQ ---------- */

.jrv-faq { margin: 0 0 54px; }
.jrv-faq dl { margin: 0; }
.jrv-faq-item { border-bottom: 1px solid var(--jrv-line); padding: 18px 0; }
.jrv-faq dt { font-weight: 700; color: var(--jrv-navy); font-size: 17.5px; margin-bottom: 6px; }
.jrv-faq dd { margin: 0; color: #3d4155; }

/* ---------- zrodla ---------- */

.jrv-sources { margin: 0 0 54px; font-size: 15px; color: var(--jrv-grey); }
.jrv-sources h2 { font-size: 24px; }
.jrv-sources ul { padding-left: 20px; }
.jrv-sources li { margin-bottom: 8px; }
.jrv-sources code { background: #f4f5fa; border-radius: 4px; padding: 1px 5px; font-size: 14px; }

/* ---------- demo widgetu + CTA ---------- */

.jrv-demo { margin: 0 0 48px; padding-top: 8px; }
.jrv-demo h2 { text-align: center; }
.jrv-demo p.jrv-demo-hint { text-align: center; color: var(--jrv-grey); max-width: 640px; margin: 0 auto 26px; }

.jrv-final {
  text-align: center; background: #fff; border-radius: 14px;
  box-shadow: var(--jrv-card); padding: 40px 30px 34px;
}
.jrv-final h2 { margin-bottom: 8px; }
.jrv-cta {
  display: inline-block; background: var(--jrv-amber); color: #2b2f45; font-weight: 700;
  border-radius: 100px; padding: 15px 38px; font-size: 18px; text-decoration: none;
  box-shadow: 0 3px 14px rgba(250, 166, 51, .5);
}
.jrv-cta:hover { filter: brightness(1.06); text-decoration: none; color: #2b2f45; }
.jrv-final .jrv-note { font-size: 14.5px; color: var(--jrv-grey); margin: 14px 0 0; }

/* ---------- linki do innych porownan ---------- */

.jrv-others { margin: 48px 0 0; text-align: center; }
.jrv-others h2 { font-size: 22px; }
.jrv-others ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.jrv-others a {
  display: inline-block; background: #fff; border: 1px solid var(--jrv-line);
  border-radius: 100px; padding: 9px 20px; font-weight: 700; box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

/* ---------- naglowek strony ----------
 * To samo obejscie co w pricing-page.css i z tego samego powodu: globalny .header
 * ma min-height 690 px (zaprojektowany pod hero strony glownej), a nawigacja jest
 * w nim pozycjonowana absolutnie i sama ma wysokosc 0. Bez tej reguly nawigacja
 * wchodzi na H1, a wariant "light" logo jest bialy, wiec na jasnym tle znika.
 * 96 px to wysokosc samego paska nawigacji.
 */
.jr-header-slim { min-height: 96px !important; }
.jr-header-slim .navigation__logo--light { display: none !important; }
.jr-header-slim .navigation__logo--colorful { display: block !important; opacity: 1 !important; }
/* 🚨 Logo wychodzilo POD naglowek. `.navigation-default` z LP ma `padding-top: 40px`
   (zaprojektowane pod wysokie hero strony glownej), a slim header ma tylko 96 px.
   Logo ma 82 px, wiec 40 + 82 = 122 px i wystawalo 26 px ponizej belki, wchodzac na
   tresc. Zerujemy padding do 5 px, czyli tyle, ile LP ustawia w stanie po scrollu.
   Selektor ma wyzsza specyficznosc niz .navigation-default, wiec bez !important. */
.jr-header-slim .navigation { padding-top: 5px; }

/* 🚨 Logo jest `position: absolute` w rodzicu o wysokosci 0, ktory flexbox ustawia na
   LINII SRODKA belki. Czyli logo zawsze zwisa w dol od srodka: przy belce 66 px i logo
   82 px wystawalo 51 px pod belke, wprost na tresc. Na LP tego nie widac, bo pod belka
   jest ciemne hero strony glownej, ale na jasnej podstronie wyglada jak blad.
   Centrujemy je na tej linii (translateY) i ograniczamy do 52 px, zeby zmiescilo sie
   w belce (srodek 33 px, polowa logo 26 px, czyli 7-59 px). */
.jr-header-slim .navigation__logo {
  max-height: 52px; width: auto;
  transform: translateY(-50%);
}


@media (max-width: 900px) {
  .jrv-verdict, .jrv-prices-grid { grid-template-columns: 1fr; }
  .jrv-hero h1 { font-size: 34px; }
  .jrv h2 { font-size: 26px; }
  .jrv-key { padding: 26px 22px 20px; }
}