/*
 * Wygląd dokumentów prawnych.
 *
 * Osobny arkusz, a nie styl wpisany w każdą stronę: te trzy dokumenty
 * zmieniają się razem i mają wyglądać identycznie. Rozjazd między
 * regulaminem a polityką prywatności czyta się jak dwa dokumenty z dwóch
 * różnych firm.
 *
 * Dokument prawny czyta się długo i zwykle wtedy, gdy coś poszło nie tak,
 * więc liczy się jedno: żeby dało się go przeczytać. Stąd wąska kolumna,
 * duża interlinia i numeracja, po której da się wskazać konkretny punkt
 * w rozmowie z klientem.
 */

@font-face{font-family:Inter;src:url(/assets/inter-latin-ext.woff2) format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;src:url(/assets/inter-latin.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Fraunces;src:url(/assets/fraunces-latin-ext.woff2) format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Fraunces;src:url(/assets/fraunces-latin.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{
  --papier:#FAF7F1; --karta:#FFFDF9;
  --atrament:#0B0E14; --ink2:#3C4553; --ink3:#7C8598;
  --linia:#E7E0D2; --linia2:#D8CFBD;
  --marka:#0F766E; --marka-tlo:#E4F1EE;
  --r:12px;
}
*{box-sizing:border-box}
body{
  margin:0; padding:0 22px 90px;
  background:var(--papier); color:var(--atrament);
  font:16px/1.68 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
main{max-width:720px; margin:0 auto}

.gora{display:flex; align-items:center; gap:10px; padding:28px 0 34px}
.gora img{width:30px; height:30px}
.gora a{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.gora b{font-family:Fraunces,Georgia,serif; font-weight:600; font-size:19px; letter-spacing:-.01em}

h1{font-family:Fraunces,Georgia,serif; font-size:31px; font-weight:600; letter-spacing:-.02em; margin:0 0 6px; line-height:1.2}
.data{color:var(--ink3); font-size:14px; margin:0 0 34px}

h2{
  font-family:Fraunces,Georgia,serif; font-size:20px; font-weight:600; letter-spacing:-.01em;
  margin:44px 0 12px; padding-top:22px; border-top:1px solid var(--linia);
}
h3{font-size:16px; font-weight:640; margin:26px 0 8px}
p{margin:0 0 14px; color:var(--ink2)}
strong{color:var(--atrament); font-weight:640}

ol{counter-reset:pkt; list-style:none; padding:0; margin:0 0 14px}
ol > li{counter-increment:pkt; position:relative; padding:0 0 12px 34px; color:var(--ink2)}
ol > li::before{
  content:counter(pkt) "."; position:absolute; left:0; top:0;
  color:var(--ink3); font-variant-numeric:tabular-nums; font-size:14px; padding-top:2px;
}
ul{padding:0 0 0 20px; margin:0 0 14px}
ul li{margin-bottom:8px; color:var(--ink2)}

/* Rzecz, którą klient ma zauważyć, nawet czytając po przekątnej. */
.wazne{
  background:var(--marka-tlo); border:1px solid #BFE0DA; border-radius:var(--r);
  padding:16px 18px; margin:0 0 18px;
}
.wazne p:last-child{margin-bottom:0}
.wazne strong{color:var(--marka)}

table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:15px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--linia); vertical-align:top; color:var(--ink2)}
th{font-weight:640; color:var(--atrament); background:var(--karta)}
td:first-child{white-space:nowrap; font-weight:560; color:var(--atrament)}

a{color:var(--marka)}
.stopka{margin-top:52px; padding-top:22px; border-top:1px solid var(--linia); color:var(--ink3); font-size:14px}
.stopka a{margin-right:16px}

@media (max-width:560px){
  h1{font-size:26px}
  table{font-size:14px}
  td:first-child{white-space:normal}
}