/* ── Planerto vs zwykły sklep online — strona porównawcza ───────────────
   Wszystkie klasy prefiksowane .pvs- aby nie kolidować z komponentami motywu.
   Reużywa: globalnej siatki w tle (body::before z main.css), fontów oraz
   komponentu .final-cta (końcowe CTA). ──────────────────────────────── */

.pvs-page{
  --brand:#2A6B4F; --brand-hover:#1e4d37; --brand-soft:#EAF4EE; --brand-tint:#f4faf6;
  --text:#111111; --text-light:#6b7280;
  --border:#e7ece9; --border-strong:#dbe3de; --bg-subtle:#f7faf8;
  --no:#c0392b; --no-soft:#fbebe9; --soon:#a86400; --soon-soft:#fbf1de;
  --pvs-maxw:1400px;
}
.pvs-wrap{ max-width:var(--pvs-maxw); margin:0 auto; padding:0 32px; }

/* ── HERO ─────────────────────────────────────────── */
.pvs-hero{
  position:relative; z-index:1; padding:80px 0 84px; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(42,107,79,.10), transparent 60%),
    radial-gradient(760px 480px at 8% 12%, rgba(42,107,79,.06), transparent 55%);
  border-bottom:1px solid var(--border);
}
.pvs-hero-grid{ position:relative; display:grid; grid-template-columns:0.98fr 1.4fr; gap:48px; align-items:center; }
.pvs-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-eyebrow, 13px); font-weight:600; color:var(--brand); background:#fff; border:1px solid var(--border-strong); padding:7px 14px; border-radius: var(--chip-radius); margin-bottom:24px; }
.pvs-eyebrow b{ color:var(--text); }
.pvs-hero h1{ font-family:var(--font-heading); font-size:var(--fs-hero, clamp(2.1rem, 4.1vw, 3.2rem)); font-weight:var(--fw-heading); letter-spacing:var(--ls-heading); line-height:1.12; margin:0 0 22px; color:var(--text); }
.pvs-hero h1 em{ font-style:normal; color:var(--brand); }
.pvs-hero-lead{ font-size:19px; color:var(--text-muted); max-width:540px; margin:0 0 16px; line-height:1.55; }
.pvs-hero-desc{ font-size:16px; color:var(--text-light); max-width:520px; margin:0 0 32px; line-height:1.55; }
.pvs-hero-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.pvs-cta-note{ font-size:13.5px; color:var(--text-light); margin-top:16px; display:flex; align-items:center; gap:8px; }
.pvs-cta-note::before{ content:"✓"; color:var(--brand); font-weight:700; }

