/* Kroje marki z WŁASNEGO serwera, nie z fonts.googleapis.com — pobranie fontu
   od Google przekazuje mu adres IP odwiedzającego, zanim ten cokolwiek kliknie,
   czyli przed zgodą na analitykę. Pliki generuje `api/assets/fonts/generuj.sh`
   i siedzą w repo; `font-display: swap` zostaje, żeby tekst był czytelny od razu. */
@font-face {
  font-family: "Baloo 2"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/Baloo2-SemiBold-db705051c0fafcd66298139261b23964.woff2?vsn=d") format("woff2");
}
@font-face {
  font-family: "Baloo 2"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/Baloo2-Bold-6a59d13d3108d04d33a9624b5324e163.woff2?vsn=d") format("woff2");
}
@font-face {
  font-family: "Baloo 2"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/fonts/Baloo2-ExtraBold-a3cc93315f8ac6d5ebafdc9daf8a9eb2.woff2?vsn=d") format("woff2");
}
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/NunitoSans-Regular-99c7a444d629486501a7f6b83b1c3934.woff2?vsn=d") format("woff2");
}
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/NunitoSans-SemiBold-da9f68d847b573302ee67540eebf880c.woff2?vsn=d") format("woff2");
}
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/NunitoSans-Bold-d6106b4c52f628d03b9739b9a2537ece.woff2?vsn=d") format("woff2");
}

/* Gardeneer landing — tokens (identyfikacja „Grządka", znak Zawijas) */
:root {
  --paper: #eef1e6;            /* tło strony (szałwia) */
  --card: #f7f8f1;            /* karty / powierzchnie */
  --ink: #1b2a17;
  --ink-2: #46513c;
  --haze: #5f6a53;            /* tekst drugoplanowy — ≥ 4,5:1 na tle i kartach (AA) */
  --leaf: #3a7d34;            /* zieleń — podstawa, primary CTA */
  --leaf-deep: #2f6b2f;
  --leaf-tint: #e5efe0;       /* jasny zielony akcent tła */
  --marigold: #e6b422;        /* nagietek — akcent, premium, „dziś" */
  --marigold-deep: #7a5a05;   /* tekst na nagietku */
  --marigold-tint: #fbf3d9;
  --frost: #2f6fb0;           /* semantyczny chłód (przymrozek) */
  --frost-soft: #e6eef7;
  --sun: #e6b422;             /* susza / podlewanie — ciepły akcent */
  --line: rgba(27, 42, 23, 0.14);
  --radius: 14px;
  --display: "Baloo 2", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
}

.shell { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: var(--display); letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.12; font-weight: 700; margin: 14px 0 18px; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 600; margin: 0 0 22px; }
h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 8px; }
p { margin: 0 0 14px; }

