/* ============================================================
   LEPS™ — system projektowy sklepu
   Tokeny zgodne z brand bookiem v1.0 (10.08.2026)
   ============================================================ */

@font-face { font-family:"LEPS Display"; src:url("../fonts/Archivo-Display.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"LEPS Body";    src:url("../fonts/Archivo-Body.woff2")    format("woff2"); font-display:swap; }
@font-face { font-family:"LEPS Medium";  src:url("../fonts/Archivo-Medium.woff2")  format("woff2"); font-display:swap; }

:root {
  /* kolor */
  --paper:#FFFFFF;
  --ink:#0A0A0A;
  --signal:#1F4DFF;
  --signal-dark:#1339CC;
  --signal-soft:#EEF1FF;
  --mist:#F4F5F7;
  --line:#DCDEE3;
  --muted:#6E7480;
  --ok:#0F7B4F;
  --danger:#C1121F;

  /* typografia */
  --display:"LEPS Display", system-ui, sans-serif;
  --body:"LEPS Body", system-ui, sans-serif;
  --ui:"LEPS Medium", system-ui, sans-serif;

  /* rytm */
  --gutter:32px;
  --max:1240px;
  --sec:clamp(56px, 8vw, 104px);
  --radius:0;
  --header-h:64px;
}

*, *::before, *::after { box-sizing:border-box; }

html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img, svg, video { display:block; max-width:100%; height:auto; }

/* ---------- typografia ---------- */
h1, h2, h3, h4 { font-family:var(--display); font-weight:400; text-transform:uppercase;
  letter-spacing:0; margin:0; text-wrap:balance; }
h1 { font-size:clamp(38px, 7.2vw, 80px); line-height:1.02; }
h2 { font-size:clamp(28px, 4.4vw, 44px); line-height:1.05; }
h3 { font-size:clamp(21px, 2.6vw, 28px); line-height:1.14; }
h4 { font-size:clamp(17px, 1.8vw, 20px); line-height:1.24; }
p  { margin:0; max-width:66ch; }
.lead { font-size:clamp(17px, 2vw, 20px); line-height:1.52; }
.small { font-size:13px; line-height:1.55; color:var(--muted); }
.eyebrow { font-family:var(--ui); font-size:11px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--muted); }
strong, b { font-family:var(--ui); font-weight:400; }
.num { font-variant-numeric:tabular-nums; }

a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a.plain { text-decoration:none; }
a.plain:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--signal); outline-offset:3px; }

/* ---------- układ ---------- */
.wrap { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.section { padding:var(--sec) 0; border-bottom:1px solid var(--line); }
.section--flush { padding:0; border-bottom:0; }
.stack   { display:flex; flex-direction:column; gap:26px; }
.stack-s { display:flex; flex-direction:column; gap:14px; }
.stack-l { display:flex; flex-direction:column; gap:44px; }
.cols-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:44px; }
.cols-3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); }
.cols-3 > * { background:var(--paper); padding:30px 26px 34px; }

/* ---------- nagłówek strony ---------- */
.header { position:sticky; top:0; z-index:60; background:var(--paper);
  border-bottom:1px solid var(--line); }
.header__in { max-width:var(--max); margin:0 auto; padding:0 var(--gutter);
  height:var(--header-h); display:flex; align-items:center; gap:28px; }
.header__logo { display:flex; align-items:center; text-decoration:none; flex:none; }
.header__logo svg, .header__logo img { width:104px; }
.header__nav { display:flex; gap:24px; margin-left:auto; }
.header__nav a { font-family:var(--ui); font-size:13px; text-decoration:none; }
.header__nav a:hover { color:var(--signal); }
.header__cta { flex:none; }

