/* Wspólne style podstron treściowych (kalkulatory, huby).
   Istniejące strony prawne mają własny <style> inline i celowo ich nie
   ruszamy — tu chodzi o to, żeby 10 nowych stron nie powielało tego samego
   CSS-a dziesięć razy (jeden plik = jedno pobranie, potem cache). Paleta
   i typografia identyczne jak na /privacy i landingu. */
:root{--cream:#F6F3EC; --ink:#1C2733; --muted:#5C6670; --gold:#C7A24A;
  --line:#E3DCCD; --panel:#fff; --panel-alt:#FBF9F3;}
*{box-sizing:border-box; margin:0; padding:0}
body{font-family:'Jost',system-ui,sans-serif; background:var(--cream);
  color:var(--ink); font-weight:300; line-height:1.7;}

header{display:flex; justify-content:space-between; align-items:center;
  max-width:800px; margin:0 auto; padding:1.25rem;}
.brand{font-size:1.25rem; letter-spacing:.04em; text-decoration:none; color:var(--ink)}
.brand b{color:var(--gold); font-weight:500}
.lang{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--gold);
  font-size:.9rem; letter-spacing:.06em}

main{max-width:800px; margin:0 auto; padding:0 1.25rem 3rem}
h1{font-size:1.65rem; font-weight:400; margin:.75rem 0 .5rem; line-height:1.35}
h2{font-size:1.1rem; font-weight:500; margin:2rem 0 .5rem}
h3{font-size:1rem; font-weight:500; margin:1.4rem 0 .35rem}
p,li{font-size:.98rem}
li{margin:.3rem 0}
ol,ul{padding-left:1.35rem}
.lead{color:var(--muted); margin-bottom:1.25rem}
a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--gold)}
strong{font-weight:500}

/* Okruszki — także dane strukturalne BreadcrumbList w JSON-LD strony. */
.crumbs{font-size:.85rem; color:var(--muted); margin:.25rem 0 .75rem}
.crumbs a{border-bottom:none; color:var(--muted)}
.crumbs a:hover{border-bottom:1px solid var(--gold)}

/* --- Kalkulator --- */
.calc{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:1.25rem; margin:1.25rem 0}
.fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.9rem}
.field{display:flex; flex-direction:column; gap:.3rem}
.field label{font-size:.87rem; color:var(--muted)}
.field input,.field select{font-family:inherit; font-size:1rem; font-weight:300;
  color:var(--ink); background:var(--cream); border:1px solid var(--line);
  border-radius:10px; padding:.55rem .7rem; width:100%}
.field input:focus,.field select:focus{outline:2px solid var(--gold); outline-offset:1px}
.field .hint{font-size:.78rem; color:var(--muted)}
.check{display:flex; align-items:center; gap:.5rem; margin-top:.9rem; font-size:.9rem;
  color:var(--muted)}
.check input{width:auto}

.result{margin-top:1.1rem; border-top:1px solid var(--line); padding-top:.9rem}
.result .row{display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; padding:.35rem 0}
.result .row dt{color:var(--muted); font-size:.92rem}
.result .row dd{font-weight:500; font-size:1.02rem; white-space:nowrap}
.result .row.main dd{font-size:1.35rem; color:var(--gold)}
.result output{font-variant-numeric:tabular-nums}
.note{font-size:.82rem; color:var(--muted); margin-top:.7rem}
.warn{font-size:.85rem; color:#8A5A1E; background:#FBF1DC; border:1px solid #EBD7AC;
  border-radius:10px; padding:.5rem .7rem; margin-top:.7rem}
.warn[hidden]{display:none}

/* --- CTA do aplikacji --- */
.cta-box{background:var(--panel-alt); border:1px solid var(--line); border-radius:16px;
  padding:1.1rem 1.25rem; margin:1.75rem 0}
.cta-box p{margin-bottom:.8rem}
.stores{display:flex; flex-wrap:wrap; gap:.6rem}
.cta{display:inline-flex; align-items:center; gap:.5rem; background:var(--ink); color:#fff;
  text-decoration:none; border:none; padding:.6rem 1.2rem; border-radius:999px;
  font-size:.92rem; transition:opacity .15s}
.cta:hover{opacity:.88}
.cta svg{width:16px; height:16px; fill:#fff}

table{border-collapse:collapse; width:100%; margin:.75rem 0; background:var(--panel)}
th,td{border:1px solid var(--line); padding:.5rem .7rem; font-size:.92rem;
  text-align:left; vertical-align:top}
th{background:var(--panel-alt); font-weight:500}
/* Szeroka tabela nie może rozjeżdżać strony na telefonie. */
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* Lista odnośników do pozostałych kalkulatorów (linkowanie wewnętrzne). */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.8rem; margin:1rem 0; padding:0; list-style:none}
.tiles li{margin:0}
.tiles a{display:block; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:.85rem 1rem; border-bottom:1px solid var(--line);
  height:100%}
.tiles a:hover{border-color:var(--gold)}
.tiles .t{display:block; font-weight:500; font-size:.98rem}
.tiles .d{display:block; color:var(--muted); font-size:.85rem}

footer{max-width:800px; margin:0 auto; padding:1.5rem 1.25rem 2.5rem;
  font-size:.85rem; color:var(--muted); text-align:center}
footer a{color:var(--muted)}