a { color: var(--leaf-deep); }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.eyebrow {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--haze); font-weight: 700; margin: 0;
}
.fine { font-size: 0.82rem; color: var(--haze); margin: 10px 0 0; }
.operator { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.operator-mark { flex: none; width: 120px; height: auto; }
.operator span { flex: 1 1 260px; }

/* buttons */
.btn {
  display: inline-block; font-family: var(--body); font-weight: 700; font-size: 1rem;
  padding: 12px 22px; border-radius: 999px; text-decoration: none; border: 2px solid transparent;
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--leaf); color: #fff; }
.btn-primary:hover { background: var(--leaf-deep); }
.btn-marigold { background: var(--marigold); color: #3a2c05; }
.btn-marigold:hover { background: #d3a112; }
.btn-outline { border-color: var(--leaf); color: var(--leaf-deep); background: transparent; }
.btn-outline:hover { background: rgba(58, 125, 52, 0.10); }
.btn-ghost { color: var(--leaf-deep); background: transparent; padding: 9px 16px; }
.btn-ghost:hover { background: rgba(58, 125, 52, 0.10); }
.btn-wide { width: 100%; border: none; }
/* padding wyrównuje cel dotyku do znaczka sklepu (44 px) */
.link-quiet { color: var(--ink-2); text-decoration: none; font-weight: 600; align-self: center; padding: 10px 0; }
.link-quiet:hover { color: var(--leaf-deep); }

/* topbar */
/* Przyklejony, bo strona jest jednostronicowa i cała nawigacja siedzi w tym pasku
   — po zjechaniu do stref powrót do cennika nie może wymagać przewijania w górę.
   Tło jest pełne (nie półprzezroczyste): pod paskiem przesuwają się zdjęcia. */
.topbar {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--line); background: var(--paper);
}
.topbar-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 14px; padding-bottom: 14px; }

/* Kotwica pod przyklejonym paskiem: bez tego nagłówek sekcji ląduje pod nim. */
section[id] { scroll-margin-top: 72px; }

.topnav { display: flex; gap: 22px; margin-right: auto; margin-left: 8px; }
.topnav a {
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.95rem;
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.topnav a:hover { color: var(--leaf-deep); border-bottom-color: var(--leaf); }
/* Menu pod hamburgerem: `<details>`, więc otwiera się bez linijki skryptu —
   ten layout celowo nie ładuje JS-a Phoeniksa, a nawigacja nie może zależeć
   od tego, czy `/landing/app.js` się pobrał. Panel wisi pod paskiem, więc jego
   blokiem odniesienia jest przyklejony `.topbar` (jedyny element pozycjonowany
   na tej drodze) — dzięki temu idzie przez całą szerokość, a nie tylko pod
   samym przyciskiem. */
.topmenu { display: none; }
.topmenu summary {
  list-style: none; cursor: pointer; color: var(--leaf-deep);
  display: flex; align-items: center; padding: 6px; border-radius: 8px;
}
.topmenu summary::-webkit-details-marker { display: none; }
.topmenu summary svg { width: 26px; height: 26px; }
.topmenu[open] summary { background: rgba(58, 125, 52, 0.10); }
.topmenu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--line);
  box-shadow: 0 14px 30px -22px rgba(27, 42, 23, 0.8);
  padding: 6px 24px 14px;
}
.topmenu-nav { display: flex; flex-direction: column; }
.topmenu-nav a {
  color: var(--ink); text-decoration: none; font-weight: 600;
  padding: 13px 2px; border-bottom: 1px solid var(--line);
}
/* Konto pod kotwicami, oddzielone grubszą kreską: to inny rodzaj wyboru —
   kotwica przewija stronę, te odnośniki z niej wychodzą. */
.topmenu-actions {
  display: flex; flex-direction: column; align-items: stretch;
  margin-top: 8px; padding-top: 8px; border-top: 2px solid var(--line);
}
.topmenu-actions .btn { text-align: left; padding: 13px 2px; }
.topmenu-actions form { margin: 0; }
.topmenu-actions .topbar-email { padding: 6px 2px; }

/* Prawa strona paska: dla zalogowanego konto i wylogowanie, dla gościa rejestracja.
   Wylogowanie jest FORMULARZEM, bo trasa przyjmuje DELETE, a layout stron
   publicznych celowo nie ładuje JS-a Phoeniksa — `Plug.MethodOverride` czyta
   `_method` z pola, więc działa bez linijki skryptu. */
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar-actions form { margin: 0; }
/* Etykiety w pasku nie mogą się łamać: „Załóż konto" schodziło na telefonie do
   dwóch linijek, a pasek jest przyklejony — ta wysokość zostaje na stałe. */
.topbar-actions .btn { white-space: nowrap; }
.topbar-email { color: var(--haze); font-size: 0.9rem; }
/* konto zalogowanego w jednym menu — trzy elementy obok siebie łamały etykiety nawigacji */
.topnav a { white-space: nowrap; }
.account-menu { position: relative; }
.account-menu > summary { list-style: none; cursor: pointer; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px;
  display: flex; flex-direction: column; gap: 2px; padding: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 30px -18px rgba(27, 42, 23, 0.45);
}
.account-menu-panel .topbar-email { padding: 6px 12px 8px; overflow-wrap: anywhere; }
.account-menu-panel .btn, .account-menu-panel form .btn { width: 100%; text-align: left; }
.account-menu-panel form { margin: 0; }

/* Przełączenie paska na telefon MUSI stać po regułach, które gasi: zapytanie
   medialne nie podnosi swoistości, więc `.topbar-actions { display: flex }`
   postawione niżej w pliku po prostu je przykrywało. Próg z pomiaru: gość ma
   w pasku „Zaloguj” i „Pobierz aplikację”, przy 910 px przycisk wychodził za ekran. */
@media (max-width: 1000px) {
  .topnav, .topbar-actions { display: none; }
  .topmenu { display: block; }
}

.wordmark {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 1.4rem;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em; line-height: 1;
}
.wordmark-mark { width: 32px; height: 32px; flex: none; }
.wordmark-sm { font-size: 1.1rem; }
.wordmark-sm .wordmark-mark { width: 24px; height: 24px; }