.announce { background:var(--ink); color:var(--paper); text-align:center;
  font-family:var(--ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:9px 16px; }
.announce a { color:var(--paper); }

/* ---------- przyciski ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ui); font-size:14px; letter-spacing:.02em; line-height:1;
  padding:16px 26px; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  border-radius:var(--radius); cursor:pointer; text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease; }
.btn:hover { background:var(--signal); border-color:var(--signal); }
.btn--ghost { background:transparent; color:var(--ink); }
.btn--ghost:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--signal { background:var(--signal); border-color:var(--signal); }
.btn--signal:hover { background:var(--signal-dark); border-color:var(--signal-dark); }
.btn--full { width:100%; }
.btn--sm { padding:11px 18px; font-size:13px; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }

/* ---------- hero ---------- */
.hero { position:relative; background:var(--ink); color:var(--paper); overflow:hidden; }
.hero__media { position:absolute; inset:0; }
.hero__media img { width:100%; height:100%; object-fit:cover; opacity:.55; }
.hero__in { position:relative; max-width:var(--max); margin:0 auto;
  padding:clamp(72px,12vw,148px) var(--gutter) clamp(56px,9vw,110px); }
.hero__grid { display:grid; gap:34px; max-width:62ch; }
.hero h1 { color:var(--paper); }
.hero .lead { color:#D8DBE0; max-width:48ch; }
.hero__actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero .btn--ghost { color:var(--paper); border-color:var(--paper); }
.hero .btn--ghost:hover { background:var(--paper); color:var(--ink); }
.hero__note { font-family:var(--ui); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:#9AA0A9; display:flex; flex-wrap:wrap; gap:6px 18px; }
.hero__note span { white-space:nowrap; }

/* ---------- pasek sloganów ---------- */
.marquee { background:var(--ink); color:var(--paper); overflow:hidden; padding:15px 0;
  border-top:1px solid var(--ink); }
.marquee__track { display:flex; gap:44px; white-space:nowrap; width:max-content;
  animation:slide 34s linear infinite; }
.marquee span { font-family:var(--display); font-size:14px; text-transform:uppercase;
  letter-spacing:.04em; }
.marquee span::after { content:"·"; margin-left:44px; color:var(--signal); }
@keyframes slide { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .marquee__track { animation:none; } }

/* ---------- karta produktu na liście ---------- */
.pcard { display:grid; gap:0; border:1px solid var(--line); text-decoration:none; }
.pcard__media { background:var(--mist); aspect-ratio:4/5; display:grid; place-items:center;
  overflow:hidden; }
.pcard__media img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.pcard:hover .pcard__media img { transform:scale(1.03); }
.pcard__body { padding:22px 24px 26px; display:grid; gap:8px; }
.pcard__name { font-family:var(--display); text-transform:uppercase; font-size:20px; }
.pcard__price { font-family:var(--ui); font-size:16px; }
.pcard__desc { font-size:14px; color:var(--muted); }

/* ---------- galeria produktu ---------- */
.gallery { display:grid; gap:10px; }
.gallery__main { background:var(--mist); aspect-ratio:4/5; overflow:hidden; }
.gallery__main img { width:100%; height:100%; object-fit:cover; }
.gallery__thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.gallery__thumbs button { padding:0; border:1px solid var(--line); background:var(--mist);
  aspect-ratio:1; cursor:pointer; overflow:hidden; }
.gallery__thumbs button[aria-current="true"] { border-color:var(--ink); }
.gallery__thumbs img { width:100%; height:100%; object-fit:cover; }

/* ---------- wybór zakupu (PDP) ---------- */
.buybox { display:grid; gap:20px; }
.spec { font-family:var(--ui); font-size:13px; color:var(--muted);
  padding-bottom:14px; border-bottom:1px solid var(--line); }
.price { font-family:var(--display); font-size:34px; text-transform:uppercase; }

.plans { display:grid; gap:10px; }
.plan { display:block; border:1px solid var(--line); padding:18px 20px; cursor:pointer;
  position:relative; transition:border-color .15s ease, background .15s ease; }
.plan:hover { border-color:var(--ink); }
.plan input { position:absolute; opacity:0; pointer-events:none; }
.plan__row { display:flex; align-items:baseline; gap:12px; justify-content:space-between; }
.plan__name { font-family:var(--ui); font-size:15px; }
.plan__price { font-family:var(--ui); font-size:16px; white-space:nowrap; }
.plan__note { font-size:13px; color:var(--muted); margin-top:6px; }
.plan__tag { display:inline-block; font-family:var(--ui); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; background:var(--signal); color:var(--paper); padding:3px 8px;
  margin-bottom:10px; }
.plan:has(input:checked) { border-color:var(--ink); background:var(--mist); box-shadow:inset 0 0 0 1px var(--ink); }
.plan:has(input:focus-visible) { outline:2px solid var(--signal); outline-offset:2px; }

.freq { display:flex; flex-wrap:wrap; gap:8px; }
.freq label { position:relative; }
.freq input { position:absolute; opacity:0; pointer-events:none; }
.freq span { display:inline-block; border:1px solid var(--line); padding:9px 14px;
  font-family:var(--ui); font-size:13px; cursor:pointer; }
.freq input:checked + span { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.freq input:focus-visible + span { outline:2px solid var(--signal); outline-offset:2px; }

.bullets { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.bullets li { display:grid; grid-template-columns:16px 1fr; gap:11px; font-size:14px;
  align-items:start; }
.bullets li::before { content:""; width:7px; height:7px; background:var(--signal); margin-top:8px; }

/* ---------- drabinka nagród ---------- */
.ladder { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); }
.ladder div { background:var(--paper); padding:16px 12px; text-align:center; }
.ladder .n { font-family:var(--display); font-size:19px; }
.ladder .t { font-size:12px; color:var(--muted); line-height:1.35; margin-top:6px; }

/* ---------- akordeon ---------- */
.acc { border-top:1px solid var(--line); }
.acc details { border-bottom:1px solid var(--line); }
.acc summary { list-style:none; cursor:pointer; padding:19px 0; display:flex;
  justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--ui); font-size:15px; }
.acc summary::-webkit-details-marker { display:none; }
.acc summary::after { content:"+"; font-family:var(--display); font-size:19px; color:var(--muted); }
.acc details[open] summary::after { content:"–"; }
.acc .acc__body { padding:0 0 22px; display:grid; gap:12px; }

/* ---------- dowód naukowy ---------- */
.evidence { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); }
.evidence > div { background:var(--paper); padding:28px 26px 32px; display:grid; gap:14px;
  align-content:start; }
.evidence h3 { font-size:21px; }
.evidence .tag { font-family:var(--ui); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 9px; justify-self:start; }
.evidence .tag--yes { background:var(--signal-soft); color:var(--signal-dark); }
.evidence .tag--no  { background:#FDF0F1; color:var(--danger); }
.evidence ul { margin:0; padding-left:19px; display:grid; gap:9px; font-size:14.5px; }
.evidence cite { display:block; font-size:12px; color:var(--muted); font-style:normal;
  margin-top:4px; }

/* ---------- gwarancja ---------- */
.guarantee { background:var(--ink); color:var(--paper); }
.guarantee .wrap { padding-top:var(--sec); padding-bottom:var(--sec); }
.guarantee h2 { color:var(--paper); }
.guarantee p { color:#D8DBE0; }
.guarantee .quote { font-family:var(--display); text-transform:uppercase;
  font-size:clamp(20px,3vw,30px); line-height:1.16; color:var(--paper); max-width:24ch; }

/* ---------- kroki ---------- */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); }
.steps > div { background:var(--paper); padding:0; }
.steps figure { margin:0; }
.steps figure img { aspect-ratio:4/5; object-fit:cover; width:100%; }
.steps .txt { padding:22px 24px 28px; display:grid; gap:9px; }
.steps .k { font-family:var(--ui); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }

/* ---------- formularz waitlisty ---------- */
.signup { display:grid; gap:16px; max-width:520px; }
.field { display:grid; gap:7px; }
.field label { font-family:var(--ui); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); }
.field input, .field select, .field textarea {
  font-family:var(--body); font-size:16px; padding:14px 16px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); border-radius:var(--radius); width:100%; }
