/* CyberRanking: strony rankingów (VPN, menedżery haseł, antymalware), kierunek 5a.
   Ładowany po site.css i shell.css: site.css daje szkielet układu, ten plik wygląd 5a. */

/* zmienne site.css -> paleta 5a (rankingi i kreator /pomoc) */
:root{--green:#1868B7;--green2:#1868B7;--green3:#124F8C;--sig:#1868B7;--shell:#F4F7FB;--warn:#8F5A00;--line:#E1E6EE;--muted:#4B5B71;--ink:#0D233F;--rad:8px;--blue:#1868B7}

/* kreator /pomoc */
.phead .eyebrow{display:none}
.phead h1 em,.phead h1 span[style]{font-style:normal;color:inherit!important}
.kscorecat{background:var(--wash);color:var(--ink);font-size:14px;font-weight:500;border-radius:var(--r1);text-transform:none;letter-spacing:0}
.kscorenum{font-family:var(--mono);font-weight:500;color:var(--ink)}
.kscoremark{background-image:none;padding:0;font-family:var(--mono);font-weight:500}
.kstepno,.keyebrow,.kscore .keyebrow,.kcat,.kbadge{text-transform:none!important;letter-spacing:0!important;font-size:14px!important;font-weight:600!important;color:var(--ink2)!important}
.kcard,.kpanel,.kresult,.kscore{border-radius:var(--r3);box-shadow:none}
.kopt{border-radius:var(--r2)}
.kopt.on{background:var(--wash)}
.kbtn{border-radius:var(--r2);font:500 16px var(--sans);min-height:48px;padding:0 22px}
.kbtn:hover:not([disabled]){background:var(--blue2);border-color:var(--blue2)}
.kbtn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--rule2)}
.klink{font-weight:500;color:var(--blue)}
.kprogress i{border-radius:2px}
.kscorepill{border-radius:var(--r1)}