/* ── Ramka zrzutu ─────────────────────────────────── */
.pvs-shot-wrap{ position:relative; }
.pvs-shot{ position:relative; z-index:1; border-radius: 12px; background:#fff; overflow:hidden; border:1px solid var(--border); }
.pvs-shot-img{ width:100%; height:auto; display:block; }
/* Zrzuty w sekcjach funkcji: staly format jak placeholdery (spojna wielkosc) */
.pvs-feat .pvs-shot-img{ aspect-ratio:16 / 9.6; object-fit:cover; object-position:top center; }
.pvs-hero .pvs-shot-img{ aspect-ratio:20 / 9; object-fit:cover; object-position:left top; }
.pvs-ph{ aspect-ratio:16 / 9.6; background:linear-gradient(135deg,#f3f8f5,#eaf3ee 55%,#e3efe8); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--brand); text-align:center; padding:24px; }
.pvs-ph .pvs-ico{ width:46px; height:46px; border-radius: var(--chip-radius); background:#fff; display:grid; place-items:center; font-size:20px; }
.pvs-ph .pvs-t{ font-family:var(--font-heading); font-weight:600; font-size:15px; }
.pvs-ph .pvs-s{ font-size:12.5px; color:var(--text-light); max-width:290px; }

/* ── Nagłówki sekcji ──────────────────────────────── */
.pvs-sec-head{ max-width:700px; margin:0 auto 56px; text-align:center; }
.pvs-sec-head h2{ font-family:var(--font-heading); font-size:var(--fs-section, clamp(1.7rem, 2.7vw, 2.3rem)); font-weight:500; letter-spacing:-.04em; margin:0 0 16px; color:var(--text); line-height:1.14; }
.pvs-sec-head p{ font-size:18px; color:var(--text-muted); margin:0; }

/* ── Sekcja „granica" ─────────────────────────────── */
.pvs-gap{ position:relative; z-index:1; padding:84px 0; background:linear-gradient(180deg,#0e1512,#12201a); color:#fff; }
.pvs-gap .pvs-sec-head h2{ color:#fff; }
.pvs-gap .pvs-sec-head p{ color:rgba(255,255,255,.7); }
.pvs-flow{ display:grid; grid-template-columns:1fr 1fr; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius: 12px; overflow:hidden; }
.pvs-flow-col{ padding:26px 28px; }
.pvs-flow-shop{ border-right:1px dashed rgba(255,255,255,.22); }
.pvs-flow-plan{ background:linear-gradient(180deg, rgba(42,107,79,.22), rgba(42,107,79,.08)); }
.pvs-flow-lab{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; margin-bottom:16px; }
.pvs-flow-shop .pvs-flow-lab{ color:rgba(255,255,255,.55); }
.pvs-flow-plan .pvs-flow-lab{ color:#7fd0a6; }
.pvs-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.pvs-chip{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; padding:9px 14px; border-radius: var(--chip-radius); white-space:nowrap; }
.pvs-chip-neutral{ background:rgba(255,255,255,.08); color:#fff; }
.pvs-chip-plan{ background:rgba(127,208,166,.14); color:#d7f3e4; border:1px solid rgba(127,208,166,.3); }
.pvs-chip .pvs-d{ width:6px; height:6px; border-radius:50%; flex:none; }
.pvs-chip-neutral .pvs-d{ background:rgba(255,255,255,.4); }
.pvs-chip-plan .pvs-d{ background:#7fd0a6; }

/* ── Trzy powody ──────────────────────────────────── */
.pvs-reasons{ position:relative; z-index:1; padding:84px 0; border-bottom:1px solid var(--border); }
.pvs-reasons-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pvs-reason{ background:#fff; border:1px solid var(--border); border-radius: var(--card-radius); padding:32px 28px; }
.pvs-reason-ic{ width:44px; height:44px; border-radius: var(--chip-radius); background:var(--no-soft); color:var(--no); display:grid; place-items:center; margin-bottom:20px; }
.pvs-reason h3{ font-family:var(--font-heading); font-size:19px; font-weight:500; margin:0 0 11px; letter-spacing:-.02em; color:var(--text); }
.pvs-reason p{ font-size:15px; color:var(--text-muted); margin:0; }

/* ── Sekcje funkcji ───────────────────────────────── */
.pvs-feats{ position:relative; z-index:1; padding:44px 0 24px; }
.pvs-feat{ display:grid; grid-template-columns:1fr 1.12fr; gap:72px; align-items:center; padding:56px 0; }
.pvs-feat:nth-child(even){ direction:rtl; }
.pvs-feat:nth-child(even) > *{ direction:ltr; }
.pvs-feat-copy{ max-width:450px; }
.pvs-feat-tag{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--brand); background:var(--brand-soft); padding:6px 13px; border-radius: var(--chip-radius); margin-bottom:18px; }
.pvs-feat-tag.pvs-soon{ color:var(--soon); background:var(--soon-soft); }
.pvs-feat h3{ font-family:var(--font-heading); font-size:var(--fs-subhead, clamp(1.5rem, 2.1vw, 1.9rem)); font-weight:500; letter-spacing:-.03em; margin:0 0 14px; color:var(--text); line-height:1.14; }
.pvs-feat p{ font-size:16px; color:var(--text-muted); margin:0; line-height:1.55; }
.pvs-feat p .pvs-vs{ color:var(--text); font-weight:600; }

/* ── Tabela ───────────────────────────────────────── */
.pvs-table-sec{ position:relative; z-index:1; padding:84px 0; border-top:1px solid var(--border); }
.pvs-ctable-shell{ background:#fff; border:1px solid var(--border); border-radius: var(--card-radius); overflow-x:auto; }
.pvs-ctable{ width:100%; min-width:520px; border-collapse:separate; border-spacing:0; }
.pvs-ctable th,.pvs-ctable td{ padding:16px 26px; text-align:left; font-size:15px; border-bottom:1px solid var(--border); }
.pvs-ctable thead th{ background:#fff; font-family:var(--font-heading); font-size:15.5px; font-weight:600; padding-top:22px; padding-bottom:22px; }
.pvs-ctable thead th:nth-child(2),.pvs-ctable thead th:nth-child(3){ text-align:center; width:210px; }
.pvs-ctable thead th:nth-child(2){ color:var(--brand); }
.pvs-ctable td:nth-child(2),.pvs-ctable td:nth-child(3){ text-align:center; }
.pvs-ctable tbody td:nth-child(2){ background:var(--brand-tint); }
.pvs-ctable tbody tr:hover td{ background:#eef7f1; }
.pvs-ctable tbody tr.pvs-cat td,.pvs-ctable tbody tr.pvs-cat:hover td{ background:var(--bg-subtle); }
.pvs-cat td{ font-family:var(--font-heading); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); padding-top:13px; padding-bottom:13px; }
.pvs-ctable tr:last-child td{ border-bottom:0; }
.pvs-mark{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; font-weight:700; font-size:13px; }
.pvs-mark-yes{ background:var(--brand); color:#fff; }
.pvs-mark-no{ background:var(--no-soft); color:var(--no); }
.pvs-mark-soon{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--soon); background:var(--soon-soft); padding:5px 11px; border-radius: var(--chip-radius); }
.pvs-th-logo{ display:inline-flex; align-items:center; justify-content:center; }
.pvs-th-logo svg{ height:22px; width:auto; display:block; }

/* ── Hero: duży zrzut rozlany do prawej krawędzi (desktop, jak ClickUp) ── */
@media (min-width:921px){
  .pvs-hero{ padding:72px 0 76px; }
  .pvs-hero .pvs-hero-grid{
    max-width:none; margin:0;
    padding:0 0 0 max(32px, calc((100vw - 1400px) / 2 + 32px));
    grid-template-columns:minmax(0, 560px) 1fr;
    gap:64px;
  }
  .pvs-hero .pvs-shot{ border-top-right-radius:0; border-bottom-right-radius:0; }
}

/* ── Responsywność ────────────────────────────────── */
@media (max-width:920px){
  .pvs-hero{ padding:56px 0 52px; }
  .pvs-hero-grid,.pvs-feat,.pvs-reasons-grid{ grid-template-columns:1fr; gap:36px; }
  .pvs-feat:nth-child(even){ direction:ltr; }
  .pvs-reasons-grid{ gap:18px; }
  .pvs-gap,.pvs-reasons,.pvs-table-sec{ padding:56px 0; }
  .pvs-flow{ grid-template-columns:1fr; }
  .pvs-flow-shop{ border-right:0; border-bottom:1px dashed rgba(255,255,255,.22); }
  .pvs-ctable th,.pvs-ctable td{ padding:13px 15px; font-size:13.5px; }
  .pvs-ctable thead th:nth-child(2),.pvs-ctable thead th:nth-child(3){ width:auto; }
}
@media (max-width:560px){
  .pvs-chips{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .pvs-chip{ white-space:normal; justify-content:flex-start; font-size:12.5px; padding:8px 11px; }
}