.field input:focus { outline:none; border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.consent { display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start;
  font-size:13px; line-height:1.5; color:var(--muted); }
.consent input { width:18px; height:18px; margin-top:2px; accent-color:var(--signal); }
.formnote { font-size:12px; color:var(--muted); }
.formmsg { font-family:var(--ui); font-size:14px; padding:14px 16px; display:none; }
.formmsg--ok  { display:block; background:var(--signal-soft); color:var(--signal-dark); }
.formmsg--err { display:block; background:#FDF0F1; color:var(--danger); }

/* ---------- GPSR / bezpieczeństwo ---------- */
.gpsr { background:var(--mist); border:1px solid var(--line); padding:26px 28px 30px;
  display:grid; gap:14px; }
.gpsr dl { margin:0; display:grid; grid-template-columns:minmax(140px,auto) 1fr;
  gap:8px 22px; font-size:13.5px; }
.gpsr dt { font-family:var(--ui); color:var(--muted); }
.gpsr dd { margin:0; }
.disclaimer { font-size:12.5px; color:var(--muted); border-left:2px solid var(--line);
  padding-left:14px; }

/* ---------- koszyk ---------- */
.cart { position:fixed; inset:0 0 0 auto; width:min(420px,100%); background:var(--paper);
  border-left:1px solid var(--line); transform:translateX(100%); transition:transform .28s ease;
  z-index:90; display:flex; flex-direction:column; }
.cart[data-open="true"] { transform:translateX(0); }
.cart__head { display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--line); }
.cart__head h3 { font-size:19px; }
.cart__close { border:0; background:none; font-size:22px; cursor:pointer; line-height:1;
  padding:4px 8px; color:var(--ink); }
.cart__body { flex:1; overflow-y:auto; padding:22px 24px; display:grid; gap:18px;
  align-content:start; }
.cart__foot { border-top:1px solid var(--line); padding:20px 24px; display:grid; gap:14px; }
.cart__row { display:flex; justify-content:space-between; font-family:var(--ui); font-size:15px; }
.cart__item { display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:start;
  font-size:14px; }
.cart__item img { background:var(--mist); aspect-ratio:1; object-fit:cover; }
.cart__empty { color:var(--muted); font-size:14px; }
.scrim { position:fixed; inset:0; background:rgba(10,10,10,.45); opacity:0; visibility:hidden;
  transition:opacity .28s ease, visibility .28s ease; z-index:80; }
.scrim[data-open="true"] { opacity:1; visibility:visible; }
.cartbtn { position:relative; }
.cartbtn__count { position:absolute; top:-6px; right:-8px; background:var(--signal);
  color:var(--paper); font-family:var(--ui); font-size:10px; min-width:17px; height:17px;
  display:grid; place-items:center; padding:0 4px; }

/* ---------- upsell w koszyku ---------- */
.bump { border:1px solid var(--ink); padding:16px 18px; display:grid; gap:10px;
  background:var(--mist); }
.bump__hd { font-family:var(--ui); font-size:13px; display:flex; gap:10px; align-items:baseline;
  justify-content:space-between; }
.bump p { font-size:13px; color:var(--muted); }

/* ---------- stopka ---------- */
.footer { background:var(--ink); color:#B9BEC6; padding:var(--sec) 0 46px; }
.footer a { color:#B9BEC6; text-decoration:none; }
.footer a:hover { color:var(--paper); text-decoration:underline; }
.footer__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:40px; }
.footer h4 { font-family:var(--ui); font-size:11px; letter-spacing:.12em; color:#7C828C;
  text-transform:uppercase; margin-bottom:14px; }
.footer ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14px; }
.footer__mark { margin-top:56px; }
.footer__mark svg, .footer__mark img { width:100%; opacity:.12; }
.footer__legal { margin-top:34px; padding-top:24px; border-top:1px solid #22252B;
  font-size:12px; display:flex; flex-wrap:wrap; gap:8px 26px; }

/* ---------- pomocnicze ---------- */
.divider { height:1px; background:var(--line); border:0; margin:0; }
.tablewrap { overflow-x:auto; }
.hide { display:none !important; }
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (max-width:900px) {
  .header__nav { display:none; }
}
@media (max-width:640px) {
  :root { --gutter:20px; }
  .ladder { grid-template-columns:repeat(2,1fr); }
  .gallery__thumbs { grid-template-columns:repeat(4,1fr); }
}

/* ============================================================
   Dobudówki sprzedażowe
   ============================================================ */

/* ---------- pełnoekranowe zdanie ---------- */
.statement { background:var(--ink); color:var(--paper); padding:clamp(72px,11vw,140px) 0; }
.statement .wrap { display:grid; gap:26px; }
.statement p.big { font-family:var(--display); text-transform:uppercase;
  font-size:clamp(30px,6.2vw,76px); line-height:1.02; max-width:16ch; color:var(--paper); }
.statement p.big em { font-style:normal; color:var(--signal); }
.statement p.sub { color:#B9BEC6; max-width:52ch; font-size:clamp(15px,1.8vw,18px); }

/* ---------- porównanie ---------- */
.compare { border:1px solid var(--line); overflow-x:auto; }
.compare table { border-collapse:collapse; width:100%; min-width:560px; }
.compare th, .compare td { padding:16px 20px; border-bottom:1px solid var(--line); text-align:left;
  font-size:14.5px; vertical-align:top; }
.compare thead th { font-family:var(--ui); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); background:var(--mist); }
.compare thead th:last-child { color:var(--paper); background:var(--ink); }
.compare tbody td:last-child { background:var(--signal-soft); font-family:var(--ui); }
.compare tbody tr:last-child td { border-bottom:0; }
.compare .cecha { font-family:var(--ui); color:var(--muted); width:26%; }

/* ---------- oś czasu ---------- */
.timeline { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.tl { background:var(--paper); padding:28px 26px 32px; display:grid; gap:11px; align-content:start; }
.tl .kiedy { font-family:var(--ui); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--signal); }
.tl h4 { font-size:19px; }
.tl p { font-size:14.5px; color:var(--muted); line-height:1.55; }
@media (min-width:760px) { .timeline { grid-template-columns:repeat(4,1fr); } }

/* ---------- numerowana seria ---------- */
.seria { display:grid; gap:22px; }
.seria__pasek { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.seria__licz { font-family:var(--display); font-size:clamp(38px,7vw,64px); line-height:1;
  font-variant-numeric:tabular-nums; }
.seria__opis { font-family:var(--ui); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); }
.seria__tor { height:6px; background:var(--line); overflow:hidden; }
.seria__tor i { display:block; height:100%; background:var(--signal); width:0; transition:width .8s ease; }

.numery { display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:6px;
  max-height:230px; overflow-y:auto; padding:4px; border:1px solid var(--line); background:var(--mist); }
.numery button { font-family:var(--ui); font-variant-numeric:tabular-nums; font-size:13px;
  padding:9px 0; border:1px solid var(--line); background:var(--paper); color:var(--ink);
  cursor:pointer; transition:background .12s ease, color .12s ease, border-color .12s ease; }
.numery button:hover:not([disabled]) { border-color:var(--ink); }
.numery button[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.numery button[disabled] { opacity:.32; cursor:not-allowed; text-decoration:line-through; }
.wybrany { font-family:var(--ui); font-size:14px; display:flex; align-items:center; gap:10px; }
.wybrany b { font-family:var(--display); font-size:26px; font-variant-numeric:tabular-nums; }

/* ---------- przyklejony CTA na mobile ---------- */
.sticky { position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--paper);
  border-top:1px solid var(--line); padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:none; gap:12px; align-items:center;
  transform:translateY(110%); transition:transform .25s ease; }
.sticky[data-widoczny="true"] { transform:translateY(0); }
.sticky .txt { flex:1; min-width:0; }
.sticky .txt b { font-family:var(--ui); font-size:13px; display:block; }
.sticky .txt span { font-size:11.5px; color:var(--muted); }
.sticky .btn { flex:none; }
@media (max-width:760px) { .sticky { display:flex; } body { padding-bottom:76px; } }

/* ---------- odsłanianie przy przewijaniu ----------
   Ukrywamy WYŁĄCZNIE wtedy, gdy JavaScript wstał i doda klasę .js na <html>.
   Bez tego wyłączony albo zepsuty skrypt chowałby połowę strony na zawsze. */
.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal[data-widoczny="true"] { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  .js .reveal { opacity:1; transform:none; transition:none; }
}

/* ---------- trzy tiery produktu ---------- */
.tiers { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:820px) { .tiers { grid-template-columns:repeat(3,1fr); } }
.tier { background:var(--paper); padding:30px 26px 34px; display:grid; gap:14px; align-content:start; }
.tier--polecany { background:var(--ink); color:var(--paper); }
.tier--polecany h3, .tier--polecany .tier__cena { color:var(--paper); }
.tier--polecany .tier__lista li { color:#C9CED6; }
.tier--polecany .tier__lista li::before { background:var(--signal); }
.tier--polecany .btn { background:var(--signal); border-color:var(--signal); }
.tier__znacznik { font-family:var(--ui); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--signal); color:var(--paper); padding:4px 9px; justify-self:start; }
.tier__cena { font-family:var(--display); font-size:32px; text-transform:uppercase; }
.tier__za { font-size:12.5px; color:var(--muted); }
.tier--polecany .tier__za { color:#9AA0A9; }
.tier__lista { list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14px; }
.tier__lista li { display:grid; grid-template-columns:14px 1fr; gap:11px; align-items:start; }
.tier__lista li::before { content:""; width:6px; height:6px; background:var(--ink); margin-top:8px; }