/* ramka strony: bez starej karty i plam */
body{padding:0;background:var(--paper);font-size:17px}
.shell{max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;background:var(--paper)}
.shell .mesh{display:none}
.shell>.in{padding:0}
.shell>.in>:where(:not(header.top):not(footer.foot):not(.skip):not(#tresc):not(script)),.shell>.in>main>:where(:not(script)){max-width:var(--w);margin-left:auto;margin-right:auto;padding-left:var(--gut);padding-right:var(--gut);box-sizing:border-box}
.shell>.in>.urgent,.shell>.in>details.acc,.shell>.in>main>.urgent,.shell>.in>main>details.acc{max-width:min(calc(var(--w) - 2*var(--gut)),calc(100% - 2*var(--gut)));padding-left:18px;padding-right:18px}
.shell>.in>details.acc,.shell>.in>main>details.acc{padding-left:0;padding-right:0}
.sec img{border-radius:var(--r2)!important;border:1px solid var(--rule)!important}

/* pilna pomoc (antymalware): spokojna ramka, przyciski jak w całym serwisie */
.urgent{background:var(--wash);border:1px solid var(--rule);border-radius:var(--r2);padding:16px 18px;margin-top:0;margin-bottom:24px;gap:12px 16px}
.urgent .ic{fill:var(--down)}
.urgent-tx b{font-size:17px;font-weight:600}
.urgent-tx span{font-size:15px;color:var(--ink2)}
.urgent-btn{min-height:44px;padding:0 18px;border-radius:var(--r2);background:var(--blue);font:500 15px var(--sans);color:#fff}
.urgent-btn:hover{background:var(--blue2);color:#fff}
.urgent-btn.ghost{background:#fff;color:var(--ink);border:0;box-shadow:inset 0 0 0 1.5px var(--rule2)}
.urgent-btn.ghost:hover{color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue)}
.urgent .mark{flex-basis:100%;margin:0;text-align:right}

/* okruszki i nagłówek treści */
.crumb{padding-top:24px;font-size:14px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumb a{color:var(--ink2);text-decoration:none}
.crumb a:hover{color:var(--blue);text-decoration:underline}
.crumb .sep{color:var(--rule2)}
.phead{padding-top:28px;padding-bottom:32px}
.phead>*{max-width:860px}
.phead h1{font-size:clamp(34px,4.6vw,56px);line-height:1.06;font-weight:700;letter-spacing:-.04em;margin:0 0 16px;text-wrap:balance;color:var(--ink)}
.phead .lead{font-size:20px;line-height:1.5;color:var(--ink2);max-width:62ch;margin:0 0 14px}
.byline{gap:6px 10px;font-size:15px;color:var(--ink2)}
.byline b{font-weight:500;color:var(--ink)}
.byline .dot{background:var(--rule2);opacity:1}
.share-top a{color:var(--ink)!important;border-color:var(--rule2)!important;min-height:40px;display:inline-flex;align-items:center}
.share-top a:hover{border-color:var(--blue)!important;color:var(--blue)!important}

/* sekcje */
.sec{padding-top:56px;padding-bottom:0}
.sec-h{max-width:none;margin:0 0 18px}
.sec-h h2,.sec>h2{font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.2;color:var(--ink);border-bottom:1px solid var(--rule2);padding-bottom:10px;margin-bottom:12px}
.sec-h p{font-size:17px;color:var(--ink2);max-width:70ch}
.sec p,.sec li{color:var(--ink2)}
.sec p b,.sec li b,.sec strong{color:var(--ink);font-weight:500}

/* tabela porównania: ten sam wygląd co ranking na stronie głównej */
.tablewrap{border:0;border-radius:0;box-shadow:none;background:none;overflow:visible;margin-bottom:8px}
.tablewrap table{min-width:0;table-layout:auto;font-size:16px;border-collapse:collapse;width:100%}
.tablewrap thead th{font-size:14px;font-weight:500;color:var(--ink2);padding:14px 12px 8px;border-bottom:1px solid var(--rule2);vertical-align:bottom;white-space:nowrap;text-transform:none;letter-spacing:0;background:none}
.tablewrap tbody td,.tablewrap tbody th.cell-prod{padding:14px 12px;border-bottom:1px solid var(--rule);vertical-align:middle;font-weight:300}
.tablewrap tbody tr.top>*{background:var(--wash)}
.tablewrap thead th:nth-child(1),.tablewrap tbody td:nth-child(1){width:56px}
.chip{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--r2);background:var(--wash);color:var(--ink);font:500 19px var(--mono)}
tr.top .chip{background:var(--blue);color:#fff}
.prod-cell{gap:12px;font-weight:500;font-size:17px}
.prod-cell .lg{width:34px;height:34px;border:1px solid var(--rule);border-radius:var(--r2)}
.prod-cell a{color:var(--ink)}
.prod-cell a:hover{color:var(--blue);text-decoration:underline}
.prod-cell .role{font-size:14px;font-weight:300;color:var(--ink2);margin-top:2px}
.scorepill{background:none;padding:0;border-radius:0;font:500 22px var(--mono);color:var(--ink);letter-spacing:-.02em}
.scorepill .sd,.scorepill s{font:400 15px var(--mono);color:var(--ink2)}
.scorepill.none{font:400 16px var(--sans);color:var(--ink2);background:none}
.tablewrap td.metric{color:var(--ink);position:relative}
.tablewrap td.metric::after{content:"";position:absolute;left:0;top:28%;height:44%;width:1px;background:var(--rule2)}
.tablewrap tbody td.cell-cta{text-align:right;white-space:nowrap}
.tbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid var(--rule2);border-radius:var(--r2);background:#fff;color:var(--ink);font:500 15px var(--sans);text-decoration:none;white-space:nowrap}
.tbtn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--rule2)}
.tbtn:hover,.tbtn.ghost:hover{border-color:var(--blue);color:var(--blue)}
tr.top .tbtn{background:var(--blue);border-color:var(--blue);color:#fff}
tr.top .tbtn:hover{background:var(--blue2);border-color:var(--blue2);color:#fff}
tbody td.cell-cta .tbtn{width:auto;max-width:none}
.tbtn[href*="#zaufanie"],.tbtn[href*="#zaufanie"]:hover{background:none;border:0;padding:0;color:var(--flag);text-decoration:underline;text-underline-offset:.2em}
.mark{display:block;font-size:12px;color:var(--ink2);margin-top:4px;font-weight:300}
.tag-warn{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--amber);background:#fff;border:0;box-shadow:inset 0 0 0 1.5px var(--amber);border-radius:var(--r1);padding:1px 6px;line-height:1.5;margin-left:6px;cursor:pointer}
.tag-warn:hover{background:#fff;color:var(--ink)}
.tablewrap tr.grouprow td,.tablewrap tr.grouprow th{background:none;font-weight:600;color:var(--ink);font-size:17px;padding-top:28px;border-bottom:1px solid var(--rule2);text-align:left;text-transform:none;letter-spacing:0}

/* rozwijane: kryteria i FAQ */
details.acc{border:0;border-radius:0;border-bottom:1px solid var(--rule);background:none;margin:0;overflow:visible}
details.acc summary{padding:16px 0;font-size:17px;font-weight:500;color:var(--ink);min-height:44px}
details.acc summary:hover{color:var(--blue)}
details.acc summary .chev{color:var(--ink2)}
details.acc .abody{padding:0 0 18px;font-size:16px;color:var(--ink2);max-width:75ch}
details.acc .abody a{color:var(--blue);font-weight:400}
details.acc[open] .abody{animation:rise .32s var(--ease)}
.criteria li{font-size:16px;color:var(--ink);min-height:0;padding:12px 0}
.criteria li::before{width:32px;height:32px;border-radius:var(--r2);background:var(--wash);color:var(--ink);font:500 16px var(--mono)}
.criteria li b{font-weight:500}
.criteria .cw{background:none;color:var(--ink2);font:500 14px var(--mono);padding:0}

/* karty werdyktów */
.vcard{border:1px solid var(--rule);border-radius:var(--r3);padding:28px;box-shadow:none;background:#fff;gap:28px;margin-bottom:20px}
.vcard.top{border:1.5px solid var(--ink)}
.vcard .badge{top:-13px;left:24px;background:var(--blue);color:#fff;font-size:13px;font-weight:500;padding:3px 10px;border-radius:var(--r1)}
.vcard .badge svg{display:none}
.vleft{width:160px}
.scorebox .sv{font:500 44px/1 var(--mono);letter-spacing:-.03em;color:var(--ink)}
.scorebox .sm{font:400 18px var(--mono);color:var(--ink2)}
.score-cap{font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink2);margin-bottom:14px}
.vleft h3{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.vleft .role{font-size:14px;color:var(--ink2)}
.vmid .verdict{font-size:17px;line-height:1.55;color:var(--ink)}
.quickfacts{background:var(--wash);border:0;border-radius:var(--r2);padding:12px 16px}
.quickfacts .qfl{font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink2)}
.quickfacts .qfv{font-size:15px;font-weight:500;color:var(--ink)}
.pchead{font-size:14px;font-weight:500;color:var(--ink2)}
.pt{font-size:16px;color:var(--ink)}
.pt.pro{font-weight:400}
.pt.pro::before{color:var(--up)}
.pt.con{color:var(--ink2)}
.pcol.cons{border-left-color:var(--rule)}
.know{font-size:15px;color:var(--ink2);border-top-color:var(--rule)}
.know b{font-weight:500}
.know.wada b{color:var(--amber)}
.hardfacts{border-top-color:var(--rule)}
.hardfacts>summary{font-size:14px;font-weight:500;color:var(--ink);min-height:40px}
.hardfacts>summary::before{background:var(--blue)}
.hardfacts>summary::after{background:var(--ink2)}
.hardfacts dt,.hardfacts dd{font-size:14px}
.hardfacts dd{font-weight:400}
.hf-src{font-size:14px;color:var(--ink2)}
.hf-src a{color:var(--blue)}
.vright{width:200px}
.pbox{background:var(--wash)!important;border:0!important;border-radius:var(--r2)!important}
.pbox .pmain{font-family:var(--sans)!important;font-weight:600!important;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)!important}
.pbox .pmain small{font-weight:400;color:var(--ink2)}
.pbox dt,.pbox .pcoffee,.pbox .pdate{color:var(--ink2)!important}
.pbox dd{font-weight:500!important;color:var(--ink)!important}
.vbtn{min-height:48px;padding:0 18px;border-radius:var(--r2);background:var(--blue);font:500 16px var(--sans);color:#fff;margin-bottom:0}
.vbtn:hover{background:var(--blue2);color:#fff}
.vcard:not(.top) .vbtn{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rule2)}
.vcard:not(.top) .vbtn:hover{color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue)}
.vright .mark{margin:6px 0 10px}
.vtest{font-size:15px;color:var(--blue);font-weight:500;text-decoration:underline;text-underline-offset:.2em}
.vbtn.why,.vright a[href*="#zaufanie"]{color:var(--flag)}

/* kto czego potrzebuje */
.whom .wgrid{border-top:1px solid var(--rule2)}
.whom .wrow{border-bottom-color:var(--rule);padding:16px 0}
.whom .wq{font-size:17px;font-weight:500}
.whom .wa{font-size:16px;color:var(--ink2)}
.whom .wa b{color:var(--ink);font-weight:500}

/* jak powstaje ranking */
.jrank{display:grid;gap:0;margin-top:6px;border-top:1px solid var(--rule)}
.jstep{display:flex;gap:16px;align-items:flex-start;background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:16px 0}
.jnum{flex:0 0 auto;width:32px;height:32px;border-radius:var(--r2);background:var(--wash);color:var(--ink);font:500 16px var(--mono);display:flex;align-items:center;justify-content:center}
.jstep h3{font-size:17px;font-weight:500;margin:4px 0 2px;color:var(--ink)}
.jstep p{font-size:16px;color:var(--ink2);margin:0}
.jbadge{display:flex;gap:12px;align-items:center;margin-top:20px;background:var(--wash);border:0;border-radius:var(--r2);padding:14px 18px;font-size:16px;color:var(--ink)}
.jbadge b{color:var(--ink);font-weight:500}
.jbadge svg{flex:0 0 auto;width:24px;height:24px;color:var(--blue);fill:var(--blue)}
@media(min-width:720px){.jrank{grid-template-columns:1fr 1fr;column-gap:40px}}

@keyframes rise{from{opacity:.001;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* telefon: wiersze tabeli jako karty, jak na stronie głównej */
@media(max-width:820px){
  body{font-size:16px}
  .phead .lead{font-size:18px}
  .tablewrap thead{display:none}
  .tablewrap table,.tablewrap tbody{display:block}
  .tablewrap tbody tr{display:grid;grid-template-columns:40px repeat(3,minmax(0,1fr));column-gap:12px;row-gap:10px;padding:16px var(--gut);margin:0 calc(-1*var(--gut));border:0;border-bottom:1px solid var(--rule);border-radius:0;box-shadow:none;background:none}
  .tablewrap tbody tr.top{background:var(--wash);border-color:var(--rule)}
  .tablewrap tbody tr.top>*{background:none}
  .tablewrap tbody td,.tablewrap tbody th.cell-prod{display:block;padding:0;border:0;text-align:left;margin:0}
  .tablewrap tbody td::before{content:none}
  .tablewrap tbody td.cell-rank{grid-column:1;grid-row:1;padding:0;font:inherit;text-transform:none;letter-spacing:0}
  .tablewrap tbody td.cell-rank::after{content:none}
  .tablewrap tbody th.cell-prod{grid-column:2/4;grid-row:1}
  .tablewrap tbody td:nth-child(3){grid-column:4;grid-row:1;text-align:right}
  .tablewrap tbody td.metric{grid-row:2;font-size:15px}
  .tablewrap tbody td.metric::after{content:none}
  .tablewrap tbody td.metric::before{content:attr(data-label);display:block;font-size:13px;color:var(--ink2);line-height:1.3;font-weight:300}
  .tablewrap tbody td.metric+td.metric{border-left:1px solid var(--rule2);padding-left:12px}
  .tablewrap tbody td:nth-child(4){grid-column:2}
  .tablewrap tbody td:nth-child(5){grid-column:3}
  .tablewrap tbody td:nth-child(6){grid-column:4}
  .tablewrap tbody td.cell-cta{grid-column:2/5;grid-row:3;text-align:left;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0}
  .tablewrap tbody td.cell-cta .mark{display:inline;margin:0}
  .prod-cell{align-items:flex-start;font-size:17px}
  .tablewrap tbody tr.grouprow{display:block;padding:24px 0 8px;margin:0;background:none;border-bottom:1px solid var(--rule2)}
  .tablewrap tbody tr.grouprow td,.tablewrap tbody tr.grouprow th{width:auto;display:block;padding:0;border:0}
  .tablewrap tbody td.metric:nth-child(3){display:none}
  .tablewrap tbody td.metric:nth-child(3)+td.metric{border-left:0;padding-left:0}
  .vcard{padding:22px 18px}
  .vleft,.vright{width:auto}
}
.pbox .pdate{opacity:1!important}
.sources-box{opacity:1!important}
.sources-box a{color:var(--blue)!important;text-decoration:underline}
.prod-cell .lg-mono{display:inline-flex;align-items:center;justify-content:center;flex:none;font-weight:600;font-size:15px;color:var(--ink2)}