/* hero */
.hero { padding: 64px 0 72px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.lede { font-size: 1.15rem; color: var(--ink-2); max-width: 46ch; }
.hero-ctas { display: flex; gap: 20px; margin: 24px 0 14px; flex-wrap: wrap; }
.hero-note { font-size: 0.88rem; color: var(--haze); max-width: 42ch; }

/* planer rabat */
.planner { padding: 56px 0; background: var(--card); border-block: 1px solid var(--line); }
.planner-grid {
  display: grid; grid-template-columns: 1.08fr 0.92fr; grid-template-rows: auto 1fr;
  column-gap: 48px; row-gap: 0; align-items: start;
}
.planner-copy { grid-area: 1 / 2; }
.planner-more { grid-area: 2 / 2; }
.planner-points { margin: 18px 0 0; padding-left: 20px; color: var(--ink-2); max-width: 52ch; }
.planner-points li { margin-bottom: 8px; }
.planner-points li::marker { color: var(--leaf-deep); }
.planner-note { font-size: 0.88rem; color: var(--haze); max-width: 46ch; }
/* ekrany na lewo, odwrotnie niż w hero, żeby dwie sekcje pod rząd nie były bliźniakami */
.planner-art { grid-area: 1 / 1 / 3 / 2; align-self: center; margin: 0; }
.planner-phones { display: flex; justify-content: center; align-items: flex-start; }
.planner-phone { padding: 6px; border-radius: 28px; max-width: none; }
.planner-phone img { display: block; width: 100%; height: auto; border-radius: 22px; }
.planner-phone--back { width: 49%; margin-top: 44px; }
.planner-phone--front {
  width: 54%; margin-left: -3%; position: relative; z-index: 1;
  box-shadow: 0 24px 48px -22px rgba(27, 42, 23, 0.5);
}
.planner-art figcaption { font-size: 0.8rem; color: var(--haze); margin-top: 14px; text-align: center; }
@media (max-width: 860px) {
  .planner-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 28px; }
  .planner-copy, .planner-more, .planner-art { grid-area: auto; }
  .planner-phone--back { display: none; }
  .planner-phone--front { width: min(300px, 86%); margin-left: 0; }
}

/* hero demo: prognoza -> zadania */
.hero-demo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.forecast {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 10px;
}
.f-day { text-align: center; border-radius: 8px; padding: 6px 2px; }
.f-day span { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--haze); }
.f-day b { font-size: 0.98rem; font-variant-numeric: tabular-nums; }
.f-alert { background: var(--frost-soft); }
.f-alert span, .f-alert b { color: var(--frost); }

.alert-card {
  background: var(--card); border: 1px solid var(--line); border-left-width: 4px;
  border-radius: var(--radius); padding: 14px 18px;
  opacity: 0; transform: translateY(10px);
  animation: rise .5s ease forwards;
}
.a-frost { border-left-color: var(--frost); animation-delay: .15s; }
.a-spray { border-left-color: var(--leaf); animation-delay: .35s; }
.a-water { border-left-color: var(--sun); animation-delay: .55s; }
.a-when { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--haze); }
.a-frost .a-when { color: var(--frost); }
.a-spray .a-when { color: var(--leaf); }
.a-water .a-when { color: var(--sun); }
.a-what { margin-top: 4px; font-size: 0.98rem; }

@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .alert-card { animation: none; opacity: 1; transform: none; }
}

/* features */
.features { padding: 56px 0; background: var(--card); border-block: 1px solid var(--line); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.feature h3 { color: var(--leaf-deep); }
.feature p { color: var(--ink-2); font-size: 0.98rem; margin: 0; }

/* Zdjęcia: kadr ze stałymi proporcjami i podpisem autora W ROGU, nie pod spodem.
   Podpis jest wymogiem wytycznych obu serwisów (Unsplash i Pexels), a osobny
   wiersz pod każdym z sześciu zdjęć rozbijałby rytm karty: obrazek — nagłówek —
   akapit. Tabela z odnośnikami do oryginałów: `img/ZRODLA.md`. */
.shot { position: relative; margin: 0 0 16px; border-radius: var(--radius); overflow: hidden; }
/* `height: auto` jest tu konieczne, a nie domyślne: atrybuty `width`/`height`
   w znaczniku (są po to, żeby przeglądarka zarezerwowała miejsce przed
   pobraniem obrazka) działają jak wysokość podana wprost, a wtedy `aspect-ratio`
   nie ma czego wyliczać — kadr rósł do 640 px i wychodził poza własną sekcję. */
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 45 / 32; object-fit: cover; }
.shot figcaption {
  position: absolute; right: 8px; bottom: 6px;
  font-size: 0.66rem; color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75); letter-spacing: 0.01em;
}

/* Pas ze zdjęciem na całą szerokość — jedyne miejsce, gdzie zdjęcie nie ilustruje
   akapitu, tylko robi oddech między sekcjami tekstu. */
.band { position: relative; }
.band img { display: block; width: 100%; height: clamp(220px, 34vw, 380px); object-fit: cover; }
.band-in {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding-top: 90px; padding-bottom: 22px;
  /* Zdjęcie bywa jasne w miejscu, w którym stoi napis (poduszka, koc), więc
     przyciemnienie musi sięgać wyżej niż sam dół kadru. */
  background: linear-gradient(to top, rgba(9, 20, 7, 0.82), rgba(9, 20, 7, 0.4) 55%, transparent);
}
.band-in p {
  margin: 0; color: #fff; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  max-width: 24ch;
}
.band-in span { color: rgba(255, 255, 255, 0.85); font-size: 0.7rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }

/* czy to dla mnie — sytuacje, nie cechy */
.cases { padding: 56px 0 0; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.case {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px;
}
.case h3 { color: var(--leaf-deep); }
.case p { color: var(--ink-2); font-size: 0.98rem; margin: 0; }

/* reguły głośności powiadomień */
.notes { padding: 56px 0; }
.note-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 28px; }
.note { border-left: 3px solid var(--leaf); padding-left: 16px; }
.note h3 { font-size: 1.02rem; margin-bottom: 6px; }
.note p { color: var(--ink-2); font-size: 0.94rem; margin: 0; }

/* how */
.how { padding: 56px 0; }
.steps { margin: 0; padding-left: 22px; max-width: 62ch; }
.steps li { margin-bottom: 12px; color: var(--ink-2); }
.steps li::marker { color: var(--leaf-deep); font-weight: 800; }
.steps b { color: var(--ink); }

/* mockupy aplikacji */
.mock { padding: 56px 0 64px; }
.mock-sub { color: var(--haze); font-size: 0.92rem; margin-bottom: 34px; }
.phones {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px; align-items: start; max-width: 960px;
}
.phone-wrap { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.phone-wrap figcaption { font-size: 0.85rem; color: var(--ink-2); text-align: center; max-width: 26ch; }
.phone {
  width: 100%; max-width: 264px;
  border: 2px solid rgba(27, 42, 23, 0.32);
  border-radius: 30px;
  background: var(--card);
  box-shadow: 0 18px 40px -20px rgba(27, 42, 23, 0.32);
  padding: 8px;
}
.phone-wrap:nth-child(1) .phone { transform: rotate(-1.2deg); }
.phone-wrap:nth-child(3) .phone { transform: rotate(1.2deg); }
.phone img { display: block; width: 100%; height: auto; border-radius: 22px; }

/* pobranie aplikacji */
/* Jedyne miejsce na stronie z ODWRÓCONĄ paletą: sekcja prosi o czynność
   wykonywaną poza stroną, więc ma się nie zlewać z sąsiadami. Znaczek sklepu
   ma własną obwódkę i światło ochronne, więc na zieleni wygląda tak samo dobrze
   jak na papierze — nie trzeba pod niego podkładać płytki. */
.get { background: var(--leaf-deep); color: var(--paper); padding: 56px 0; }
.get h2 { color: #fff; margin-bottom: 10px; }
.get .eyebrow { color: rgba(238, 241, 230, 0.72); }
.get .lede { color: rgba(238, 241, 230, 0.92); max-width: 44ch; }
.get-in { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.get-actions { display: flex; align-items: center; gap: 22px; margin: 26px 0 0; flex-wrap: wrap; }
.get-note { font-size: 0.9rem; color: rgba(238, 241, 230, 0.8); margin: 0; }
.get-note a { color: var(--marigold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.get-fine { color: rgba(238, 241, 230, 0.55); margin-top: 22px; }

/* Znaczek sklepu idzie na stronę BEZ przeróbek (wytyczne Google Play), więc
   zmienia się wyłącznie jego rozmiar — cień i uniesienie dostaje odnośnik pod
   nim, a nie sama grafika. Szerokość z proporcji pliku 646×250. */
.store-badge { display: inline-block; line-height: 0; border-radius: 12px; transition: transform .15s ease; }
.store-badge img { display: block; width: 194px; height: auto; }
.store-badge:hover { transform: translateY(-2px); }
.store-badge:focus-visible { outline: 3px solid var(--marigold); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .store-badge { transition: none; } }

/* Kod QR jest dla MONITORA — patrz komentarz w szablonie. Tło i zaokrąglenie
   robi `padding` na samym obrazku: SVG jest przezroczysty, więc światło wokół
   kodu (wymagane, żeby czytnik go złapał) jest po prostu tłem elementu. */
.get-qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.get-qr img {
  /* 148 px = 4 px na moduł (kod ma 37 modułów), a `padding` to równe CZTERY
     moduły — tyle światła wokół kodu wymaga norma, żeby czytnik go złapał. */
  display: block; width: 148px; height: 148px; padding: 16px;
  background: var(--card); border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.get-qr figcaption {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(238, 241, 230, 0.7);
}

/* pricing */
.pricing { padding: 56px 0 64px; background: var(--card); border-block: 1px solid var(--line); }
.pricing-sub { color: var(--ink-2); margin-bottom: 30px; }
/* trzy plany zamiast dwóch — `auto-fit` zamiast sztywnych kolumn, żeby na
   wąskim ekranie karty schodziły pod siebie bez osobnego breakpointa */
.price-grid {
  display: grid; gap: 24px; max-width: 1060px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.price-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 8px;
  /* pozycjonowanie znacznika oferty — od ceny założycielskiej ma go też Max,
     a nie tylko karta wyróżniona */
  position: relative;
}
.price-featured { border: 2px solid var(--marigold); background: var(--marigold-tint); position: relative; }
.price-featured h3 { color: var(--marigold-deep); }
.badge {
  position: absolute; top: -12px; left: 22px;
  /* ink, nie marigold-deep: drobne wersaliki na nagietku miały 3,3:1 */
  background: var(--marigold); color: var(--ink); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 12px; border-radius: 999px;
}
.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price b { font-family: var(--display); font-size: 2.1rem; font-weight: 700; }
.price span { color: var(--haze); }
/* Cena po starcie przekreślona OBOK założycielskiej, nie zamiast niej: bez punktu
   odniesienia „79 zł" jest tylko liczbą, a nie ceną, którą warto zamrozić. */
.price s {
  font-family: var(--display); font-size: 1.15rem; font-weight: 600;
  color: var(--haze); text-decoration-thickness: 2px;
}
.price-card ul { margin: 0 0 16px; padding-left: 20px; color: var(--ink-2); font-size: 0.95rem; flex: 1; }
.price-card li { margin-bottom: 6px; }

/* signup */
.signup { padding: 64px 0; }
.signup-in { max-width: 620px; }
#signup-form { display: flex; flex-direction: column; gap: 18px; }
.variant-row { display: flex; gap: 10px; border: none; margin: 0; padding: 0; flex-wrap: wrap; }
.variant { position: relative; }
.variant input { position: absolute; opacity: 0; inset: 0; }
.variant span {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  border: 2px solid var(--line); font-weight: 600; font-size: 0.95rem; cursor: pointer;
  background: var(--card);
}
.variant em { font-style: normal; color: var(--haze); font-weight: 400; }
.variant input:checked + span { border-color: var(--leaf); background: var(--leaf-tint); }
.variant input:focus-visible + span { outline: 3px solid var(--leaf); outline-offset: 2px; }

.field-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
.field span { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 5px; }
.field input, .field select {
  width: 100%; padding: 11px 14px; font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
}
.field input:focus, .field select:focus { outline: 3px solid var(--leaf); outline-offset: 1px; border-color: var(--leaf); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-msg { min-height: 1.4em; font-weight: 600; margin: 0; }
.form-msg.ok { color: var(--leaf-deep); }
.form-msg.err { color: #a33131; }

/* faq */
.faq { padding: 0 0 64px; }
.faq-list { max-width: 62ch; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 14px 28px 14px 0; position: relative;
  font-weight: 700; font-family: var(--display); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; color: var(--leaf-deep); font-size: 1.3rem; }
.faq details[open] summary::after { content: "−"; }
.faq-a { margin: 0 0 16px; color: var(--ink-2); }

/* footer */
.kontakt { padding: 8px 0 64px; }
.kontakt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 40px; max-width: 62ch; }
.kontakt-grid p { margin: 0 0 10px; color: var(--ink-2); }
.kontakt-nazwa { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.kontakt-nazwa + .fine { margin: 0 0 10px; }

.footer { border-top: 1px solid var(--line); padding: 22px 0; }
.footer-in { display: flex; justify-content: space-between; align-items: center; color: var(--haze); font-size: 0.9rem; flex-wrap: wrap; gap: 8px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 4px; }
.footer-nav a { display: inline-block; padding: 8px 6px; color: var(--ink-2); }

/* responsive */
@media (max-width: 860px) {
  .hero { padding: 40px 0 52px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .feature-grid { grid-template-columns: 1fr; gap: 22px; }
  .case-grid { grid-template-columns: 1fr; gap: 16px; }
  .note-grid { grid-template-columns: 1fr; gap: 18px; }
  .price-grid { grid-template-columns: 1fr; }
  .get-in { grid-template-columns: 1fr; }
  .get-qr { display: none; }
  .field-row { grid-template-columns: 1fr; }
  /* trzy pełne telefony jeden pod drugim to ~1900 px — rząd do przesuwania palcem */
  .phones {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 4px 16px 12px;
  }
  .phone-wrap { flex: 0 0 78%; scroll-snap-align: center; }
  .phone-wrap:nth-child(1) .phone, .phone-wrap:nth-child(3) .phone { transform: none; }
}


/* ── Baner zgody na statystyki ──────────────────────────────────────────────
   Style banera przeniosły się 10.08.2026 do `GardeneerApiWeb.Analytics` (inline),
   bo ten sam partial renderuje się też na stronach kasy, które tego arkusza
   w ogóle nie ładują. Zasady zostają te same: pasek na dole, nie okno na środku
   (pytanie o cookies nie zasłania treści, po którą ktoś przyszedł), i oba
   przyciski wyglądają na klikalne — „Tylko niezbędne" celowo NIE jest schowane
   pod szarym linkiem, bo wtedy zgoda przestaje być zgodą. */
.btn-sm { padding: 9px 18px; font-size: 0.92rem; }

@media (max-width: 620px) {
  /* W pasku telefonu zostaje sam znak i hamburger — reszta jest w panelu. */
  .topbar-in { gap: 8px; }
  .wordmark { font-size: 1.2rem; }
  .wordmark-mark { width: 26px; height: 26px; }
  section[id] { scroll-margin-top: 62px; }
  /* Podpis autora obok hasła wchodził w nie na wąskim kadrze — schodzi pod nie. */
  .band-in { flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 70px; }
  .band-in span { align-self: flex-end; }

  .cookies-in { gap: 12px; }
  .cookies-btns { width: 100%; }
  .cookies-btns .btn { flex: 1; text-align: center; }
}

/* Regulamin i polityka prywatności. Wcześniej te reguły siedziały w `<style>`
   wklejonym w obu podstronach — dwie kopie tego samego, różniące się już
   jedną linijką (`.doc ol`). */
.doc { max-width: 760px; margin: 0 auto; padding: 48px 24px 80px; }
.doc h1 { margin-bottom: 8px; }
.doc h1 + .fine { margin-bottom: 26px; }
.doc h2 { font-size: 1.35rem; margin: 36px 0 12px; }
.doc h3 { font-size: 1.05rem; margin: 22px 0 8px; }
.doc p, .doc li { color: var(--ink-2); }
.doc ul, .doc ol { padding-left: 22px; margin: 0 0 14px; }
.doc li { margin-bottom: 6px; }
.doc table { border-collapse: collapse; width: 100%; margin: 12px 0 18px; font-size: 0.95rem; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--haze); }
.doc .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin: 18px 0; }
.doc .powrot { display: inline-block; margin-bottom: 24px; color: var(--leaf-deep); text-decoration: none; font-weight: 600; }

/* Wykaz źródeł (`/zrodla`). Lista, a nie tabela: pozycja niesie cztery rzeczy
   o różnej długości (nazwa, wydawca, co daje, licencja, czasem cytat), a
   pięciokolumnowa tabela na telefonie rozjeżdża się w pionowe paski. */
.doc .zrodla { list-style: none; padding-left: 0; }
.doc .zrodla li { margin-bottom: 20px; padding-left: 14px; border-left: 3px solid var(--line); }
.doc .zrodla p { margin: 0 0 4px; }
.doc .zrodlo-nazwa { font-weight: 600; color: var(--ink); }
.doc .zrodlo-wydawca { font-weight: 400; color: var(--haze); }
.doc .zrodlo-cytat { font-style: italic; }
/* Wykaz zbiorów GBIF idzie stronami — kilka tysięcy pozycji to kilka MB HTML-a. */
.doc .pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0; }
.doc .pager a, .doc .pager [aria-current] { display: inline-block; min-width: 2.2em; text-align: center; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.doc .pager a { color: var(--leaf-deep); font-weight: 600; }
.doc .pager [aria-current] { background: var(--card); color: var(--ink); font-weight: 700; }

/* Karty roślin (/rosliny) — treść na klasach .doc, tu tylko to, czego .doc nie ma */
.plant-doc { max-width: 820px; }
.plant-crumbs { font-size: 0.88rem; color: var(--haze); margin-bottom: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.plant-crumbs a { color: var(--leaf-deep); text-decoration: none; font-weight: 600; }
.plant-sub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--ink-2); margin: 0 0 6px; }
.plant-chip { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--leaf-deep); background: var(--paper); border-radius: 999px; padding: 3px 10px; }
.plant-parent { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.plant-now { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--marigold); border-radius: var(--radius); padding: 6px 22px 12px; margin: 22px 0; }
.plant-now h2 { margin-top: 14px; }
.plant-care { list-style: none; padding-left: 0; }
.plant-care li { margin-bottom: 10px; padding-left: 14px; border-left: 3px solid var(--line); }
.plant-care b { color: var(--ink); margin-right: 6px; }
.plant-lat { color: var(--haze); font-weight: 400; margin-left: 4px; }
/* `.doc p` ma wyższą specyficzność i zabierał ostrzeżeniu kolor */
.doc .plant-toxic {
  color: #a33; font-weight: 600; background: var(--marigold-tint);
  border-left: 4px solid var(--marigold); border-radius: 8px; padding: 10px 14px;
}
.plant-calendar th { width: 9em; text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--ink); }
.plant-calendar ul { margin: 0; padding-left: 0; list-style: none; }
.plant-calendar li { margin-bottom: 6px; }
.doc .plant-list { list-style: none; padding-left: 0; }
.doc .plant-list li { margin-bottom: 0; }
.plant-list a { font-weight: 600; color: var(--leaf-deep); text-decoration: none; }
.plant-list-cols { columns: 2; column-gap: 28px; }
@media (max-width: 640px) { .plant-list-cols { columns: 1; } }
.plant-groups { list-style: none; padding-left: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.plant-groups li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; display: flex; justify-content: space-between; }
.plant-groups a { font-weight: 700; color: var(--leaf-deep); text-decoration: none; }
.plant-cta { background: var(--leaf); color: var(--paper, #f7f8f1); border-radius: var(--radius); padding: 22px 26px; margin: 36px 0 18px; }
.plant-cta .plant-cta-title { font-family: var(--display); font-weight: 700; margin: 0 0 10px; font-size: 1.3rem; opacity: 1; }
/* bez przezroczystości: papier na zieleni miał ~4,2:1, poniżej AA */
.plant-cta p { color: #fff; }
.plant-cta .fine { color: #fff; }
.plant-cta-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.plant-care b a { color: var(--leaf-deep); text-decoration: none; }

/* Hasła chorób i szkodników (/choroby, /szkodniki) — na klasach kart roślin */
.threat-host { border-top: 1px solid var(--line); margin-top: 26px; scroll-margin-top: 16px; }
.threat-host > summary { cursor: pointer; list-style: none; }
.threat-host > summary::-webkit-details-marker { display: none; }
.threat-host > summary h3 { display: inline; }
.threat-host:not([open]) > summary h3::after { content: " +"; color: var(--leaf-deep); }
.threat-host:not([open]) { margin-top: 0; padding: 10px 0; }

.letter-index { display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0 8px; }
.letter-index a {
  min-width: 36px; padding: 8px 0; text-align: center; border-radius: 8px;
  background: var(--card); border: 1px solid var(--line); text-decoration: none; font-weight: 700;
}
.letter-group { scroll-margin-top: 80px; }
/* cel dotyku w długich listach: padding linku zamiast marginesu wiersza — ten sam rytm, większy cel */
.plant-list a { display: inline-block; padding: 4px 0; }

/* krótkie odnośniki w rzędzie zamiast kolumny pełnych nazw — odmiany i żywiciele */
.doc .plant-chips { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.plant-chips a {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); text-decoration: none; font-size: 0.92rem;
}
.plant-chips a:hover { border-color: var(--leaf); color: var(--leaf-deep); }
.plant-more > summary { cursor: pointer; font-weight: 700; color: var(--leaf-deep); padding: 8px 0; }
a.plant-chip { text-decoration: none; }
.threat-record + .threat-record { margin-top: 18px; }
.threat-own { margin: 0 0 6px; }
.threat-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.threat-label { margin: 12px 0 4px; }

/* Tabele dokumentów na telefonie: trzy kolumny po jednym słowie w wierszu dawały
   komórki na 1 900 px — wiersz układa się w blok, a nagłówek kolumny idzie z data-label. */
@media (max-width: 640px) {
  .doc table.stack, .doc table.stack tbody, .doc table.stack tr, .doc table.stack td { display: block; width: auto; }
  .doc table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .doc table.stack tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .doc table.stack td { border: 0; padding: 2px 0; }
  .doc table.stack td[data-label]::before {
    content: attr(data-label); display: block; font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--haze);
  }
  .doc table.stack td:first-child::before { display: none; }
}

/* kalendarz na telefonie: okno miesięcy nad zabiegiem, nie kolumna na pół ekranu */
@media (max-width: 640px) {
  .plant-calendar tr, .plant-calendar th, .plant-calendar td { display: block; width: auto; }
  .plant-calendar th { padding-bottom: 0; color: var(--leaf-deep); border-bottom: 0; }
}

/* zdjęcie poglądowe na karcie rośliny — pod odpowiedzią „co zrobić”, z podpisem licencji */
.plant-photo { margin: 22px 0 8px; }
.plant-photo img {
  display: block; width: 100%; height: auto; max-height: 440px; object-fit: cover;
  border-radius: var(--radius); background: var(--card);
}
.plant-photo figcaption { font-size: 0.8rem; color: var(--haze); margin-top: 6px; }

/* planer rabat per strona domu (/rabata) — rzut jak w aplikacji, lista z numerami w kolorach rzutu */
.bed-lede { font-size: 1.1rem; }
.bed-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 600; color: var(--ink); }
.bed-drawing { margin: 18px 0 8px; }
.bed-top-frame { max-width: 560px; }
.bed-top { display: block; width: 100%; height: auto; }
.bed-top-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--haze); }
.bed-top-foot { display: flex; justify-content: space-between; }
/* numer na drobnych kółkach (cebulki, okrywowe) czyta się dzięki obwódce w kolorze tła */
.bed-top-num { font: 800 14px var(--body); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.bed-facts span + span::before { content: "·"; margin-right: 18px; color: var(--haze); }
.bed-drawing figcaption { font-size: 0.85rem; color: var(--haze); margin-top: 6px; }
.doc .bed-plants { list-style: none; padding-left: 0; margin-top: 18px; }
.bed-plants li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.bed-plants a { font-weight: 700; color: var(--leaf-deep); text-decoration: none; }
.bed-plants .fine { margin: 2px 0 0; }
.bed-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 0.9rem; color: var(--ink);
  background: color-mix(in srgb, var(--c) 35%, transparent); border: 2px solid var(--c);
}
.doc .bed-side-list { list-style: none; padding-left: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bed-side-list a {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 18px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2);
}
.bed-side-list a:hover { border-color: var(--leaf); }
.bed-side-list b { color: var(--leaf-deep); font-size: 1.05rem; }
.bed-sides h2 { font-size: 1.1rem; }

/* prace miesiąca (/co-zrobic) — prace zwijane jak rośliny na hasłach agrofagów */
.doc .month-jump { margin-bottom: 8px; }
.month-jump span { color: var(--haze); font-weight: 400; margin-left: 4px; }
.month-type > summary h2 { display: inline; font-size: 1.2rem; margin: 0; }
.month-type:not([open]) > summary h2::after { content: " +"; color: var(--leaf-deep); }
.month-type[open] > summary { margin-bottom: 10px; }
.month-type .plant-care a { text-decoration: none; }
.month-type .plant-care a b { color: var(--leaf-deep); }
.month-pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 32px 0 8px; font-weight: 700; }
.month-pager a { text-decoration: none; padding: 8px 0; }
.doc .month-grid { list-style: none; padding-left: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.month-grid a {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; text-decoration: none; height: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.month-grid a:hover { border-color: var(--leaf); }
.month-grid b { color: var(--leaf-deep); }
.month-now a { border: 2px solid var(--marigold); }
.month-badge { align-self: flex-start; font-size: 0.75rem; font-weight: 700; color: var(--marigold-deep); background: var(--marigold-tint); border-radius: 999px; padding: 1px 8px; }