/* =========================================================================
   FlowCut / Daniel Media — single source of truth stylesheet.
   Dark "tool UI" aesthetic. Swap the WHOLE theme by editing --accent below.
   ========================================================================= */

/* ---------- 0. Fonts, served from here ----------
   Until 14.08.2026 the pages pulled two stylesheets from two other companies
   (fonts.googleapis.com and api.fontshare.com), and those stylesheets then
   pointed at font files on a third host. That is two extra DNS lookups and two
   extra TLS handshakes standing between a visitor and the first line of text,
   every single time, on a connection that was already open to us.

   These are the same files those CDNs were serving, copied into assets/fonts/
   and cached here for a year like every other asset. Nothing about how the page
   looks changes; the Polish characters come from the same files as before.

   Newsreader is here in ITALIC ONLY. Every use of --font-accent in this file
   sets font-style: italic, so the upright weights were 427 KB nobody would ever
   see. Latin and latin-ext only: the shop is English and Polish.
   Rebuilt by scratch script; if a weight is added to the design, add the file
   here too or the browser will quietly fall back to Georgia/Arial. */

@font-face { font-family: 'Clash Display'; src: url('fonts/clash-display-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url('fonts/clash-display-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url('fonts/clash-display-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('fonts/newsreader-italic-400-latin-ext.woff2') format('woff2'); font-weight: 400; font-style: italic; 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: 'Newsreader'; src: url('fonts/newsreader-italic-400-latin.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 1. Theme tokens ---------- */
:root {
  /* >>> CHANGE THIS ONE LINE TO RE-SKIN THE SITE <<< */
  --accent:     #f2f2f7;            /* akcent = biel; jedynym kolorem akcji jest --money */
  --accent-2:   #d0d0d8;            /* gradient partner */
  --accent-rgb: 242, 242, 247;      /* same as --accent */

  --bg:        #0a0a0f;   /* page background */
  --bg-2:      #0e0e15;   /* alt sections */
  --surface:   #141420;   /* cards */
  --surface-2: #1a1a28;   /* card hover / raised */
  --text:      #f2f2f7;   /* primary text */
  --muted:     rgba(242, 242, 247, 0.60);
  --faint:     rgba(242, 242, 247, 0.55);   /* 0.40 dawalo kontrast 3.5:1 — ponizej progu WCAG AA */
  --line:      rgba(242, 242, 247, 0.09);
  --line-2:    rgba(242, 242, 247, 0.16);
  --gold:      #f5c451;   /* stars */
  --green:     #34d399;   /* free / success */

  /* MONEY palette — restrained, NOT neon: a calm confident green for buy/price/action */
  --money:      #3a9d6a;
  --money-2:    #2f855a;
  --money-rgb:  58, 157, 106;
  --cta2:       #c98a3c;   /* muted amber, used once for secondary checkout */
  --cta2-2:     #b9772e;

  /* Distinctive, designer-grade pairing — not the default AI/Helvetica look:
     Clash Display (characterful display) + Satoshi (clean modern body),
     Newsreader italic as a single serif accent. */
  --font-head:   'Clash Display', 'Helvetica Neue', Arial, sans-serif;
  --font-body:   'Satoshi', 'Helvetica Neue', Arial, sans-serif;
  --font-accent: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:   'Satoshi', 'Helvetica Neue', Arial, sans-serif;

  /* Fiolet wtyczki (12.09.2026). Ten sam rejestr, co fiolet Premiere'a, wiec
     karta z wtyczka swieci kolorem programu, w ktorym wtyczka siedzi, a karta
     z paczka kolorem pieniadza. Dwie polowy oferty, dwa kolory. */
  --violet:     #7c5cff;
  --violet-rgb: 124, 92, 255;

  --stripe:   #635bff;   /* Stripe brand violet — used only on the pay action */
  --stripe-2: #7a73ff;

  --maxw: 1200px;
  --gutter: clamp(18px, 5vw, 48px);
  --radius: 14px;
  --radius-sm: 9px;
  --header-h: 66px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* The band the phone paints around the notch takes its colour from the root
   element, and with none set here it was inheriting body's — which carries a
   soft white wash centred just above the top edge. So the strip beside the
   Dynamic Island came out a shade lighter than the bar under it, and the seam
   read as a gap the header had failed to fill.
   Giving the root its own flat colour keeps that wash inside the page, where it
   was meant to be, and leaves the strip an exact match for the bar. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  /* quiet, premium backdrop — no neon glow */
  background-image: radial-gradient(1100px 520px at 50% -120px, rgba(255,255,255,0.035), transparent 70%);
  background-attachment: fixed;
}

/* ambient gradient field — slow continuous drift so the page never feels flat */
body::before {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(760px 560px at 82% 6%, rgba(var(--accent-rgb),0.055), transparent 62%),
    radial-gradient(640px 520px at 8% 30%, rgba(var(--accent-rgb),0.030), transparent 62%),
    radial-gradient(620px 600px at 60% 96%, rgba(var(--accent-rgb),0.035), transparent 62%),
    /* zielone poswiaty (11.09.2026, prosba Maćka o „troche glowu"): jedna pod
       hero, druga w polowie strony. Kolor pieniadza, wiec swieca tam, gdzie
       stoja przyciski, a nie przypadkiem. */
    radial-gradient(700px 460px at 22% 4%, rgba(var(--money-rgb),0.075), transparent 64%),
    radial-gradient(680px 520px at 78% 52%, rgba(var(--money-rgb),0.055), transparent 64%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3%, 2.5%, 0) scale(1.08); }
}

/* ===================== SCROLL REVEAL — HIERARCHIA RUCHU =====================
   27.08.2026. Bylo: jeden `.reveal` na wszystko — naglowek, karta, punkt listy
   i film wjezdzaly identycznie, 22 px do gory, w tym samym czasie. Oko czyta
   taki ruch jako "strona z animacjami", nie jako kolejnosc czytania.

   Teraz kazdy rodzaj elementu ma wlasny ruch, dobrany do swojej wagi. Cel:
   prowadzic wzrok kupujacego w dol, do przycisku kupna — na TELEFONIE, gdzie
   wszystko stoi w jednej kolumnie, a jedyny gest to scroll kciukiem.

   Ruszaja sie wylacznie `transform` i `opacity` — jedyne dwie rzeczy, ktore
   przegladarka robi na karcie graficznej, bez przeliczania ukladu strony. To
   jest powod, dla ktorego to nie tnie na telefonie.

   `--d` to opoznienie kaskady. Jest zmienna CSS, a nie tylko `transition-delay`
   wpisanym z JS, bo dzieki temu moze z niego korzystac takze `::before` (ptaszek
   przy punkcie listy) — pseudo-element nie dziedziczy stylu wpisanego w atrybut. */
/* KLUCZOWE: chowa dopiero `html.js-motion`, a te klase dokłada app.js — i tylko
   wtedy, gdy naprawde zamierza cos animowac. Bez tego strona chowala sie SAMA,
   a odslanial ja dopiero JavaScript. Kazda rzecz, ktora go zatrzyma (blad,
   wolny telefon, wlaczone "ogranicz animacje" w systemie), zostawiala pusty
   ekran. Teraz domyslnie wszystko jest widoczne, a ruch jest dokladana
   warstwa — nigdy warunkiem zobaczenia tresci. */
.reveal { transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: var(--d, 0ms); }
.js-motion .reveal:not(.in) { opacity: 0; transform: translateY(22px); }
/* Podpowiedz dla przegladarki tylko dopoki element czeka na swoje wejscie.
   Zdjeta po wyladowaniu: kazdy element trzymany w gotowosci kosztuje pamiec
   karty graficznej, a na telefonie tej pamieci jest najmniej. */
.js-motion .reveal:not(.in) { will-change: opacity, transform; }

/* naglowek sekcji — jedzie dalej i wolniej, laduje ciezko: to jest znak "nowy rozdzial" */
.js-motion .reveal-head:not(.in) { transform: translateY(34px); }
.reveal-head { transition-duration: .85s; }
/* karta produktu — nie wjezdza z boku, tylko PODCHODZI do czytelnika.
   Skala 0.965, nie mniej: ponizej tego tekst na karcie widocznie mieknie. */
.js-motion .reveal-card:not(.in) { transform: translateY(14px) scale(0.965); }
.reveal-card { transition-duration: .6s; }
/* punkt listy — krotko i szybko, zeby kaskada osmiu punktow zdazyla sie
   przetoczyc, zanim kciuk przewinie dalej */
.js-motion .reveal-line:not(.in) { transform: translateY(9px); }
.reveal-line { transition-duration: .5s; }
/* film / duzy obraz — ciezki, wiec ma prawo jechac wolniej i dalej */
.js-motion .reveal-media:not(.in) { transform: translateY(30px); }
.reveal-media { transition-duration: .95s; }
/* przycisk kupna — konczy kazda kaskade i jako jedyny nie przesuwa sie,
   tylko NARASTA. Ruch w innej osi niz cala reszta = oko zatrzymuje sie na nim. */
.js-motion .reveal-cta:not(.in) { transform: scale(0.92); }
.reveal-cta { transition-duration: .55s; }

/* Ptaszek przy punkcie w hero wskakuje chwile PO swoim tekscie, z lekkim
   przestrzeleniem skali. To on niesie znaczenie "jest, masz to" — wiec to on
   ma byc ostatnim ruchem w linijce, a nie tekst. */
.hero-list li::before { transition: transform .42s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .3s ease; }
.js-motion .hero-list li.reveal:not(.in)::before { transform: scale(0.2); opacity: 0; }
.hero-list li.reveal::before { transition-delay: calc(var(--d, 0ms) + 130ms); }

/* subtle life on the wordmark */
.brand-name { background-size: 220% auto; animation: shimmer 7s linear infinite; }
@keyframes shimmer { to { background-position: 220% center; } }

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .brand-name { animation: none; }
  /* Ten wylacznik MUSI wymieniac takze warianty ruchu (.reveal-card itd.).
     Powod jest twardy i kosztowal juz jedno wdrozenie: strona jest budowana
     przez przegladarke, ktora ma animacje WLACZONE, wiec do wyslanego pliku
     HTML zapisuje sie gotowe `class="reveal reveal-card"`. Ktos, kto ma w
     systemie "ogranicz animacje", dostaje ten plik z tymi klasami, a JS u niego
     celowo nie robi nic — czyli nikt tych klas nie zdejmie. Bez tej linijki
     karty zostawalyby u niego na zawsze zsuniete o 14 px i pomniejszone, a
     ptaszki przy punktach w hero w ogole niewidoczne.
     `:not(.in)` jest tu po to, zeby wygrac na punkty z regulami wyzej — sam
     `.reveal` ma za nisko, zeby je nadpisac. */
  .reveal, .reveal.in,
  .reveal-head:not(.in), .reveal-card:not(.in), .reveal-line:not(.in),
  .reveal-media:not(.in), .reveal-cta:not(.in) { opacity: 1; transform: none; transition: none; }
  .hero-list li.reveal:not(.in)::before { opacity: 1; transform: none; transition: none; }
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }
input { font: inherit; }
:focus-visible { outline: 2px solid var(--money); outline-offset: 2px; border-radius: 6px; }

/* ⚠️ Atrybut `hidden` MUSI wygrywac (11.09.2026).
   Przegladarka daje `hidden` zwykle `display: none` z wlasnego arkusza, wiec
   KAZDA nasza regula z `display:` bije go bez walki. Zlapane na zywo: bramka na
   maila pokazywala jednoczesnie przycisk „Sending..." i napis „Sent", bo
   `#gateForm { display: flex }` nie pozwalal jej sie schowac.
   Ta jedna linia zamyka temat dla wszystkiego, co chowamy przez `.hidden = true`:
   koszyka, strony produktu, kasy, banera cookie i tej bramki. */
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4 { font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; }
/* Clash Display only on big display headings; small headings use Satoshi (far more legible) */
h1, h2 { font-family: var(--font-head); }
h3, h4 { font-family: var(--font-body); font-weight: 700; letter-spacing: -0.005em; }
.display { font-size: clamp(2.6rem, 7vw, 5.2rem); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.18rem; }
p { color: var(--muted); }
.lead { font-size: clamp(1.02rem, 1.8vw, 1.22rem); color: var(--muted); max-width: 60ch; }
.grad {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* hero display accent — elegant serif italic (the Helvetica companion) */
.haccent { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: -0.005em; }
/* registered-trademark mark on FlowCut — small superscript */
.reg { font-size: 0.5em; vertical-align: super; font-weight: 600; line-height: 0; letter-spacing: 0.02em; }

/* key phrase — quiet emphasis, no glow */
.hl { font-weight: 700; color: var(--text); }

/* ---------- 4. Ticker / urgency ---------- */
.ticker {
  background: linear-gradient(90deg, rgba(var(--money-rgb),0.16), rgba(var(--money-rgb),0.05));
  border-bottom: 1px solid rgba(var(--money-rgb),0.22);
  font-size: 0.85rem;
}
.ticker-inner {
  max-width: var(--maxw); margin-inline: auto; padding: 9px var(--gutter);
  display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.ticker-text { color: var(--muted); }
.ticker-text strong { color: var(--money); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.countdown { font-family: var(--font-body); font-weight: 700; color: var(--text); letter-spacing: 0.03em; background: rgba(0,0,0,0.32); border: 1px solid rgba(var(--money-rgb),0.32); padding: 2px 9px; border-radius: 6px; }

/* ---------- 5. Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 15, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 18px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--accent), var(--accent-2) 70%, #fff);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* header trust line (replaces the search bar) with a pulsing glowing dot */
.header-trust { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 0.88rem; color: var(--muted); }
.header-trust strong { color: var(--text); }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--money); flex-shrink: 0; animation: dotpulse 1.7s ease-in-out infinite; }
@keyframes dotpulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--money-rgb),0.7); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--money-rgb),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--money-rgb),0); }
}
@media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } }
@media (prefers-reduced-motion: reduce) { .header-trial { animation: none; } }

/* Launch price in the header — quiet violet, same register as the plugin's labels */
.sale-text { font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.sale-sub { color: var(--muted); font-size: 0.85rem; }
.header-sale .countdown { border-color: rgba(var(--accent-rgb),0.35); }
.header-sale .pulse-dot { background: var(--accent); animation: dotpulse-warm 1.7s ease-in-out infinite; }
@keyframes dotpulse-warm {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(var(--accent-rgb),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); }
}
@media (prefers-reduced-motion: reduce) { .header-sale .pulse-dot { animation: none; } }

.header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.ig { display: inline-flex; align-items: center; gap: 7px; font-size: 0.9rem; transition: filter .2s; }
.ig svg { width: 18px; height: 18px; fill: none; stroke: #e1306c; stroke-width: 1.8; }
.ig span { font-weight: 600;
  background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ig:hover { filter: brightness(1.12); }
.cart-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); transition: border-color .2s, background .2s; }
.cart-btn:hover { border-color: var(--money); background: var(--surface-2); }
.cart-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cart-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--money); color: #fff; font-size: 0.7rem; font-weight: 700; display: grid; place-items: center; }

/* ---------- 6. Hero ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
  padding: clamp(48px, 8vw, 104px) var(--gutter) clamp(28px, 4vw, 56px);
  text-align: left;
}
.hero-copy { max-width: 560px; }
/* the plugin panel, docked to the right edge like inside Premiere */
.hero-panel { position: relative; }
.hero-panel img, .hero-panel video {
  display: block; width: 114%; max-width: none; height: auto;
  background: #0b0b0f;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: left; }
  .hero-panel img, .hero-panel video { width: 100%; border-right: 1px solid var(--line-2); border-radius: 12px; }
}
#trial { padding-top: clamp(10px, 1.6vw, 18px); }
#trial .section-head { margin-bottom: 18px; }

/* ---- JAK DZIALA TRIAL (9.09.2026) ----
   Trzy kroki w rzedzie, numer jako cien pod tekstem, a nie kolko przed nim:
   to jest kolejnosc w czasie, a nie lista rzeczy do odhaczenia. Czwarty blok
   (`.tafter`) celowo NIE wyglada jak krok — mowi o tym, co dzieje sie samo,
   gdy trzy dni mijaja, i dlatego ma inne tlo i pelna szerokosc. */
.tsteps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 16px; padding: 0; }
.tstep { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 22px 22px 20px; }
.ts-n { position: absolute; top: -10px; right: 8px; font-family: var(--font-head); font-weight: 700;
  font-size: 5rem; line-height: 1; color: rgba(var(--money-rgb), 0.10); pointer-events: none; }
.tstep h3 { font-size: 1.08rem; margin-bottom: 7px; }
.tstep p { font-size: 0.92rem; color: var(--muted); }
.tstep a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.tafter { background: linear-gradient(160deg, rgba(var(--money-rgb),0.07), var(--surface) 60%);
  border: 1px solid rgba(var(--money-rgb),0.26); border-radius: var(--radius); padding: 24px; }
.tafter h3 { font-size: 1.1rem; margin-bottom: 8px; }
.tafter p { font-size: 0.95rem; color: var(--muted); }
.tafter-buy { margin-top: 10px; }
/* ---- co dostajesz na trialu: wtyczka + paczka (11.09.2026) ----
   Instrukcja instalacji zeszla stad do okienka zamowienia. Zostalo to, po co
   ktos tu jest: dwie rzeczy, ktore dostaje, i plus miedzy nimi. Karta paczki
   ma zielona ramke, bo to ta polowa, ktora zostaje na zawsze. */
.twhat { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
  gap: 18px; margin-bottom: 22px; }
.tw-card { position: relative; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: 24px 24px 22px; }
/* Swiatlo za kursorem. Pozycje podaje JS w zmiennych --mx/--my, a gdy myszy
   nigdy nie bylo, plama stoi w rogu z opacity 0, wiec nic nie miga. */
.tw-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%),
    rgba(var(--swiatlo, var(--money-rgb)), 0.26), transparent 68%); }
.tw-card:hover::after { opacity: 1; }

/* Karta z wtyczka: fiolet. Statyczna poswiata na ramce i wokol, do tego
   fioletowe swiatlo za kursorem. */
.tw-plugin { --swiatlo: var(--violet-rgb);
  background: linear-gradient(160deg, rgba(var(--violet-rgb),0.10), var(--surface) 62%);
  border-color: rgba(var(--violet-rgb),0.38); box-shadow: 0 0 40px rgba(var(--violet-rgb),0.14); }
.tw-plugin .tw-tag { color: var(--violet); }
.tw-plugin li::before { background: rgba(var(--violet-rgb),0.75); box-shadow: 0 0 10px rgba(var(--violet-rgb),0.6); }
.tw-gift { --swiatlo: var(--money-rgb);
  background: linear-gradient(160deg, rgba(var(--money-rgb),0.10), var(--surface) 62%);
  border-color: rgba(var(--money-rgb),0.38); box-shadow: 0 0 40px rgba(var(--money-rgb),0.12); }
.tw-tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint); }
.tw-gift .tw-tag { color: var(--money); }
.tw-card h3 { font-size: 1.35rem; margin: 8px 0 14px; letter-spacing: -0.015em; }
.tw-card ul { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; }
.tw-card li { position: relative; padding-left: 20px; font-size: 0.95rem; color: var(--muted); line-height: 1.5; }
.tw-card li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--line-2); }
.tw-gift li::before { background: rgba(var(--money-rgb),0.75); box-shadow: 0 0 10px rgba(var(--money-rgb),0.6); }
.tw-plus { align-self: center; font-family: var(--font-head); font-weight: 700; font-size: 2rem;
  color: var(--faint); }
@media (max-width: 900px) {
  .twhat { grid-template-columns: 1fr; gap: 12px; }
  .tw-plus { justify-self: center; font-size: 1.6rem; }
}

/* Cztery plytki zamiast akapitu: kazda mowi jedna rzecz i czyta sie ja
   wzrokiem, nie czytaniem. Paczka dostaje zielona ramke, bo to jedyna
   z nich, ktora jest prezentem, a nie warunkiem. */
.tperks { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 10px; margin: 0 0 22px; padding: 0; }
.tperks li { display: flex; align-items: center; gap: 10px; padding: 13px 15px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
  font-size: 0.9rem; color: var(--muted); line-height: 1.35; }
.tperks .ft-ico { flex: none; width: 20px; height: 20px; color: var(--faint); }
.tperks .perk-gift { color: var(--text); font-weight: 600;
  background: linear-gradient(150deg, rgba(var(--money-rgb), 0.14), var(--surface) 70%);
  border-color: rgba(var(--money-rgb), 0.42); }
.tperks .perk-gift .ft-ico { color: var(--money); }
.tperks .perk-gift { box-shadow: 0 0 26px rgba(var(--money-rgb),0.16); }

/* Przycisk jest najwiekszym elementem sekcji i stoi na srodku: wczesniej
   lezal w rzedzie obok tekstu i gubil sie przy prawej krawedzi. */
/* ---- wielki napis FREE TRIAL (11.09.2026) ----
   Trzy rzeczy naraz, wszystkie tanie dla przegladarki: maska (wjazd zza dolnej
   krawedzi), gradient wpisany w litery (swiatlo przelatuje w kolko) i poswiata
   pod spodem. Napis jest jednym elementem, bez dzielenia na slowa, zeby
   tlumaczenie na polski bylo jednym kluczem, a nie sklejka z kawalkow. */
.section-head.thead { display: block; text-align: center; margin-bottom: 22px; }
.fb-wrap { position: relative; overflow: hidden; padding: 2px 0 6px; }
.fb-wrap::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 0; width: min(680px, 90%); height: 70%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--money-rgb),0.30), transparent 75%);
  filter: blur(6px); }
.freebig { position: relative; font-family: var(--font-head); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.92;
  font-size: clamp(3rem, 10vw, 7.4rem); margin: 0;
  background-image: linear-gradient(100deg,
    #eaf6ef 0%, #eaf6ef 34%, #9ff5c4 46%, var(--money) 54%, #eaf6ef 66%, #eaf6ef 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fbshine 6.5s linear 1.1s infinite; }
@keyframes fbshine {
  0%   { background-position: 130% 0; }
  55%  { background-position: -30% 0; }
  100% { background-position: -30% 0; }
}
.fb-sub { max-width: 46ch; margin: 10px auto 0; font-size: 1.02rem; color: var(--muted); }

/* Wjazd: napis czeka pod krawedzia maski i rusza, gdy sekcja wchodzi w kadr.
   Ruch jest dluzszy niz w zwyklych naglowkach, bo to ma byc wejscie, nie
   poprawka pozycji. */
.js-motion .thead:not(.in) .freebig { transform: translateY(105%); }
.freebig { transition: transform 1.05s cubic-bezier(0.16, 0.84, 0.24, 1); transition-delay: 60ms; }
.js-motion .thead:not(.in) .fb-wrap::before { opacity: 0; }
.fb-wrap::before { transition: opacity .9s var(--ease) .5s; }
@media (prefers-reduced-motion: reduce) {
  .freebig { animation: none; transform: none; transition: none;
    background-position: 0 0; }
  .fb-wrap::before { opacity: 1; }
}
@media (max-width: 700px) { .fb-sub { font-size: 0.94rem; } }

#trial { position: relative; }
#trial::before { content: ""; position: absolute; left: 50%; bottom: -40px; width: min(760px, 90%);
  height: 320px; transform: translateX(-50%); pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(var(--money-rgb),0.20), transparent 72%); }
.tcta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }
.tcta .btn-cta { width: min(100%, 420px);
  box-shadow: 0 12px 40px rgba(var(--money-rgb),0.36); }
.tcta .btn-cta:hover { box-shadow: 0 16px 54px rgba(var(--money-rgb),0.5); }
.tcta-fine { font-family: var(--font-mono); font-size: 0.8rem; color: var(--faint); }

/* ---- CENA (9.09.2026) ----
   Karta, nie kafelek w siatce: to jedyna cena na tej stronie i ma nie wygladac
   jak jeden z wielu produktow. Lewa strona to kwota i decyzja, prawa to spis
   tego, za co sie placi. */
.pricecard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px;
  background: var(--surface); border: 1px solid rgba(var(--money-rgb),0.3); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px); box-shadow: 0 18px 50px rgba(0,0,0,0.35); }
.pc-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.pc-now { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1; color: var(--money); text-shadow: 0 0 26px rgba(var(--money-rgb), 0.35); }
.pc-was { font-size: 1.15rem; color: var(--faint); text-decoration: line-through; }
.pc-tag { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--money); background: rgba(var(--money-rgb),0.12); border: 1px solid rgba(var(--money-rgb),0.3);
  padding: 3px 9px; border-radius: 6px; }
.pc-note { margin-top: 12px; color: var(--muted); font-size: 0.95rem; }
.pc-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 20px; }
.pc-list { display: flex; flex-direction: column; gap: 9px; }
.pc-list li { font-size: 0.95rem; padding-left: 24px; position: relative; }
.pc-list li::before { content: "✓"; position: absolute; left: 0; color: var(--money); font-weight: 700; }
.pc-list .pc-plat { color: var(--faint); font-size: 0.88rem; }
.pc-list .pc-plat::before { content: "▸"; color: var(--faint); }

/* ---- te same bloki na stronie produktu (9.09.2026) ----
   Wykres i kroki jada tu ze strony glownej bez zmian w markupie, wiec tu tylko
   dopasowanie do waskiej kolumny: kroki ida jeden pod drugim, bo obok karty
   kupna nie ma miejsca na trzy, a numer schodzi do rozmiaru, ktory nie
   przykrywa tekstu. */
.pp-speed { max-width: none; margin: 0 0 18px; }
.pp-trial { margin-top: 22px; }
.pp-trial > h4 { font-family: var(--font-head); font-size: 1.05rem; margin-bottom: 12px; }
.tsteps-slim { grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; }
.tsteps-slim .tstep { padding: 16px 18px 15px; }
.tsteps-slim .ts-n { font-size: 3.2rem; top: -4px; right: 10px; }
.tsteps-slim .tstep h3 { font-size: 1rem; }
.tsteps-slim .tstep p { font-size: 0.88rem; }
.pp-trial .tafter { padding: 18px 20px; }
.pp-trial .tafter h3 { font-size: 1rem; }
.pp-trial .tafter p { font-size: 0.9rem; }

/* Kafel darmowej paczki (przepisany 11.09.2026). Gora: co to jest i przycisk,
   obok siebie. Dol: cztery liczby w rzedzie, bo to one robia tu robote —
   „75+" czyta sie szybciej niz „siedemdziesiat piec presetow". */
.free-wide { margin-bottom: 18px; }
.fw-top { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; }
.fw-top > div { min-width: 0; }
.fw-top .btn-free { flex: 0 0 auto; padding: 13px 28px; }
.free-wide h3 { margin-top: 4px; }
.free-wide s { color: var(--faint); text-decoration-thickness: 2px; }
.fw-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.fw-counts li { font-size: 0.88rem; color: var(--muted); }
.fw-counts strong { display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 1.5rem; color: var(--money); line-height: 1.1; }
@media (max-width: 640px) {
  .fw-top { align-items: stretch; }
  .fw-top .btn-free { width: 100%; }
  .fw-counts { grid-template-columns: repeat(2, 1fr); gap: 12px 10px; }
}
/* Linia z linkami do stron paczek. Ma czytac sie jak przypis, nie jak nawigacja. */
.pack-links { margin-top: 16px; color: var(--faint); font-size: 0.9rem; }
.pack-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.pack-links a:hover { color: var(--accent); }
/* Zdanie ciagnace sie przez 1200 px czyta sie fatalnie: oko gubi poczatek
   nastepnej linii. Karty na cala szerokosc dostaja wiec miare akapitu, a nie
   miare kontenera (11.09.2026). */
.free-wide > .fw-top p, .pc-note { max-width: 58ch; }

@media (max-width: 900px) {
  .tsteps { grid-template-columns: 1fr; }
  .tperks { grid-template-columns: 1fr; gap: 8px; }
  .pricecard { grid-template-columns: 1fr; gap: 20px; }
  .pc-actions { align-items: stretch; }
  .free-wide .btn-free { align-self: stretch; }
}
/* eyebrow = plugin-style category label (like "1 BRIGHT" / "SAAS" in FlowCut's UI) */
.eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 16px; }
/* main hero heading keeps the previous (Helvetica) face; Clash Display stays everywhere else */
.hero .display { margin-bottom: 18px; font-family: var(--font-head); font-weight: 600; font-size: clamp(2.7rem, 5.6vw, 4.6rem); line-height: 1.04; }
.hero .lead { margin: 0 0 8px; }
/* Przycisk i to, co pod nim, to jeden blok (11.09.2026). Kolumna, nie rzad:
   „bez karty" ma stac POD przyciskiem, a nie odplywac od niego w prawo na
   szerokim ekranie. */
.hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 26px; }
/* ---- wstega z paczka pod przyciskiem (12.09.2026) ----
   Wysuwa sie SPOD przycisku po najechaniu. Miejsce na nia jest zarezerwowane
   przez padding-bottom, wiec nic ponizej nie drga, a sama wstega chowa sie
   za przyciskiem (nizszy z-index), nie za maska — dzieki temu jej zaokraglony
   dol nie obcina sie o nic. */
.cta-stack { position: relative; display: inline-flex; padding-bottom: 32px; }
.cta-stack .btn-cta { position: relative; z-index: 2; width: 100%; justify-content: center; }
.cta-ribbon { position: absolute; left: 12px; right: 12px; bottom: 0; z-index: 1;
  display: flex; align-items: flex-end; justify-content: center; height: 38px;
  padding-bottom: 8px; border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(var(--money-rgb),0.34), rgba(var(--money-rgb),0.14));
  border: 1px solid rgba(var(--money-rgb),0.42); border-top: 0;
  font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: var(--text);
  transform: translateY(-38px); opacity: 0;
  transition: transform .42s cubic-bezier(0.16,0.84,0.24,1), opacity .2s linear; }
.cta-stack:hover .cta-ribbon,
.cta-stack:focus-within .cta-ribbon { transform: translateY(0); opacity: 1; }
/* Bez myszy nie ma najechania, wiec wstega stoi wysunieta od razu. */
@media (hover: none) {
  .cta-ribbon { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-ribbon { transition: none; transform: translateY(0); opacity: 1; }
}

/* Glowny przycisk strony jest wiekszy od wszystkich pozostalych i swieci.
   To jedyne miejsce, w ktorym cos na tej stronie krzyczy. */
.btn-hero { padding: 18px 36px; font-size: 1.08rem; letter-spacing: -0.01em;
  box-shadow: 0 10px 34px rgba(var(--money-rgb), 0.28); }
.btn-hero:hover { box-shadow: 0 14px 42px rgba(var(--money-rgb), 0.4); }
.cta-under { display: flex; flex-direction: column; gap: 3px; }
.cta-time { font-family: var(--font-mono); font-size: 0.78rem; color: var(--faint); padding-left: 15px; }
/* „Bez karty" przy przycisku, nie pod akapitem (9.09.2026). Zielona kropka i
   monospace, czyli ten sam jezyk, co linia zaufania w naglowku — to nie jest
   marketing, tylko warunek techniczny, i ma tak wygladac. */
.cta-nocard { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 0.86rem; color: var(--muted); letter-spacing: 0.01em; }
.cta-nocard::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--money); box-shadow: 0 0 10px rgba(var(--money-rgb), 0.8); }
.hero-alt { margin-top: 12px; font-size: 0.95rem; }
/* Zdanie o bonusie ma byc czytane jako dodatek do triala, nie jako druga
   oferta: mocniejszy kolor i waga niz link obok, ale bez wielkosci naglowka. */
.hero-bonus { color: var(--text); font-weight: 600; }
.hero-bonus::before { content: "+"; margin-right: 7px; color: var(--money); font-weight: 700; }
/* Drugi rzad przyciskow: ta sama szerokosc, mniejszy ciezar. Paczka ma byc
   widoczna jako osobna droga, ale nie ma wygrywac wzrokiem z trialem. */
.hero-cta-2 { margin-top: 12px; }
.hero-cta-2 .btn-ghost-lg { padding: 12px 24px; font-size: 0.95rem; }
.cta-hint { font-family: var(--font-mono); font-size: 0.78rem; color: var(--faint); }

/* Jedno zdanie zamiast wykresu (11.09.2026). Historia jest w komentarzu
   w index.html; tu zostaje sam styl: mocniejsze od reszty akapitow, bo to
   jedyna liczba na pierwszym ekranie, ale nie krzyczy. */
/* Obie liczby maja byc widoczne z drugiego konca pokoju: godzina na bialo,
   pietnascie minut na zielono. Cala roznica, ktora sprzedaje ta strona, miesci
   sie w tych dwoch slowach, wiec to one sa tu najwieksze. */
.hero-fact { margin: 18px 0 0; max-width: 52ch; font-size: 1.04rem; color: var(--muted); }
.hero-fact strong { font-family: var(--font-head); font-weight: 700; font-size: 1.34em;
  line-height: 1; color: var(--text); letter-spacing: -0.01em; }
/* ---- wejscie pierwszego ekranu (12.09.2026) ----
   Maciek: „wolniej to musi sie dziac, ale hero tez nie ma animacji". Wczesniej
   kazdy element przygasal i podjezdzal o 22 px w 0,75 s, czyli ruch byl, ale
   na tyle maly i szybki, ze oko go nie lapalo. Teraz naglowek WYJEZDZA zza
   krawedzi maski, film podchodzi ze skala, a calosc trwa ponad dwa razy dluzej. */
.h1-mask { overflow: hidden; padding-bottom: 4px; }
.js-motion .hero .display.reveal:not(.in) { transform: translateY(104%); opacity: 1; }
.hero .display.reveal { transition: transform 1.15s cubic-bezier(0.16, 0.84, 0.24, 1), opacity .5s var(--ease);
  transition-delay: var(--d, 0ms); }
.js-motion .hero .eyebrow.reveal:not(.in) { transform: translateY(14px); }
.hero .eyebrow.reveal { transition-duration: .9s; }
.js-motion .hero-fact.reveal:not(.in) { transform: translateY(18px); }
.hero-fact.reveal { transition-duration: 1s; }
.js-motion .hero-panel.reveal:not(.in) { transform: translateY(36px) scale(0.975); }
.hero-panel.reveal { transition-duration: 1.25s; }
.js-motion .hero-cta .btn-cta.reveal:not(.in) { transform: translateY(16px) scale(0.94); }
.hero-cta .btn-cta.reveal { transition-duration: .85s; }

/* ---- jedyna animacja na pierwszym ekranie (12.09.2026) ----
   Maciek: „bardziej saasowe, jakas zajebista animacja, jakis typewriter".
   Robi dokladnie to, o czym jest zdanie: godzina zostaje PRZECIETA (linia
   przejezdza przez „1h" i napis gasnie), a „15 min" wpisuje sie jak na
   maszynie, z migajaca kreska. Ruch niesie wiec sens, a nie ozdobe.

   Zadna litera nie jest tu podmieniana przez JavaScript, i to jest celowe:
   slownik i18n.js jest kluczowany trescia tego akapitu, wiec majstrowanie przy
   tekscie w locie zabiloby polska wersje zdania. Animowany jest wylacznie
   wyglad: szerokosc okna, przez ktore widac napis, i kreska na jego koncu.

   Glow idzie przez `filter`, a nie `text-shadow`, bo `overflow: hidden` obcina
   cien razem z tekstem, a filtr nakladany jest PO obcieciu i dzieki temu
   poswiata zostaje. */
.hero-fact .hl-win { color: var(--money);
  display: inline-block; vertical-align: baseline; white-space: nowrap; overflow: hidden;
  filter: drop-shadow(0 0 16px rgba(var(--money-rgb), 0.45));
  border-right: 2px solid transparent; }
.hero-fact strong:first-of-type {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: left 58%; background-size: 0% 2px; }

/* Stan poczatkowy tylko wtedy, gdy animacje sa wlaczone. Bez JS albo przy
   „ogranicz animacje" zdanie stoi gotowe, z obiema liczbami. */
.js-motion .hero-fact .hl-win { max-width: 0;
  animation: hfType 1.9s steps(6) 2.5s forwards, hfCaret .78s step-end 2.5s 8; }
.js-motion .hero-fact strong:first-of-type { animation: hfCut 1.05s cubic-bezier(0.3, 0, 0.2, 1) 1.5s forwards; }
@keyframes hfCut {
  from { background-size: 0% 2px; opacity: 1; }
  to   { background-size: 100% 2px; opacity: 0.5; }
}
@keyframes hfType { from { max-width: 0; } to { max-width: 12ch; } }
@keyframes hfCaret {
  0%, 49%   { border-right-color: rgba(var(--money-rgb), 0.95); }
  50%, 100% { border-right-color: transparent; }
}

/* ---- OPINIE POD PIERWSZYM EKRANEM (11.09.2026) ----
   Uklad: opinia z zewnatrz w srodku, nasze dwie po bokach. Czlowiek, ktory
   decyduje, czy nam wierzyc, patrzy najpierw na tego, kto nie jest z nami
   zwiazany. Kafelki sa ROWNEJ wielkosci (11.09.2026): rozny rozmiar robil
   z trzech opinii ranking, a to sa trzy rowne glosy.

   Cytat idzie krojem akcentowym (Newsreader, kursywa), a nie tym samym
   grotesekiem co reszta strony: kursywa szeryfowa czyta sie jak cudze slowa,
   a nie jak kolejny naglowek. Wielki cudzyslow w tle robi za interpunkcje.

   Karty rosna pod kursorem, wszystkie tak samo. */
.proof { padding-top: clamp(26px, 4vw, 44px); padding-bottom: clamp(6px, 1vw, 12px); text-align: center; }
.pf-head { font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.01em; font-size: clamp(1.4rem, 3.2vw, 2.1rem); }

.pf-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 24px;
  max-width: 560px; margin-inline: auto; }
.pf-grid:has(.pf:nth-child(3)) { grid-template-columns: repeat(3, 1fr); max-width: 1060px;
  align-items: stretch; gap: 16px; }

.pf { position: relative; display: flex; flex-direction: column; gap: 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px;
  padding: clamp(18px, 2.2vw, 24px); overflow: hidden;
  transition: transform .28s var(--ease), border-color .28s, box-shadow .28s; }
/* Wielki cudzyslow zamiast ozdobnika. Jest tlem, wiec nie wchodzi w tekst. */
.pf::before { content: "\201C"; position: absolute; top: -18px; right: 10px;
  font-family: var(--font-accent); font-size: 7rem; line-height: 1;
  color: rgba(var(--money-rgb), 0.09); pointer-events: none; }
.pf:hover { transform: translateY(-4px) scale(1.02); border-color: rgba(var(--money-rgb),0.4);
  box-shadow: 0 22px 55px rgba(0,0,0,0.5); }


.pf-who { display: flex; align-items: center; gap: 11px; }
.pf-photo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 1px solid var(--line-2); }

.pf-by { font-size: 0.82rem; color: var(--faint); }
.pf-by strong { display: block; color: var(--text); font-size: 0.92rem; letter-spacing: -0.01em; }
.pf-by a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.pf-by a:hover { color: var(--accent); }

.pf-quote { position: relative; font-family: var(--font-accent); font-style: italic;
  font-size: 1.06rem; line-height: 1.5; color: var(--text); }
/* Rowna wysokosc kart: cytat rozpycha sie na reszte kafelka, wiec trzy roznej
   dlugosci wypowiedzi nie robia trzech roznych wysokosci. */
.pf blockquote { flex: 1; }


@media (max-width: 900px) {
  .pf-grid:has(.pf:nth-child(3)) { grid-template-columns: 1fr; max-width: 560px; }
  .pf:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pf { transition: none; }
  .pf:hover { transform: none; }
}

/* ---- KAFELKI Z FUNKCJAMI (11.09.2026) ----
   Osiem punktow z hero, przeniesionych nad filmy w sekcji o wtyczce. Byly
   lista z zielonymi ptaszkami w dwoch kolumnach; teraz sa kafelkami z ikonami,
   jak u ElevenPercent. Ikona niesie tu znaczenie (nozyce, glob, folder), a nie
   ozdobe — osiem identycznych ptaszkow nie niosl niczego. */
/* 12.09.2026, druga podejscie: osiem pudelek z ramkami wygladalo jak lista
   zrobiona na szybko. Teraz jest to pasek specyfikacji: jedno pole, w srodku
   siatka rozdzielona wloskami, bez ramki na kazdym punkcie. Nad nim tytul,
   ktory mowi, czym ten pasek jest — reszta sekcji to filmy, a to jest spis
   tego, czego w filmach nie widac. */
.ft-head { margin: clamp(28px, 4vw, 44px) 0 14px; font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); }
.ft-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin: 0 0 clamp(24px, 3.4vw, 38px); border: 1px solid var(--line-2);
  border-radius: 14px; overflow: hidden; background: var(--surface); }
.ft-grid li { display: flex; align-items: center; gap: 11px; padding: 16px 16px;
  font-size: 0.88rem; line-height: 1.3; color: var(--muted);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ft-grid li:nth-child(4n) { border-right: 0; }
.ft-grid li:nth-child(n + 5) { border-bottom: 0; }
.ft-ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--money); }
@media (max-width: 1000px) {
  .ft-grid { grid-template-columns: repeat(2, 1fr); }
  .ft-grid li:nth-child(4n) { border-right: 1px solid var(--line); }
  .ft-grid li:nth-child(2n) { border-right: 0; }
  .ft-grid li:nth-child(n + 5) { border-bottom: 1px solid var(--line); }
  .ft-grid li:nth-child(n + 7) { border-bottom: 0; }
}

@media (max-width: 640px) {
  .pf { padding: 16px; }
  /* Na telefonie dwie kolumny, nie jedna: napisy sa krotkie, a osiem punktow
     jeden pod drugim to byl caly ekran przewijania. */
  .ft-grid li { padding: 13px 11px; font-size: 0.8rem; gap: 9px; }
  .ft-ico { width: 16px; height: 16px; }
}
.free-also { margin-top: 6px; font-size: 0.88rem; color: var(--faint); }
.plan-nocard { margin-top: 10px; }
/* W karcie kupna .bx-actions jest juz kolumna (patrz sekcja karty kupna nizej),
   wiec napis siada pod oboma przyciskami sam z siebie. */
.bx-nocard { justify-content: center; margin-top: 2px; }
.hero-alt a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hero-alt a:hover { color: var(--accent); }
.hero-cta .btn-cta { padding: 14px 30px; font-size: 1rem; text-decoration: none; display: inline-flex; align-items: center; }
.btn-ghost-lg { font-family: var(--font-head); font-weight: 600; font-size: 1rem; padding: 14px 28px; border-radius: 12px; border: 1px solid var(--line-2); color: var(--text); transition: border-color .2s, color .2s, box-shadow .2s; }
.btn-ghost-lg:hover { border-color: var(--money); color: var(--money); }

/* "Made for Premiere Pro" trust badge (compatibility = removes friction) */
.made-for { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; margin-top: 20px; padding: 7px 14px 7px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255,255,255,0.03); font-size: 0.84rem; font-weight: 500; color: var(--muted); }
.made-for .pr-logo { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; }
.hero .made-for { margin-top: 24px; }
.buybox .made-for { margin-top: 0; }
/* second subtitle line — emphasised with a green gradient + soft glow */
.lead-accent { display: block; margin-top: 8px; font-weight: 600; color: var(--text); }
.trust { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; align-items: center; font-size: 0.92rem; color: var(--muted); }
.trust strong { color: var(--text); }
.stars { color: var(--gold); letter-spacing: 2px; }
.dot { color: var(--faint); }

/* ---------- 7. Sections ---------- */
.section { padding-block: clamp(40px, 6vw, 72px); }
/* ---- tabela porownawcza (12.09.2026) ----
   Trzy kolumny odpowiadaja na pytanie „czym to sie rozni od tego, co robie
   teraz". Nasza kolumna jest jedyna podswietlona i ma zielona ramke na calej
   wysokosci, zeby wzrok jechal po niej z gory na dol, a nie skakal po wierszach.
   Na waskim ekranie tabela przewija sie w poziomie w swoim wlasnym pudelku,
   bo zwijanie jej w karty gubi to, co jest cala jej trescia: porownanie. */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--surface); -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; border-collapse: collapse; text-align: left; }
.cmp th, .cmp td { padding: 14px 16px; vertical-align: middle; font-size: 0.95rem; line-height: 1.35;
  border-bottom: 1px solid var(--line); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--text);
  padding-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.cmp-corner { font-family: var(--font-mono) !important; font-weight: 600 !important;
  font-size: 0.74rem !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint) !important; }
.cmp tbody th { font-weight: 600; color: var(--text); width: 30%; }
.cmp td { color: var(--muted); }
/* nasza kolumna */
.cmp .cmp-us { background: linear-gradient(180deg, rgba(var(--money-rgb),0.13), rgba(var(--money-rgb),0.05));
  color: var(--text); box-shadow: inset 1px 0 0 rgba(var(--money-rgb),0.32), inset -1px 0 0 rgba(var(--money-rgb),0.32); }
.cmp thead .cmp-us { color: var(--money); box-shadow: inset 1px 0 0 rgba(var(--money-rgb),0.32),
  inset -1px 0 0 rgba(var(--money-rgb),0.32), inset 0 1px 0 rgba(var(--money-rgb),0.32); }
.cmp tbody tr:last-child .cmp-us { box-shadow: inset 1px 0 0 rgba(var(--money-rgb),0.32),
  inset -1px 0 0 rgba(var(--money-rgb),0.32), inset 0 -1px 0 rgba(var(--money-rgb),0.32); }
.cmp .cmp-strong { font-weight: 700; }
.cmp-note { margin-top: 14px; text-align: center; font-size: 0.88rem; color: var(--faint); }
/* Telefon jest tu glownym ekranem, nie wyjatkiem: wiekszosc ruchu przychodzi
   z rolek. Tabela ma sie zmiescic bez przewijania w bok, wiec komorki sa
   krotkie, a na najwezszych ekranach schodzi padding i wielkosc pisma. */
/* 12.09.2026: na telefonie tabela dalej wychodzila poza ekran i trzeba ja bylo
   przewijac w bok. Trzy rzeczy naraz: staly podzial kolumn (`table-layout:
   fixed`, wiec najdluzsze slowo nie rozpycha juz calej tabeli), lamanie dlugich
   slow i krotsze teksty w samych komorkach. Przewijanie zostaje jako siatka
   bezpieczenstwa, ale nie powinno sie wlaczac. */
@media (max-width: 700px) {
  .cmp { table-layout: fixed; }
  .cmp th, .cmp td { padding: 11px 8px; font-size: 0.84rem;
    overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
  .cmp tbody th { width: 27%; }
  .cmp thead th { font-size: 0.86rem; }
  .cmp-note { font-size: 0.82rem; }
}
@media (max-width: 400px) {
  .cmp th, .cmp td { padding: 10px 6px; font-size: 0.78rem; }
  .cmp tbody th { width: 25%; }
}

/* ---- telefon: tabela przestaje byc tabela (12.09.2026) ----
   Maciek: „na telefonie nie widac calej naraz, mozna ja przesuwac w bok".
   Zwezanie komorek tego nie rozwiazalo, bo tabela z trzema kolumnami ma swoja
   minimalna szerokosc i przy 390 px zawsze cos wystaje. Wiec ponizej 620 px
   kazdy wiersz staje sie blokiem: nazwa u gory, a pod nia dwie wartosci obok
   siebie. Naglowek („FlowCut" / „Abonament") zostaje na samej gorze jako pasek,
   zeby bylo wiadomo, ktora kolumna jest czyja. Przewijanie w bok jest wylaczone
   calkowicie — nie ma juz czego przewijac. */
@media (max-width: 620px) {
  .cmp-wrap { overflow-x: visible; }
  .cmp, .cmp thead, .cmp tbody, .cmp tr { display: block; }
  /* `minmax(0, 1fr)`, nie `1fr`. To jest cala przyczyna tego, ze prawa kolumna
     uciekala poza ekran (12.09.2026): domyslne `1fr` znaczy „co najmniej tyle,
     ile wynosi najwezsza mozliwa tresc", wiec „Minutes a month" rozpychalo
     kolumne ponad polowe szerokosci i wiersz wychodzil poza tabele. */
  .cmp tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 8px; padding: 12px; }
  .cmp th, .cmp td { padding: 0; border: 0; width: auto; min-width: 0;
    overflow-wrap: anywhere; }
  .cmp thead tr { padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
  .cmp thead .cmp-corner { display: none; }
  .cmp thead th { font-size: 0.88rem; padding: 0 10px; }
  .cmp tbody tr + tr { border-top: 1px solid var(--line); }
  /* Nazwa wiersza stoi nad OBIEMA kolumnami, wiec nalezy do nich obu — po
     lewej wygladala jak podpis tylko naszej kolumny (12.09.2026, uwaga Maćka). */
  /* `width: auto` jest tu konieczne: regula dla szerszych telefonow daje
     `width: 27%` i wygrywa na punkty, przez co etykieta miala 77 px i „AFTER A
     YEAR" lamalo sie na dwie linie posrodku pustego wiersza. */
  .cmp tbody th { grid-column: 1 / -1; width: auto; font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
    text-align: center; }
  .cmp tbody td { padding: 9px 10px; border-radius: 9px; font-size: 0.86rem;
    line-height: 1.3; background: rgba(255, 255, 255, 0.03); }
  .cmp tbody .cmp-us { box-shadow: none; border: 1px solid rgba(var(--money-rgb), 0.36); }
  .cmp tbody tr:last-child .cmp-us, .cmp thead .cmp-us { box-shadow: none; }
}

/* ---- naglowki sekcji na stronie glownej (11.09.2026) ----
   Prosba Maćka: „cala strona ma byc taka saasowa". Wiec nagłówki przestaja byc
   linijka rozciagnieta miedzy lewa i prawa krawedzia, a staja sie srodkowym
   blokiem: plakietka, duzy tytul, jedno zdanie pod nim. Tylko strona glowna
   (.home) — sklep i podstrony zostaja przy ukladzie od lewej, bo tam naglowek
   jest etykieta listy, nie otwarciem rozdzialu. */
.home .section-head { flex-direction: column; align-items: center; text-align: center;
  gap: 14px; margin-bottom: 38px; }
/* 12.09.2026: numery sekcji („01 TRIAL", „02 SCREENS") zdjete ze strony
   glownej. Numerowanie ma sens, kiedy kolejnosc cos znaczy, a tutaj byly tylko
   ozdoba. Na /affiliate zostaja: tam numery prowadza przez trzy kroki programu
   partnerskiego i naprawde sa kolejnoscia. */
.home .section-head h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); text-wrap: balance;
  letter-spacing: -0.025em;
  /* lekki spad jasnosci w literach: tyle wystarczy, zeby tytul mial glebie,
     a nie tyle, zeby stracil kontrast */
  background-image: linear-gradient(180deg, #ffffff 15%, #b7bec6 115%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.home .section-tag { max-width: 52ch; font-family: var(--font-body); font-size: 1rem;
  line-height: 1.55; }
@media (max-width: 700px) {
  .home .section-head { gap: 11px; margin-bottom: 28px; }
  .home .section-tag { font-size: 0.94rem; }
}

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 30px; }
/* numbered category label — same vernacular as FlowCut's own UI ("1 BRIGHT", "SAAS") */
.sec-num { flex-basis: 100%; font-family: var(--font-body); font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); }
.section-tag { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.section-tag strong { color: var(--money); }

/* ---------- 8. Kafel darmowej paczki + grafika kafelkow ---------- */
/* Cala polka sklepowa (`.featured-grid`, `.feat-*`, `.buy-row`, dwa badge'e
   i `.save-badge`) zeszla stad 9.09.2026 razem z sekcja, ktora ja nosila:
   strona zaczyna sie teraz od tego, JAK DZIALA TRIAL, a cena ma wlasna karte
   nizej. Zostaly rzeczy, ktore dalej maja swoj markup: kafel darmowej paczki,
   tla `.art-*` (app.js sklada nazwe klasy w locie) i zwykly `.badge`. */
/* the plugin = the hero of the row: bigger, brighter, money-glow border */
.feat-lg .feat-art .art-tag { font-size: clamp(2.1rem, 4.6vw, 3rem); }
@media (max-width: 980px) { .free-card { grid-column: 1 / -1; } }

.art-flowcut { background: radial-gradient(120% 120% at 30% 12%, rgba(var(--money-rgb),0.22), transparent 58%), radial-gradient(100% 100% at 85% 90%, rgba(var(--accent-rgb),0.16), transparent 60%), linear-gradient(135deg, #15161a, #0d0e11); }
.art-bundle { background: radial-gradient(120% 120% at 70% 12%, rgba(var(--money-rgb),0.30), transparent 58%), radial-gradient(100% 100% at 12% 90%, rgba(var(--accent-rgb),0.16), transparent 60%), linear-gradient(135deg, #141816, #0d0e11); }
.art-tag { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: 0.02em;
  background: linear-gradient(120deg, #ffffff, #9af3c2 65%, var(--money));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.art-sub { font-family: var(--font-mono); font-size: 0.78rem; color: var(--faint); }
.badge { position: absolute; top: 38px; left: 14px; z-index: 2; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; padding: 4px 9px; border-radius: 7px; letter-spacing: 0.02em; } /* below the window-chrome bar */
.badge-free { position: static; display: inline-block; align-self: flex-start; background: rgba(var(--money-rgb),0.14); color: var(--money); border: 1px solid rgba(var(--money-rgb),0.35); margin-bottom: 4px; }

.kind { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }
.price { display: flex; align-items: baseline; gap: 8px; }
.price { flex-wrap: wrap; }
.price .now { font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; }
.price .was { font-size: 1.35rem; font-weight: 600; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }

/* Free hook card */
.free-card { position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(var(--money-rgb),0.07), var(--surface) 55%); border: 1px solid rgba(var(--money-rgb),0.28); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s; }
.free-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); background: radial-gradient(420px 240px at 50% 0%, rgba(var(--money-rgb),0.22), transparent 70%); }
.free-card:hover { transform: translateY(-5px); border-color: rgba(var(--money-rgb),0.45); box-shadow: 0 20px 48px rgba(0,0,0,0.45); }
.free-card:hover::after { opacity: 1; }
.free-glow { display: none; }
.free-card h3 { font-size: 1.35rem; }
.free-card p { font-size: 0.92rem; }
.free-list { display: flex; flex-direction: column; gap: 5px; margin: 2px 0 4px; }
.free-list li { font-size: 0.86rem; color: var(--muted); padding-left: 20px; position: relative; }
.free-list li::before { content: "✓"; position: absolute; left: 0; color: var(--money); font-weight: 700; }

/* ---------- 9. Buttons ---------- */
.btn { font-family: var(--font-head); font-weight: 600; font-size: 0.92rem; padding: 10px 16px; border-radius: 10px; transition: transform .15s, filter .2s, background .2s, box-shadow .2s; white-space: nowrap; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--money); color: #042b18; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 6px 20px rgba(0,0,0,0.45); }
.btn-free { background: var(--money); color: #042b18; margin-top: auto; align-self: flex-start; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.btn-free:hover { filter: brightness(1.08); box-shadow: 0 6px 20px rgba(0,0,0,0.45); }
.btn-block { width: 100%; padding: 13px; }
.btn.added { background: #1f7a55; color: #fff; }

/* ---------- 10. Filters ---------- */
.filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 22px; }
.chip { font-family: var(--font-mono); font-size: 0.84rem; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); transition: all .2s; }
.chip:hover { border-color: var(--money); color: var(--text); }
.chip.active { background: rgba(var(--money-rgb),0.14); border-color: rgba(var(--money-rgb),0.5); color: var(--money); }

/* ---------- 11. Product grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
/* Lekko mniejsze kafelki w sekcji z darmowymi paczkami (11.09.2026, Maciek:
   „kolejne tutaj mniejsze lekko"). Nie sa juz towarem do kupienia, tylko spisem
   tego, co siedzi w jednym pliku, wiec nie musza wazyc tyle co karta produktu. */
#products .grid { gap: 14px; }
#products .card-media { aspect-ratio: 16/8.6; }
#products .card-body { padding: 14px 15px 15px; gap: 7px; }
#products .card-body h4 { font-size: 1rem; }
#products .card-count { font-size: 0.78rem; }
#products .pdesc { font-size: 0.86rem; }
#products .card-foot .pprice { font-size: 1.15rem; }
#products .card-btns .btn { padding: 9px 14px; font-size: 0.88rem; }
/* five single packs: give them their own row rather than leaving one stranded */
@media (min-width: 1180px) { .grid { grid-template-columns: repeat(5, 1fr); } .grid .card-wide { grid-column: 1 / -1; } }
@media (min-width: 700px) and (max-width: 1179px) { .grid { grid-template-columns: repeat(3, 1fr); } .grid .card-wide { grid-column: 1 / -1; } }
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: transform .22s var(--ease), border-color .22s, box-shadow .22s; }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); background: radial-gradient(380px 200px at 50% 0%, rgba(var(--money-rgb),0.18), transparent 70%); }
.card:hover { transform: translateY(-5px); border-color: rgba(var(--money-rgb),0.45); box-shadow: 0 18px 42px rgba(0,0,0,0.45); }
.card:hover::after { opacity: 1; }
.card-media { aspect-ratio: 16/10; position: relative; display: grid; place-items: center; background: linear-gradient(135deg, #16121f, #0c0c14); }
.card-media .ptag { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.03em; color: rgba(255,255,255,0.85); opacity: 0.85; }
.card-media .ptype { position: absolute; top: 36px; left: 12px; font-family: var(--font-body); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); background: rgba(255,255,255,0.06); border: 1px solid var(--line-2); padding: 2px 7px; border-radius: 6px; }
.card-body { padding: 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-body h4 { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; }
/* The product title is a real link — that is how a crawler, a middle-click and
   a "copy link address" all reach /plugin. The card was a <div role="button">
   before, which none of the three can use. It must not LOOK like a link: the
   whole card has been clickable all along and an underlined blue title inside a
   clickable card reads as two different targets. The focus ring stays, because
   keyboard users do need to see where they are. */
.card-link, .cw-text h4 .card-link { color: inherit; text-decoration: none; }
.card-link:focus-visible { outline: 2px solid var(--money); outline-offset: 3px; border-radius: 3px; }
.card-body .pdesc { font-size: 0.84rem; color: var(--muted); flex: 1; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.card-foot { flex-wrap: wrap; }
.card-foot .pprice { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; display: inline-flex; align-items: baseline; }
.btn-add { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--money); color: var(--money); transition: all .18s; }
.btn-add:hover { background: var(--money); color: #fff; }
.btn-add.added { background: #1f7a55; border-color: #1f7a55; color: #fff; }
.no-results { text-align: center; color: var(--muted); padding: 30px; }

/* Asset Bundle — full-width highlighted feature under the singles */
.card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 300px 1fr; align-items: stretch; border-color: rgba(var(--money-rgb),0.42); box-shadow: 0 14px 40px rgba(0,0,0,0.4); margin-top: 4px; }
.cw-media { position: relative; min-height: 168px; display: grid; place-items: center; }
.cw-media .ptype { position: absolute; top: 38px; left: 14px; font-family: var(--font-body); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); background: rgba(255,255,255,0.06); border: 1px solid var(--line-2); padding: 2px 7px; border-radius: 6px; }
.cw-media .ptag { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.9rem, 3.5vw, 2.7rem); color: rgba(255,255,255,0.88); }
/* Sits on the artwork, low and left, clear of the window-chrome strip and of
   the packs themselves. Dark glass rather than another solid green pill: the
   badge underneath already makes the claim, this one is the evidence, and two
   identical green shapes stacked would read as one repeated shout. */
.cw-over { position: absolute; left: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; color: var(--text);
  background: rgba(8, 10, 9, 0.72); border: 1px solid rgba(var(--money-rgb), 0.45);
  border-radius: 999px; padding: 7px 14px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45); }
.cw-over b, .cw-over strong { color: var(--money); }

.cw-body { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 26px; flex-wrap: wrap; }
.cw-text { max-width: 48ch; }
.cw-badge { display: inline-block; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #042b18; background: var(--money); padding: 4px 11px; border-radius: 999px; margin-bottom: 10px; }
.cw-text h4 { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; margin-bottom: 6px; }
.cw-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.cw-price { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cw-price .pprice { font-family: var(--font-head); font-weight: 700; font-size: 1.9rem; }
.cw-price s { font-size: 1.4rem; font-weight: 600; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.cw-buy .btn-add { font-size: 0.95rem; padding: 12px 24px; }
@media (max-width: 700px) { .card-wide { grid-template-columns: 1fr; } .cw-body { justify-content: flex-start; } .cw-buy { align-items: stretch; width: 100%; } .cw-price { justify-content: flex-start; } }

/* ---------- 12. Reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.review:hover { transform: translateY(-3px); border-color: rgba(var(--money-rgb),0.35); box-shadow: 0 14px 36px rgba(0,0,0,0.4); }
.review blockquote { color: var(--text); font-size: 0.98rem; line-height: 1.55; }
.review figcaption { font-size: 0.84rem; color: var(--muted); }
.review figcaption span { color: var(--money); }
.review-placeholder { border-style: dashed; opacity: 0.7; }
.review-placeholder blockquote { color: var(--muted); font-style: italic; }

/* ---------- 13. Coming soon ---------- */
.soon { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.soon-badge { display: inline-block; font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #042b18; background: var(--money); padding: 5px 12px; border-radius: 999px; }
.soon-title { margin: 12px 0 8px; }
.soon p { max-width: 46ch; }
.soon-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.soon-pill { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: color .2s, border-color .2s; }
.soon-pill:hover { color: var(--money); border-color: rgba(var(--money-rgb),0.5); }
/* Karta dla tworcow (13.09.2026): ten sam kafel co "More coming", tylko
   z przyciskiem zamiast pigulek i z zielona linia, bo to jest cos do zrobienia,
   a nie zapowiedz. */
.affil-band { border-color: rgba(var(--money-rgb),0.32); }
.affil-band .btn-cta { flex-shrink: 0; }

/* ---------- 14. Footer ---------- */
.footer { border-top: 1px solid var(--line); margin-top: 30px; background: var(--bg-2); }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-block: 34px; flex-wrap: wrap; }
.footer-note { font-size: 0.88rem; margin-top: 10px; max-width: 40ch; }
.ig-foot { font-size: 0.95rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 28px; font-size: 0.82rem; color: var(--faint); border-top: 1px solid var(--line); padding-top: 18px; }
/* Quiet enough to ignore, findable when you need to know which build a phone is
   actually running. */
.build { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; }
.pay { display: inline-flex; align-items: center; gap: 7px; }
.pay-stripe { height: 16px; width: auto; opacity: 0.85; }

/* ---------- 15. Cart drawer ---------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); z-index: 90; opacity: 0; transition: opacity .25s; }
.drawer-overlay.show { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(400px, 92vw); background: var(--bg-2); border-left: 1px solid var(--line-2); z-index: 100; transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column; }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer-close { font-size: 1.1rem; color: var(--muted); width: 32px; height: 32px; border-radius: 8px; }
.drawer-close:hover { background: var(--surface); color: var(--text); }
.drawer-items { flex: 1; overflow-y: auto; padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.drawer-empty { color: var(--faint); text-align: center; padding: 40px 0; }
.di { display: flex; gap: 12px; align-items: center; }
.di-thumb { width: 46px; height: 46px; border-radius: 8px; flex-shrink: 0; display: block;
  object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); }
.di-thumb-blank { background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
.di-info { flex: 1; min-width: 0; }
.di-title { font-size: 0.92rem; font-weight: 600; }
.di-price { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); }
.di-remove { color: var(--faint); font-size: 0.8rem; }
.di-remove:hover { color: #ff6b6b; }
.drawer-foot { border-top: 1px solid var(--line); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.drawer-total { display: flex; justify-content: space-between; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; }
.drawer-fine { font-size: 0.76rem; color: var(--faint); text-align: center; }

/* ---------- 16. Card extras (discount + crossed price) ---------- */
.poff { position: absolute; top: 10px; right: 10px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: #06281a; background: var(--money); padding: 2px 7px; border-radius: 6px; }
.card-foot .pprice s { color: var(--muted); font-size: 1.15rem; font-weight: 600; text-decoration-thickness: 2px; margin-left: 6px; }

/* ---------- 17. Buttons: ghost ---------- */
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); }
.btn-ghost:hover { border-color: var(--money); background: var(--surface-2); }

/* ---------- 18. PRODUCT PAGE ---------- */
.product-page { padding-block: clamp(20px, 3vw, 36px) clamp(40px, 6vw, 72px); }
.pp-crumb { font-family: var(--font-mono); font-size: 0.8rem; color: var(--faint); margin-bottom: 22px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pp-crumb a { color: var(--muted); }
.pp-crumb a:hover { color: var(--money); text-decoration: underline; }
.pp-crumb strong { color: var(--text); }

.pp-grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(20px, 3.5vw, 40px); align-items: start; }
@media (max-width: 880px) { .pp-grid { grid-template-columns: 1fr; }
  .buybox { position: static; }
}
/* on a genuinely short window the box would pin with its button off screen —
   better to let it scroll away with the page than to clip the buy button */
@media (max-height: 760px) { .buybox { position: static; } }

/* left: preview + included */
.pp-left { display: flex; flex-direction: column; gap: 16px; }
/* Telefon: karta kupna wchodzi ZARAZ POD PODGLAD, przed „What's included"
   i przed lista wszystkiego, co wtyczka robi (27.08.2026, uwaga Macka).
   Bylo: podglad → co jest w srodku → ~25 pozycji listy funkcji → dopiero cena,
   nazwa produktu i przyciski. Czyli kupujacy na telefonie przewijal caly
   katalog funkcji, zanim w ogole zobaczyl, ile to kosztuje i jak sie nazywa
   (`h1` siedzi w karcie kupna). Kolejnosc jest teraz taka jak w kazdym sklepie:
   zdjecie → cena i przycisk → szczegoly dla tych, ktorzy chca czytac dalej.

   `display: contents` zamiast przenoszenia elementow w markupie: dzieki temu
   dzieci `.pp-left` staja sie na telefonie zwyklymi elementami siatki i mozna
   im nadac kolejnosc, a na desktopie nie zmienia sie ani jedna linijka. */
@media (max-width: 880px) {
  .pp-left { display: contents; }
  /* 12.09.2026, Maciek: „na telefonie od razu start free trial, potem
     3-stopniowa instrukcja, a miedzy nimi film". Karta kupna idzie wiec na sam
     gore, przed podglad. `.pp-trial` nie mial tu wczesniej zadnego numeru,
     czyli lapal domyslne 0 i ladowal PRZED wszystkim — instrukcja instalacji
     byla pierwsza rzecza na stronie produktu. */
  .buybox      { order: 1; position: static; }
  .pp-media    { order: 2; }
  .pp-trial    { order: 3; }
  .pp-includes { order: 4; }
  .value-stack { order: 5; }
  .pp-features { order: 6; }

  /* Karta kupna miala na telefonie 730 px, czyli caly ekran — „What's included"
     zaczynalo sie dopiero na 1127 px i nikt go nie widzial. Ponizej same
     drobiazgi, ale razem to okolo 200 px: znaczek „Made for Premiere Pro"
     (mowi to samo, co zdanie nad nim), przyciski obok siebie zamiast jeden pod
     drugim, ciasniejszy rytm i mniejsze linie zaufania. Nic nie znika z tresci
     poza znaczkiem. */
  .buybox { gap: 7px; }
  .buybox .made-for { display: none; }
  .buybox .bx-actions { flex-direction: row; }
  .buybox .bx-actions .btn-cta { flex: 1; padding: 13px 8px; }
  /* Wyjatek: karta z trialem. Dwa przyciski PLUS zdanie o braku karty nie
     mieszcza sie w rzedzie na telefonie — 12.09.2026 kazdy przycisk mial tam
     jedno slowo na linie. Kolumna, pelna szerokosc, zdanie pod spodem. */
  .buybox .bx-actions-trial { flex-direction: column; }
  .buybox .bx-actions-trial .btn-cta { flex: none; width: 100%; padding: 14px 16px; }
  .buybox .bx-actions-trial .bx-nocard { justify-content: flex-start; }
  .buybox .bx-trust { gap: 2px 12px; padding-top: 8px; }
  .buybox .bx-trust li { font-size: 0.74rem; }

  /* Lista funkcji: 2247 px to ponad trzy ekrany i FAQ ladowalo na 3653 px.
     Pokazujemy poczatek, reszta na klikniecie. Maska zamiast twardego ciecia,
     zeby bylo widac, ze cos jest dalej. */
  .spec-sheet.is-clamped { max-height: 300px; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
  .spec-more { display: block; width: 100%; margin-top: 14px; padding: 12px;
    font-family: var(--font-head); font-weight: 600; font-size: 0.92rem;
    color: var(--money); background: rgba(var(--money-rgb),0.08);
    border: 1px solid rgba(var(--money-rgb),0.32); border-radius: 12px; }
  .spec-more:active { transform: scale(0.985); }
}
/* Na desktopie lista jest cala i przycisk jest niepotrzebny. Musi to byc
   `min-width`, a nie zwykla regula po media query: przy tej samej wadze
   pozniejsza wygrywa, wiec goly `.spec-more { display: none }` gasil takze
   wersje telefonowa — przycisk nie pokazywal sie nigdzie, a lista zostawala
   przycieta bez sposobu na rozwiniecie. */
@media (min-width: 881px) { .spec-more { display: none; } }
.pp-media { position: relative; aspect-ratio: 16/11; border-radius: var(--radius); border: 1px solid var(--line-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; }
.pp-media .art-tag { font-size: clamp(2rem, 5vw, 3.4rem); }
.pp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pp-thumbs .th { aspect-ratio: 1; border-radius: var(--radius-sm); border: 1px solid var(--line); background: linear-gradient(135deg, #16121f, #0c0c14); }
.pp-includes { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid rgba(var(--money-rgb),0.22); border-radius: var(--radius); padding: 18px 20px; }
.pp-includes::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--money), #7af0b0, transparent); }
.pp-includes h4 { font-family: var(--font-head); font-size: 1rem; margin-bottom: 12px; }
.pp-includes ul { display: grid; gap: 9px; }
.pp-includes li { font-size: 0.92rem; color: var(--text); padding-left: 26px; position: relative; }
.pp-includes li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--money); font-weight: 800; }
.pp-includes li.bx-bonus { font-weight: 700; color: var(--cta2); }
.pp-includes li.bx-bonus::before { content: "★"; color: var(--cta2); }

/* right: the buy box (the conversion engine) */
/* The buy box rides along while the left column scrolls, so the price and the
   button are never off screen. It stops on its own at the end of .pp-grid —
   which is the bottom of "Everything FlowCut does" — and the FAQ below gets the
   page to itself. If the box is taller than the window it scrolls inside. */
/* BLAD, KTORY ZYL TU OD POCZATKU (znaleziony 27.08.2026 pomiarem w przegladarce,
   nie okiem): ponizej sa DWIE reguly `position: static` dla telefonu — w linii
   ~540 i w bloku telefonowym — ale obie stoja PRZED ta deklaracja. Przy takiej
   samej wadze wygrywa pozniejsza, wiec na telefonie karta kupna byla `sticky`
   i przyklejala sie do gory ekranu na cala dlugosc strony produktu, zaslaniajac
   „What's included" i liste funkcji. Dlatego wylacznik jest TERAZ pod spodem,
   a nie nad. Dodajac cokolwiek do `.buybox`, dopisuj to POWYZEJ tamtego bloku. */
.buybox { position: sticky; top: calc(var(--header-h) + 12px); align-self: start; background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid rgba(var(--money-rgb),0.22); border-radius: 18px; padding: clamp(20px, 3vw, 28px); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.buybox > * { flex-shrink: 0; }
/* Tighter rhythm inside the box: at 125% Windows scaling a 1080p laptop gives
   about 780 CSS px of window, and the whole box — down to "Buy now" and the
   trust lines — has to fit inside that or sticky is pointless. */
.buybox { gap: 9px; padding: clamp(16px, 2vw, 19px); }
.buybox .bx-title { font-size: clamp(1.35rem, 2.4vw, 1.65rem); }
.buybox .made-for { margin-top: 2px; padding: 5px 12px 5px 7px; font-size: 0.8rem; }
.buybox .made-for .pr-logo { width: 19px; height: 19px; }
.buybox .bx-checklist { gap: 7px; margin: 0; }
/* 12.09.2026: przy trialu cena zeszla POD przycisk i stoi razem z „Kup teraz"
   w jednym, cichszym pudelku. Przycisk triala ma byc jedyna rzecza, ktora
   krzyczy; kto chce kupic od razu, i tak tu zajrzy. */
.bx-buy { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px; }
.bx-buy .pricebox { margin: 0; }
.bx-buy .btn-checkout { width: 100%; }
.buybox .pricebox { margin-top: 0; padding: 12px 15px; }
.buybox .pb-now { font-size: clamp(2rem, 4vw, 2.5rem); }
.buybox .pb-was { font-size: 1.3rem; }
.buybox .pb-anchor { margin-top: 5px; font-size: 0.9rem; }
.buybox .btn-cta { padding: 13px; font-size: 1rem; }
.buybox .bx-actions { gap: 8px; margin-top: 0; }
/* three trust lines on one wrapped row instead of three stacked ones */
.buybox .bx-trust { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; padding-top: 10px; }
.buybox .bx-trust li { font-size: 0.78rem; }
/* Telefon: karta stoi w tekscie i nie jedzie za nikim. Ta regula MUSI byc
   pozniejsza niz `position: sticky` wyzej — patrz komentarz przy tamtej. */
@media (max-width: 880px) { .buybox { position: static; } }
.buybox::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--money), #7af0b0, var(--money), transparent); }
.bx-flag { align-self: flex-start; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--money); border: 1px solid rgba(var(--money-rgb),0.4); background: rgba(var(--money-rgb),0.10); padding: 5px 11px; border-radius: 999px; }
.bx-title { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; }
.bx-sub { font-size: 0.95rem; color: var(--muted); margin-top: -4px; }

.bx-rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; color: var(--muted); }
.bx-excellent { font-weight: 700; color: var(--money); }
.bx-rating .stars { color: var(--gold); letter-spacing: 1px; }
.bx-rating strong { color: var(--text); }
.bx-rating a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.bx-rating a:hover { color: var(--money); }

.bx-checklist { display: grid; gap: 9px; margin: 2px 0; }
.bx-checklist li { font-size: 0.94rem; color: var(--text); padding-left: 26px; position: relative; }
.bx-checklist li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--money); font-weight: 800; }
/* bonus lines — stand out: bold, warm gradient, soft glow */
.bx-checklist li.bx-bonus { font-weight: 700; letter-spacing: -0.01em;
  color: var(--cta2); }
.bx-checklist li.bx-bonus::before { content: "★"; color: var(--cta2); -webkit-text-fill-color: var(--cta2); }

/* price — calm, confident panel (green kept for the number itself) */
.pricebox { position: relative; margin-top: 4px; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 5px; overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(var(--money-rgb),0.35); }
.pb-row { display: flex; align-items: baseline; gap: 10px; }
.pb-now { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; letter-spacing: -0.02em; color: #6fe2a4; }
.pb-was { font-size: 1.5rem; font-weight: 600; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.pb-save { font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #042b18; background: var(--money); padding: 4px 9px; border-radius: 999px; }
.pb-note { font-size: 0.86rem; color: var(--muted); }
.pb-note strong { color: #cdeedd; font-weight: 600; }
.pricebox-free .pb-now { color: #6fe2a4; }

.bx-meta { display: flex; }
.bx-pill { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 10px; padding: 8px 12px; width: 100%; text-align: center; }

.bx-countdown { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--line); }
.bx-cd-label { font-size: 0.78rem; color: var(--muted); }
.bx-cd { font-family: var(--font-mono); font-weight: 600; color: var(--text); letter-spacing: 0.04em; }
.bx-cd b { background: rgba(var(--money-rgb),0.14); color: var(--money); border: 1px solid rgba(var(--money-rgb),0.3); padding: 2px 6px; border-radius: 6px; }

/* free gift stack */
.freebies { border: 1px solid var(--line-2); border-radius: 14px; padding: 14px; background: rgba(255,255,255,0.015); display: flex; flex-direction: column; gap: 10px; }
.fb-head { font-size: 0.84rem; color: var(--muted); }
.fb-head strong { color: var(--money); }
.freebie { display: flex; align-items: center; gap: 12px; }
.fb-thumb { width: 44px; height: 44px; border-radius: 9px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; color: var(--money); background: rgba(var(--money-rgb),0.12); border: 1px solid rgba(var(--money-rgb),0.3); flex-shrink: 0; }
.fb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fb-title { font-size: 0.9rem; font-weight: 600; }
.fb-note { font-size: 0.78rem; color: var(--faint); }
.fb-free { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--money); }

/* big CTAs */
.bx-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.btn-cta { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; padding: 15px; border-radius: 12px; transition: transform .15s, filter .2s, box-shadow .2s; letter-spacing: -0.01em; }
.btn-cta:active { transform: scale(0.985); }
.btn-buy { background: var(--money); color: #06281a; box-shadow: 0 4px 18px rgba(0,0,0,0.4); }
.btn-buy:hover { filter: brightness(1.1); }
.btn-buy.added { background: var(--money-2); color: #fff; }
.btn-checkout { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.btn-checkout:hover { border-color: var(--money); color: var(--money); }

.bx-trust { display: flex; flex-direction: column; gap: 7px; padding-top: 12px; border-top: 1px solid var(--line); }
.bx-trust li { font-size: 0.82rem; color: var(--muted); }
.bx-trust .bx-social { color: var(--money); font-weight: 600; }

/* ---------- 19. CHECKOUT PAGE ---------- */
.checkout-page { padding-block: clamp(20px, 3vw, 36px) clamp(40px, 6vw, 72px); }
.co-grid { display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(20px, 3.5vw, 40px); align-items: start; }
@media (max-width: 880px) { .co-grid { grid-template-columns: 1fr; } }

.co-summary h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.02em; margin-bottom: 18px; }
.co-items { display: flex; flex-direction: column; gap: 10px; }
.co-item { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
/* Was a flat green square: a placeholder that read as a broken image, and green
   is the money colour here, so it competed with the price for attention. The
   real product shot does the one job this slot has, which is letting somebody
   confirm at a glance that the right thing is in the cart. */
.co-thumb { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; display: block; background: var(--surface-2); border: 1px solid var(--line); }
.co-thumb-blank { background: linear-gradient(135deg, var(--surface-2), var(--surface)); }

/* The line you are about to pay twice for, and the way out of it. */
.co-item.is-dupe { border-color: rgba(201, 138, 60, 0.45); background: rgba(201, 138, 60, 0.07); }
.co-item.is-dupe .co-price { color: var(--cta2); text-decoration: line-through; text-decoration-color: rgba(201, 138, 60, 0.6); }

.co-dupe { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding: 16px 18px; border: 1px solid rgba(201, 138, 60, 0.4); border-radius: var(--radius-sm); background: rgba(201, 138, 60, 0.08); }
.co-dupe-text { margin: 0; font-size: 0.95rem; color: var(--text); }
.co-dupe-text strong { color: var(--cta2); font-weight: 600; }
.co-dupe-fix { font-weight: 700; font-size: 0.92rem; color: var(--bg); background: var(--cta2); border-radius: 9px; padding: 9px 16px; }
.co-dupe-fix:hover { background: var(--cta2-2); }
.co-name { font-weight: 600; }
.co-price { font-family: var(--font-head); font-weight: 700; }
.co-remove { color: var(--faint); font-size: 0.9rem; width: 26px; height: 26px; border-radius: 7px; }
.co-remove:hover { color: #ff6b6b; background: rgba(255,255,255,0.05); }
.co-totals { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.co-line { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.95rem; }
.co-grand { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--text); }

/* Stripe-styled pay panel — violet accent on the pay action */
.co-pay { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid rgba(99,91,255,0.28); border-radius: 18px; padding: clamp(20px, 3vw, 26px); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.co-pay::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--stripe), var(--stripe-2), var(--stripe), transparent); }
.co-pay-head { display: flex; align-items: center; justify-content: space-between; }
.co-pay-head > span:first-child { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; }
.co-stripe-logo { height: 26px; width: auto; display: block; }
.co-total-big { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; border-radius: 12px; background: linear-gradient(160deg, rgba(99,91,255,0.10), var(--surface)); border: 1px solid rgba(99,91,255,0.3); }
.co-total-big span { color: var(--muted); }
.co-total-big strong { font-family: var(--font-head); font-size: 1.7rem; color: var(--text); }
.co-pay .btn-cta { width: 100%; }
.btn-stripe { background: var(--stripe); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; gap: 7px; }
.btn-stripe:hover { filter: brightness(1.08); box-shadow: 0 6px 20px rgba(0,0,0,0.45); }
.btn-stripe-logo { height: 18px; width: auto; filter: brightness(0) invert(1); display: block; position: relative; top: 1px; }
.co-accepted { font-size: 0.8rem; color: var(--muted); text-align: center; line-height: 1.5; }
.co-wallets { font-size: 0.82rem; color: var(--muted); text-align: center; }
.co-methods { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.co-methods span { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line-2); border-radius: 6px; padding: 5px 10px; }
.co-secured { font-size: 0.78rem; color: var(--faint); text-align: center; }
.co-secured strong { color: var(--stripe-2); }

.co-empty { text-align: center; padding: clamp(40px, 8vw, 90px) 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.co-empty h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.co-empty .btn-cta { padding: 13px 26px; }

/* ---------- 20. COOKIE CONSENT ---------- */
.cookie { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 160%); z-index: 120; width: min(700px, calc(100% - 24px)); background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line-2); border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.55); transition: transform .35s var(--ease); flex-wrap: wrap; }
.cookie.show { transform: translate(-50%, 0); }
.cookie p { font-size: 0.86rem; color: var(--muted); flex: 1; min-width: 220px; line-height: 1.5; }
.cookie-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.cookie .btn-cta { padding: 10px 24px; font-size: 0.92rem; }
.cookie-decline { font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; color: var(--muted); padding: 9px 14px; border-radius: 9px; transition: color .2s, background .2s; }
.cookie-decline:hover { color: var(--text); background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { .cookie { transition: none; } }
/* Kolor zostaje, ruch znika — reakcja na klikniecie ma byc nadal widoczna. */
@media (prefers-reduced-motion: reduce) {
  .dl-list li a:active, .key-copy:active { transform: none; }
  .legal details.drop summary::after { transition: none; }
}

/* ---------- 21. Conversion additions ---------- */

/* hero + buy-box rating */
.hero-rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 0.95rem; color: var(--muted); }
.hero-rating .stars, .bx-rating .stars { color: var(--gold); letter-spacing: 1px; }
.hero-rating strong, .bx-rating strong { color: var(--text); }

/* value stack — itemized proof of the bundle's worth */
.value-stack { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; background: rgba(255,255,255,0.015); }
.vs-head { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); margin-bottom: 2px; }
.vs-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.92rem; color: var(--muted); }
.vs-row span:last-child { color: var(--text); font-variant-numeric: tabular-nums; }
.vs-total { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 3px; }
.vs-total span:first-child { color: var(--text); font-weight: 600; }
.vs-was { color: var(--muted) !important; text-decoration: line-through; text-decoration-thickness: 2px; font-weight: 600; }
.vs-today span:first-child { color: var(--money); font-weight: 700; }
.vs-now { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--money) !important; }

/* full-width product-card CTA */
.btn-cart-full { width: 100%; margin-top: 12px; font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; padding: 11px; border-radius: 10px; background: var(--money); color: #042b18; transition: filter .2s, box-shadow .2s; }
.btn-cart-full:hover { filter: brightness(1.08); box-shadow: 0 6px 22px rgba(var(--money-rgb),0.4); }
.btn-cart-full.added { background: var(--money-2); color: #fff; }

/* FAQ */
.faq { max-width: 760px; margin: clamp(36px,6vw,64px) auto 0; }
.faq h2 { font-size: clamp(1.5rem,3vw,2rem); margin-bottom: 18px; }
.faq details { border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; margin-bottom: 10px; background: var(--surface); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 600; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--money); font-size: 1.3rem; font-weight: 700; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding: 0 0 16px; font-size: 0.95rem; line-height: 1.6; }
.faq a { color: var(--money); text-decoration: underline; }

/* mobile sticky buy bar */
.mobile-buybar { display: none; }
@media (max-width: 880px) {
  .mobile-buybar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(12,12,18,0.92); backdrop-filter: blur(12px); border-top: 1px solid var(--line-2); }
  .mb-price { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; }
  .mb-price s { font-size: 1rem; color: var(--muted); font-weight: 600; }
  .mobile-buybar .btn-cta { padding: 12px 22px; font-size: 0.95rem; }
  /* Zjezdza w dol, kiedy prawdziwe przyciski sa na ekranie (patrz
     hideBarWhileBoxVisible w app.js). `visibility` razem z `transform`, zeby
     schowany pasek nie lapal dotkniec. */
  .mobile-buybar { transition: transform .28s var(--ease), visibility .28s; }
  .mobile-buybar.is-away { transform: translateY(105%); visibility: hidden; }
  .product-page { padding-bottom: 92px; }
}

/* email gate modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(3px); z-index: 130; opacity: 0; transition: opacity .25s; }
.modal-overlay.show { opacity: 1; }
.email-gate { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%); z-index: 140; width: min(440px, calc(100% - 32px)); background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line-2); border-radius: 18px; padding: 28px; opacity: 0; transition: opacity .25s, transform .25s var(--ease); box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.email-gate.open { opacity: 1; transform: translate(-50%, -50%); }
.gate-close { position: absolute; top: 14px; right: 14px; color: var(--muted); width: 30px; height: 30px; border-radius: 8px; font-size: 0.9rem; }
.gate-close:hover { background: var(--surface-2); color: var(--text); }
.email-gate h3 { font-size: 1.4rem; margin: 12px 0 8px; }
.email-gate > p { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
#gateForm { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
#gateEmail { background: var(--bg); border: 1px solid var(--line-2); color: var(--text); padding: 13px 14px; border-radius: 10px; font-size: 1rem; outline: none; transition: border-color .2s, box-shadow .2s; }
#gateEmail:focus { border-color: var(--money); box-shadow: 0 0 0 3px rgba(var(--money-rgb),0.16); }
#gateForm .btn-cta { width: 100%; }
.gate-fine { font-size: 0.76rem; color: var(--faint); text-align: center; margin-top: 10px; }
.gate-success { color: var(--money); font-weight: 600; text-align: center; margin-top: 14px; }
/* Dopchniecie drugiej rzeczy po udanym zapisie (9.09.2026). Oddzielone kreska,
   zeby czytalo sie jak dopisek, a nie jak kolejny krok, ktory trzeba wykonac —
   zapis juz sie udal i to musi zostac jasne. */
.gate-extra { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); text-align: center; }
.gate-extra .gx-head { font-weight: 700; color: var(--text); margin-bottom: 6px; }
.gate-extra .gx-note { font-size: 0.86rem; color: var(--faint); margin-bottom: 12px; }
/* ---- ekran z prezentem po starcie triala (12.09.2026) ----
   Pierwsza rzecz, ktora widzi ktos, kto wlasnie zostawil adres. Zielone pole,
   ikona paczki i cztery liczby: prezent ma byc policzalny, a nie mily. */
.gx-gift { margin-bottom: 16px; padding: 16px 16px 14px; border-radius: 12px;
  background: linear-gradient(160deg, rgba(var(--money-rgb),0.16), rgba(var(--money-rgb),0.05));
  border: 1px solid rgba(var(--money-rgb),0.4); text-align: center; }
.gx-gift-ico { width: 26px; height: 26px; color: var(--money); }
.gx-gift-head { margin-top: 6px; font-family: var(--font-head); font-weight: 700;
  font-size: 1.02rem; color: var(--text); line-height: 1.3; }
.gx-counts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px; margin: 11px 0 9px; padding: 0; }
.gx-counts li { padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,0.25);
  border: 1px solid rgba(var(--money-rgb),0.28); font-size: 0.78rem; color: var(--muted); }
.gx-counts strong { color: var(--money); font-weight: 700; }
.gx-gift .gx-note { margin-bottom: 0; }

/* Kroki instalacji w okienku po wyslaniu maila: numery sa wazniejsze niz
   tekst, bo czlowiek wraca tu wzrokiem miedzy jednym a drugim klikiem. */
.gx-steps { list-style: none; counter-reset: gx; display: grid; gap: 9px; margin: 0 0 12px; padding: 0; }
.gx-steps li { counter-increment: gx; position: relative; padding-left: 28px;
  font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.gx-steps li::before { content: counter(gx); position: absolute; left: 0; top: 1px;
  width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--money);
  background: rgba(var(--money-rgb),0.14); border: 1px solid rgba(var(--money-rgb),0.4); }
.gate-extra .gx-go { width: 100%; padding: 12px 20px; }
.gate-extra .gx-done { color: var(--money); font-weight: 600; }

/* footer legal links */
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; padding-bottom: 14px; }
.footer-legal a { font-size: 0.82rem; color: var(--muted); }
.footer-legal a:hover { color: var(--money); }

/* ---------- 22. Legal pages ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(36px,7vw,80px) var(--gutter); }
.legal .back { display: inline-block; margin-bottom: 22px; color: var(--muted); font-size: 0.86rem; }
.legal .back:hover { color: var(--money); }
.legal h1 { font-size: clamp(2rem,5vw,3rem); margin-bottom: 6px; }
.legal .legal-meta { color: var(--faint); font-size: 0.85rem; margin-bottom: 26px; }
.legal .note { background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 13px 16px; font-size: 0.84rem; color: var(--muted); margin-bottom: 26px; }
.legal h2 { font-size: 1.25rem; margin: 26px 0 10px; }
.legal p, .legal li { color: var(--muted); line-height: 1.7; }
/* the legal pages carry real prose now, and paragraphs ran into each other */
.legal p { margin-bottom: 12px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--text); }
.legal ul { padding-left: 20px; list-style: disc; margin: 8px 0; }
.legal a { color: var(--money); text-decoration: underline; }
/* Przycisk w tresci strony pomocy. `.legal a` jest bardziej szczegolowa regula
   niz `.btn-buy`, wiec wygrywala kolorem: napis na przycisku robil sie zielony
   na zielonym tle, czyli znikal. Na /install przycisk „See what it does" byl
   przez to pusta zielona plama. */
.legal a.btn-cta { text-decoration: none; }
.legal a.btn-buy { color: #06281a; }
.legal a.btn-ghost, .legal a.btn-ghost-lg { color: var(--text); }

/* Rzadki przypadek schowany pod klikniecie (27.08.2026, strona po zakupie).
   Wyglad zerzniety z FAQ celowo — ten sam gest ma wygladac tak samo — ale
   nie da sie tamtych regul uzyc wprost: siedza pod .faq, ktore zyje tylko na
   stronie glownej. Cel pod palec ma tu 46 px wysokosci. */
.legal details.drop { border: 1px solid var(--line); border-radius: 12px; padding: 0 18px;
  margin: 0 0 26px; background: var(--surface); }
.legal details.drop summary { list-style: none; cursor: pointer; padding: 15px 0; font-weight: 600;
  color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.legal details.drop summary::-webkit-details-marker { display: none; }
.legal details.drop summary::after { content: "+"; color: var(--money); font-size: 1.3rem;
  font-weight: 700; transition: transform .2s; }
.legal details.drop[open] summary::after { transform: rotate(45deg); }
.legal details.drop p { padding: 0 0 16px; margin: 0; font-size: 0.92rem; }

/* Kroki instalacji (27.08.2026). Numer w kolku zamiast kropki: kupujacy widzi
   od razu, ile ruchow przed nim, a to jedyne miejsce na stronie, gdzie tresc
   jest do wykonania, nie do przeczytania. */
.legal ol.steps { counter-reset: step; list-style: none; padding: 0; margin: 12px 0 16px; }
.legal ol.steps li { position: relative; counter-increment: step; padding-left: 40px; margin-bottom: 12px; }
.legal ol.steps li::before { content: counter(step); position: absolute; left: 0; top: 0;
  width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-head); font-size: 0.78rem; font-weight: 700; color: var(--money);
  background: rgba(var(--money-rgb),0.12); border: 1px solid rgba(var(--money-rgb),0.35); }

/* Waga pliku przy linku. `margin-left:auto` w flexie linku odsuwa ja do prawej
   krawedzi, wiec nazwa pliku i rozmiar nie zlepiaja sie na waskim ekranie. */
.dl-size { margin-left: auto; padding-left: 10px; color: var(--faint); font-size: 0.8rem;
  font-weight: 500; white-space: nowrap; }

@media (max-width: 760px) {
  .header-trust { display: none; }
  .ig span { display: none; }
  .header-inner { gap: 10px; justify-content: space-between; }
}

/* ---------- 23. Spec sheet (product pages) — editorial, no cards ---------- */
.pp-features { margin-top: 28px; }
.pp-features > h4 { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; }
.spec-sheet { margin-top: 14px; border-top: 1px solid var(--line-2); }
.spec-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 8px 22px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.spec-name { font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; color: var(--text); }
.spec-items { font-size: 0.93rem; color: var(--muted); line-height: 1.75; }
.spec-items .sep { font-style: normal; color: rgba(var(--accent-rgb),0.8); padding: 0 7px; }
@media (max-width: 620px) { .spec-row { grid-template-columns: 1fr; gap: 3px; } }

/* ---------- 24. Conversion elements (trust row, guarantee, urgency) ---------- */
/* hero trust row — replaces the fake rating with real, checkable facts */
/* ---- hero jako lista korzysci (25.08.2026, uwagi Daniela) ----
   Byl akapit tlumaczacy, czym jest wtyczka. Daniel: „nie mamy tam ksiazek
   pisac czy edukowac ludzi, ich interesuja tylko benefity, krotko zwiezle i
   na temat". Osiem punktow, kazdy jest funkcja, ktora naprawde istnieje. */
/* Dwie kolumny z PRZEPLYWU, nie z siatki (poprawka 25.08.2026).
   Siatka wyrownuje wiersze do najwyzszego elementu, wiec „Cuts the silence"
   obok dwulinijkowego „Customizable transcript in any language" dostawal pod
   soba pusta linijke — i tak co drugi punkt. Odstepy wygladaly na przypadkowe.
   W przeplywie kazdy punkt ma ten sam odstep pod soba niezaleznie od tego, czy
   zawija sie do dwoch linii; `break-inside: avoid` pilnuje, zeby zaden punkt
   nie pekl w polowie miedzy kolumnami. */
/* Bylo: columns: 2 na sztywno. Kolumna hero ma ~560 px, wiec po podziale
   zostawalo ~240 px na tekst — za malo dla „Customizable transcript in any
   language", ktory lamal sie na dwie linie i zostawial dziure obok trzeciego
   punktu. Teraz punkty ustawiaja sie same: dwa krotkie mieszcza sie obok
   siebie, dlugi bierze cala szerokosc i zostaje w jednej linii. Zadnej zmiany
   w tresci — a tresc jest tu kluczem tlumaczenia w i18n.js. */
.hero-list { list-style: none; padding: 0; margin: 24px 0 28px; max-width: 680px;
  display: flex; flex-wrap: wrap; column-gap: 30px; row-gap: 11px; }
.hero-list li { position: relative; padding-left: 24px;
  font-size: 1rem; line-height: 1.45; color: var(--text); }
.hero-list li::before { content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--money); font-weight: 700; }

/* Jedno zdanie, ktore mowi, po co to komus — Daniel chcial je po prawej,
   przy filmie, zeby bylo widac od gory „co to jest, dla kogo i po co". */

@media (max-width: 620px) { .hero-list { flex-direction: column; } }

.hero-trust { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; }
.hero-trust li { position: relative; padding-left: 24px; font-size: 0.92rem; font-weight: 500; color: var(--muted); }
.hero-trust li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.hero-under { margin-top: 14px; color: var(--faint); font-style: italic; font-family: var(--font-accent); font-size: 1rem; }

/* (legacy guarantee band — replaced by .guarantee-line) */
.legacy-guarantee-band-marker { display: none; }
/* guarantee band — risk reversal, the honest closer */
.guarantee {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "seal text" "seal points";
  gap: 10px 30px; align-items: center;
  background: linear-gradient(160deg, rgba(var(--money-rgb),0.09), var(--surface) 55%);
  border: 1px solid rgba(var(--money-rgb),0.30);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 44px);
}
.guarantee::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px 300px at 12% 30%, rgba(var(--money-rgb),0.14), transparent 70%); }
.g-seal {
  grid-area: seal; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 108px; height: 108px; border-radius: 50%;
  border: 2px dashed rgba(var(--money-rgb),0.55);
  background: rgba(var(--money-rgb),0.08);
  box-shadow: 0 8px 28px rgba(0,0,0,0.38);
}
.g-days { font-family: var(--font-head); font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--money); }
.g-lbl { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.g-text { grid-area: text; }
.g-text h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); letter-spacing: -0.01em; margin-bottom: 8px; }
.g-text p { max-width: 62ch; font-size: 0.95rem; }
.g-zero { color: var(--money); font-weight: 700; }
.g-points { grid-area: points; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.g-points span {
  font-size: 0.8rem; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 13px;
  background: rgba(255,255,255,0.03);
}
@media (max-width: 640px) {
  .guarantee { grid-template-columns: 1fr; grid-template-areas: "seal" "text" "points"; justify-items: start; }
}

/* buy-box urgency pill — real launch-price scarcity, live countdown */
.bx-urgency {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.86rem; font-weight: 600; color: var(--muted);
  border: 1px solid rgba(var(--accent-rgb),0.35); border-radius: 999px;
  padding: 6px 14px; margin: 2px 0 6px;
  background: rgba(var(--accent-rgb),0.07);
}
.bx-urgency .countdown-inline { color: var(--text); font-variant-numeric: tabular-nums; }

/* price-box anchor line — "price of one dinner" reframe */
.pb-anchor { display: block; margin-top: 7px; font-family: var(--font-accent); font-style: italic; font-size: 0.95rem; color: var(--faint); }

/* checkout guarantee — last-second anxiety killer next to the pay button */
.co-guarantee { margin-top: 12px; font-size: 0.85rem; color: var(--muted); line-height: 1.55;
  border-top: 1px solid var(--line); padding-top: 12px; }
.co-guarantee strong { color: var(--money); }

/* System operacyjny poza FAQ (28.08.2026). To ograniczenie, a nie zaleta, wiec
   nie krzyczy kolorem — ale jest jedyna linia w tym bloku pisana kolorem tekstu
   i grubsza, wiec oko lapie ja pierwsza. Kupujacy na Macu ma sie o tym dowiedziec
   przed zaplata, a nie z maila po. */
.bx-plat { color: var(--text) !important; font-weight: 600; }
.co-plat { margin-top: 12px; font-size: 0.85rem; color: var(--muted); line-height: 1.55; }
.co-plat strong { color: var(--text); }

/* ---------- /lost-key: formularz odzyskania klucza (28.08.2026) ----------
   Wyglad zerzniety z formularza partnerskiego, zeby pola na tej stronie
   wygladaly jak wszedzie indziej. Pole ma `max(16px, 1rem)`, bo iOS powieksza
   strone przy kazdym mniejszym — a to jedyne pole na calej stronie. */
.lk-form { display: flex; flex-direction: column; gap: 9px; max-width: 460px; margin: 22px 0 8px; }
.lk-form label { font-size: 0.85rem; color: var(--muted); }
.lk-form input { background: var(--bg); border: 1px solid var(--line-2); color: var(--text);
  padding: 13px 14px; border-radius: 10px; font-size: max(16px, 1rem); outline: none;
  transition: border-color .2s, box-shadow .2s; }
.lk-form input:focus { border-color: var(--money); box-shadow: 0 0 0 3px rgba(var(--money-rgb),0.16); }
.lk-form .btn-cta { min-height: 48px; }
.lk-note { max-width: 460px; margin: 6px 0 8px; padding: 13px 16px; border-radius: 10px;
  background: var(--surface); border: 1px solid rgba(var(--money-rgb),0.3);
  color: var(--text); font-size: 0.92rem; line-height: 1.55; }

/* Link do filmu z instrukcja na /install (28.08.2026). Zwykly link, nie osadzony
   YouTube: osadzony ciagnie ~1 MB skryptow i ustawia ciasteczka Google'a na
   stronie, ktora dzis nie ma zadnych — za wysoka cena za wygode jednego
   klikniecia. */
.how-video { margin: 14px 0 18px; }
.how-video a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px;
  border-radius: 999px; border: 1px solid rgba(var(--money-rgb),0.35);
  background: rgba(var(--money-rgb),0.08); color: var(--money);
  font-family: var(--font-head); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.how-video a:hover { border-color: var(--money); background: rgba(var(--money-rgb),0.14); }
.how-video a:active { transform: scale(0.985); }

/* ---------- 25. De-generic pass: film grain + faux plugin-panel art ---------- */
/* subtle film grain over everything — kills the flat "AI gradient" look.
   pointer-events none, so it never blocks clicks. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* art tiles = screenshot SLOTS styled as an editor panel window.
   When Daniel's real screenshots arrive, drop an <img class="art-shot"> inside
   .feat-art / .pp-media and these skeletons disappear behind it. */
.feat-art::before, .pp-media::before, .card-media::before, .cw-media::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 28px;
  background:
    radial-gradient(circle 4px at 16px 14px, rgba(255,95,87,0.85) 3.5px, transparent 4.5px),
    radial-gradient(circle 4px at 34px 14px, rgba(254,188,46,0.85) 3.5px, transparent 4.5px),
    radial-gradient(circle 4px at 52px 14px, rgba(40,200,64,0.85) 3.5px, transparent 4.5px),
    linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border-bottom: 1px solid var(--line);
}
/* two skeleton timeline tracks at the bottom — reads as "plugin UI", not "AI card" */
.feat-art::after, .pp-media::after, .card-media::after, .cw-media::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 14px; height: 26px;
  pointer-events: none; opacity: 0.75;
  background:
    linear-gradient(90deg,
      rgba(var(--money-rgb),0.38) 0 34%, transparent 34% 37%,
      rgba(255,255,255,0.10) 37% 63%, transparent 63% 66%,
      rgba(var(--accent-rgb),0.30) 66% 88%, transparent 88%) top / 100% 10px no-repeat,
    linear-gradient(90deg,
      transparent 0 8%, rgba(255,255,255,0.08) 8% 46%, transparent 46% 49%,
      rgba(var(--money-rgb),0.24) 49% 78%, transparent 78%) bottom / 100% 10px no-repeat;
  border-radius: 3px;
}
/* ---------- 27a. Capability ticker — full-bleed credits-style divider band ---------- */
.cap-ticker {
  display: block; overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 16px 0; margin: clamp(26px, 4vw, 48px) 0;
  background: rgba(255,255,255,0.015);
}
.ct-track { display: inline-flex; animation: ticker 36s linear infinite; will-change: transform; }
.cap-ticker:hover .ct-track { animation-play-state: paused; }
.ct-seq {
  font-family: var(--font-head); font-weight: 600; font-size: 0.98rem;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted);
  padding-right: 0.6em;
}
.ct-seq b { color: var(--text); font-weight: 600; }
.ct-seq i { font-style: normal; color: var(--accent); padding: 0 0.9em; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ct-track { animation: none; }
  .cap-ticker { overflow-x: auto; }
}

/* ---------- 27. End-of-list reframe + exploded bundle stack ---------- */
/* "Can't decide?" — keeps an empty-basket browser in buying mode (help, not rejection) */
.cant-decide {
  margin-top: 34px; padding: clamp(22px, 4vw, 36px);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius);
}
.cant-decide h3 { font-family: var(--font-head); font-size: 1.35rem; margin-bottom: 4px; }
.cant-decide p { font-size: 0.95rem; max-width: 44ch; }
.cd-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cd-actions .btn-cta { padding: 13px 24px; font-size: 0.98rem; }
.cd-alt { font-size: 0.9rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cd-alt:hover { color: var(--accent); }


/* real screenshot drop-in: fills the tile below the chrome bar, above the skeletons */
.art-shot { position: absolute; inset: 28px 0 0; width: 100%; height: calc(100% - 28px); object-fit: cover; object-position: center top; z-index: 1; }
/* when a real shot is in, hide the placeholder tag text + skeleton tracks */
.art-shot ~ .art-tag, .art-shot ~ .art-sub, .art-shot ~ .ptag { display: none; }
/* a tile clip sits in the same frame as a still — dark under it so there is no
   flash of empty box before the poster paints */
video.art-shot { background: #0b0b0f; }
/* The product-page frame is 16/11, so a 16/9 clip either got its wordmark
   sliced off (cover) or sat above a slab of empty black (contain). With a clip
   the frame just takes its height from the clip instead: title bar + 16/9. */
.pp-media.has-clip { aspect-ratio: auto; padding-top: 28px; }
.pp-media.has-clip video.art-shot { position: static; width: 100%; height: auto;
  aspect-ratio: 16/9; object-fit: cover; }

/* ---------- 26. "Inside the plugin" showcase (real screenshots) ---------- */
/* ---- 12.09.2026: przebudowa sekcji „Inside the plugin" ----
   Filmy zostaja, bo sa najlepsza rzecza na tej stronie. Zmienia sie to, w czym
   siedza: kazdy dostaje ramke okna z paskiem tytulu, wiec czyta sie jako panel
   otwarty w Premierze, a nie jako wklejony kadr. Rzedy sa numerowane licznikiem
   CSS, a nie tekstem w markupie: numer nie idzie wtedy do slownika i nie ma go
   po co tlumaczyc. */
.showcase { display: flex; flex-direction: column; gap: clamp(28px, 5vw, 56px);
  margin-top: 30px; counter-reset: sc; }
.sc-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(22px, 4vw, 52px);
  align-items: center; counter-increment: sc; }
.sc-row:nth-child(even) .sc-shot { order: 2; }
/* 12.09.2026: pasek z kropkami („overlay komputera") zdjety na prosbe Maćka.
   Zostaje sama ramka: cienka linia, zaokraglenie i gleboki cien, zeby nagranie
   odklejalo sie od tla, ale nic nie udawalo okna systemu. */
.sc-shot { position: relative; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 16px; padding: 5px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.5); }
.sc-shot img,
.sc-shot video { display: block; width: 100%; height: auto; border-radius: 12px;
  box-shadow: 0 26px 70px rgba(0,0,0,0.55); }
/* the clips are silent UI captures: they play themselves in view, no chrome */
.sc-shot video { background: #0b0b0f; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 14px; box-shadow: none; }
.sc-shot img { border-radius: 14px; }
/* editor's margin note — Newsreader italic, slightly askew, like a scribble on a print */
.margin-note {
  position: absolute; right: 10px; bottom: -26px; transform: rotate(-2deg);
  font-family: var(--font-accent); font-style: italic; font-size: 1.02rem;
  color: rgba(var(--accent-rgb), 0.85); pointer-events: none; white-space: nowrap;
}
.sc-row:nth-child(even) .margin-note { right: auto; left: 10px; transform: rotate(1.6deg); }
.sc-kicker::before { content: counter(sc, decimal-leading-zero); margin-right: 9px;
  color: var(--money); }
.sc-kicker { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),0.35); border-radius: 999px; padding: 4px 12px; margin-bottom: 12px;
  background: rgba(var(--accent-rgb),0.08); }
.sc-copy h3 { font-family: var(--font-head); font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.01em; margin-bottom: 10px; }
.sc-copy p { font-size: 0.98rem; max-width: 52ch; }
.sc-copy p strong { color: var(--text); }
.sc-list { list-style: none; padding: 0; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.sc-list li { position: relative; padding-left: 26px; font-size: 0.92rem; color: var(--muted); }
.sc-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
@media (max-width: 860px) {
  .sc-row { grid-template-columns: 1fr; }
  .sc-row:nth-child(even) .sc-shot { order: 0; }
}


/* ---------- 28. Maker's note — the human behind the product ---------- */
.maker { padding: clamp(30px, 5vw, 64px) var(--gutter) clamp(40px, 6vw, 80px); max-width: 880px; }
.mk-quote {
  font-family: var(--font-accent); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem); line-height: 1.35; color: var(--text);
}
.mk-quote em { color: var(--accent); font-style: italic; }
.mk-sig { display: flex; align-items: center; gap: 14px; margin-top: 22px; font-size: 0.95rem; color: var(--muted); }
.mk-dash { width: 44px; height: 1px; background: var(--accent); flex-shrink: 0; }
.mk-sig strong { color: var(--text); }
.mk-sig a { color: var(--accent); margin-left: 6px; }
.mk-sig a:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ---------- 28b. Pierwsza opinia ----------
   Jedna opinia, wiec zadnej sciany cytatow: karta stoi sama i wyglada na to,
   czym jest. Od drugiej karty w gore grid sam robi sie dwukolumnowy, wiec
   dopisanie kolejnej opinii w HTML nie wymaga dotykania tego pliku. */
.voices { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 780px; }
.voices:has(.vc-card:nth-child(2)) { grid-template-columns: 1fr 1fr; max-width: none; }
.vc-card { display: flex; align-items: center; gap: clamp(18px, 3vw, 28px); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: clamp(22px, 3.5vw, 32px); }
/* Zdjecie jest tu dowodem, nie ozdoba: widac czlowieka i widac Premiere na
   ekranie za nim. Dlatego dostaje realny rozmiar, a nie awatar 40 px. */
.vc-photo { width: clamp(108px, 15vw, 148px); aspect-ratio: 1; flex-shrink: 0; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--line-2); }
.vc-quote { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.4; color: var(--text); }
.vc-by { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 0.95rem; color: var(--muted); }
.vc-dash { width: 28px; height: 1px; background: var(--accent); flex-shrink: 0; }
.vc-by strong { color: var(--text); font-weight: 500; }
.vc-by a { color: var(--accent); margin-left: 6px; }
.vc-by a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { .voices:has(.vc-card:nth-child(2)) { grid-template-columns: 1fr; } }
/* Na telefonie zdjecie obok cytatu zjadaloby polowe szerokosci tekstu, wiec
   idzie nad cytat i zostaje male — ma potwierdzac, ze to czlowiek, nie krzyczec. */
@media (max-width: 560px) {
  .vc-card { flex-direction: column; align-items: flex-start; gap: 18px; }
  .vc-photo { width: 96px; }
}


/* ---------- 29. Steps, subscription math, honesty block ---------- */

/* subscription math — two columns, ours wins on facts alone */
.math-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mg-col { border: 1px solid var(--line-2); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); }
.mg-col h3 { font-family: var(--font-head); font-size: 1.15rem; margin-bottom: 14px; }
.mg-col ul { display: flex; flex-direction: column; gap: 9px; }
.mg-col li { position: relative; padding-left: 24px; font-size: 0.95rem; color: var(--muted); }
.mg-col li::before { content: "—"; position: absolute; left: 0; color: var(--faint); }
.mg-col li em { font-style: normal; color: var(--text); font-weight: 600; }
.mg-us { border-color: rgba(var(--money-rgb),0.4); background: rgba(var(--money-rgb),0.04); }
.mg-us li::before { content: "✓"; color: var(--money); }
.mg-total { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--muted); }
.mg-total strong { color: var(--text); }
.mg-us .mg-total strong { color: #6fe2a4; }
@media (max-width: 700px) { .math-grid { grid-template-columns: 1fr; } }

/* ---------- 30. Buy now everywhere — low-friction two-button pattern ---------- */
.btn-ghost { background: transparent; border: 1px solid var(--line-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--money); color: var(--money); }
.card-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.card-btns .btn { padding: 10px 8px; font-size: 0.88rem; }


/* ---------- 31. FlowCut brand lockup — icon + CSS wordmark (animatable) ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-icon { width: 28px; height: 28px; border-radius: 7px; }
.brand-word { display: inline-flex; align-items: baseline; font-family: var(--font-head); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.015em; color: var(--text); line-height: 1; }
.brand-word .reg { font-size: 0.5em; margin-left: 3px; color: var(--muted); }
/* the slash IS the cut — one violet stroke */
.bw-slash { display: inline-block; width: 2.5px; height: 1.06em; margin: 0 6px; border-radius: 2px; background: var(--accent); transform: rotate(18deg) translateY(0.08em); transform-origin: center; }

/* cut-reveal on load: the halves close onto the slash, slash snaps in */
@keyframes bwFlow  { from { transform: translateX(-9px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bwCut   { from { transform: translateX(9px);  opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bwSlash { 0% { transform: rotate(18deg) translateY(0.08em) scaleY(0); } 60% { transform: rotate(18deg) translateY(0.08em) scaleY(0); } 100% { transform: rotate(18deg) translateY(0.08em) scaleY(1); } }
.header .bw-flow  { animation: bwFlow  .55s var(--ease) both; }
.header .bw-cut   { animation: bwCut   .55s var(--ease) both; }
.header .bw-slash { animation: bwSlash .8s  var(--ease) both; }
/* hover: the blade leans in */
.brand:hover .bw-slash { transform: rotate(28deg) translateY(0.08em); transition: transform .25s var(--ease); }
@media (prefers-reduced-motion: reduce) { .header .bw-flow, .header .bw-cut, .header .bw-slash { animation: none; } }

/* ---------- 32. The stack (competitor math) + compact guarantee ---------- */
.stack { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(18px, 3vw, 40px); align-items: start; }
.stack-list { border-top: 1px solid var(--line-2); }
.st-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.st-item { font-size: 0.96rem; color: var(--muted); }
.st-cost { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--text); white-space: nowrap; }
.st-cost em { font-style: normal; font-weight: 400; font-size: 0.84rem; color: var(--faint); }
.st-sum .st-item { color: var(--text); font-weight: 600; }
.st-sum .st-cost { font-size: 1.35rem; color: #ff8f7f; }
.st-fine { margin-top: 12px; font-size: 0.85rem; color: var(--faint); line-height: 1.6; }

.stack-us { border: 1px solid rgba(var(--money-rgb),0.4); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); background: rgba(var(--money-rgb),0.05); }
.su-label { font-family: var(--font-body); font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--money); }
.su-price { display: flex; align-items: baseline; gap: 9px; margin: 10px 0 16px; }
.su-price strong { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1; color: #6fe2a4; }
.su-price span { color: var(--muted); font-size: 1rem; }
.su-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.su-list li { position: relative; padding-left: 24px; font-size: 0.93rem; color: var(--muted); }
.su-list li::before { content: "✓"; position: absolute; left: 0; color: var(--money); font-weight: 700; }
.stack-us .btn-cta { width: 100%; }
.su-note { margin-top: 12px; font-size: 0.84rem; color: var(--faint); }
.su-note strong { color: var(--text); }
@media (max-width: 800px) { .stack { grid-template-columns: 1fr; } }

/* closing block — free pack first, guarantee as quiet reassurance beside it */
.closer { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: clamp(26px, 4vw, 46px);
  background: linear-gradient(150deg, rgba(var(--money-rgb),0.06), var(--surface) 60%); }
.cl-main h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 10px; letter-spacing: -0.015em; }
.cl-main p { font-size: 0.98rem; max-width: 46ch; }
.cl-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.cl-actions .btn-cta { padding: 14px 26px; }
/* Od 9.09.2026 to bywa <button> (otwiera bramke na maila), a nie tylko <a>:
   przycisk nie dziedziczy fontu ani tla, wiec dostaje je tutaj wprost. */
.cl-alt { font-size: 0.92rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  font-family: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.cl-alt:hover { color: var(--accent); }
.cl-side { border-left: 1px solid var(--line-2); padding-left: clamp(20px, 3vw, 34px); }
.cl-guarantee { font-size: 0.92rem; line-height: 1.65; color: var(--muted); }
.cl-guarantee strong { color: var(--text); }
.cl-points { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.cl-points li { position: relative; padding-left: 22px; font-size: 0.88rem; color: var(--faint); }
.cl-points li::before { content: "✓"; position: absolute; left: 0; color: var(--money); font-weight: 700; }
@media (max-width: 760px) {
  .closer { grid-template-columns: 1fr; }
  .cl-side { border-left: none; border-top: 1px solid var(--line-2); padding: 22px 0 0; }
}

.co-error { margin-top: 12px; font-size: 0.86rem; color: #ff8f7f; line-height: 1.5; }

/* success page download list */
/* The bullet is killed three ways on purpose. list-style on the <ul> alone is
   what every browser is supposed to honour, and a grey dot still turned up
   outside the cards on iOS. Stating it on the item and emptying ::marker costs
   nothing and leaves no engine anything to interpret. */
.dl-list { list-style: none; padding: 0; margin: 14px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.dl-list li { list-style: none; }
.dl-list li::marker { content: ""; }
.dl-list li a { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid rgba(var(--money-rgb),0.35);
  border-radius: 10px; background: rgba(var(--money-rgb),0.06); color: var(--text); font-weight: 600; text-decoration: none; }
.dl-list li a::before { content: "↓"; color: var(--money); font-weight: 700; }
.dl-list li a { transition: border-color .18s ease, background .18s ease, transform .1s ease; }
.dl-list li a:hover { border-color: var(--money); background: rgba(var(--money-rgb),0.12); }
/* Odpowiedz na WCISNIECIE, nie na puszczenie. Pobranie 800 MB rusza bez zadnego
   znaku na ekranie — przez pierwsza sekunde nie widac niczego poza ta reakcja,
   wiec to ona mowi "kliknelo sie". transform i opacity, czyli bez przeliczania
   ukladu. */
.dl-list li a:active { transform: scale(0.995); background: rgba(var(--money-rgb),0.18); }
.key-copy { transition: border-color .18s ease, color .18s ease, transform .1s ease; }
.key-copy:active { transform: scale(0.97); }
.legal details.drop summary { transition: color .18s ease; }
.legal details.drop summary:hover { color: var(--money); }
/* One line under a download, saying what that file is for. Since the plugin ships
   as both .exe and .zxp, three links can sit here and the names alone do not tell
   a buyer which to run. Muted and small on purpose: it is guidance, not an offer. */
.dl-note { display: block; margin: 5px 2px 0; font-size: 0.82rem; line-height: 1.45; color: var(--muted); }

/* licence key on the success page */
.key-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 8px; }
.key-row code { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--text); background: var(--surface); border: 1px solid rgba(var(--accent-rgb),0.4);
  border-radius: 10px; padding: 13px 18px; }
.key-copy { font-family: var(--font-head); font-weight: 600; font-size: 0.86rem; padding: 10px 18px;
  border-radius: 9px; border: 1px solid var(--line-2); color: var(--text); background: transparent; }
.key-copy:hover { border-color: var(--accent); color: var(--accent); }

/* demo banner — must never be mistaken for a real receipt */
.demo-banner { background: rgba(var(--accent-rgb),0.14); border-bottom: 1px solid rgba(var(--accent-rgb),0.4);
  color: var(--text); font-size: 0.9rem; line-height: 1.6; padding: 14px clamp(18px,5vw,48px); }
.demo-banner strong { color: var(--accent); }


/* ---------- 33. Local AI band + system requirements ---------- */
/* Naglowek na gorze, trzy kafle w rzedzie pod nim (poprawka 25.08.2026).
   Bylo: tekst z lewej, kafle jeden pod drugim z prawej. Tekst konczyl sie w
   polowie wysokosci kafli, wiec lewy dolny rog sekcji byl pusta plama na jedna
   trzecia ekranu, a kafle byly szerokie i plaskie — napis w kazdym zajmowal
   jedna czwarta szerokosci, reszta swiecila pustka. Teraz kazdy kafel jest
   mniej wiecej kwadratem, stoja obok siebie i sekcja konczy sie rowno. */
.local { display: block; }
.lc-kicker { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),0.35); border-radius: 999px; padding: 4px 12px;
  background: rgba(var(--accent-rgb),0.08); margin-bottom: 14px; }
.lc-copy h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: -0.015em; margin-bottom: 14px; }
.lc-copy p { font-size: 0.98rem; max-width: 54ch; }
.lc-copy p strong { color: var(--text); }
.lc-why { margin-top: 14px; padding-left: 16px; border-left: 2px solid rgba(var(--accent-rgb),0.45);
  font-size: 0.93rem; color: var(--faint); }
.lc-copy { max-width: 62ch; margin-bottom: clamp(26px, 3.5vw, 40px); }
/* Trzy pudelka z obwodka i tlem czytaly sie jak lista funkcji, a to jest
   jedyny argument, ktorego konkurencja nie moze skopiowac: OpusClip i Submagic
   MUSZA wyslac wideo na swoj serwer, my nie. Wiec zamiast kafelkow — liczba.
   ∞ / 1× / 0 MB mowi cala rzecz, zanim ktokolwiek przeczyta podpis. Samo „0"
   bylo za slabe: czytalo sie jak litera O i nie mowilo zera CZEGO. Pudelka
   znikaja, zostaje typografia i cienka kreska miedzy kolumnami. */
.lc-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 6px; border-top: 1px solid var(--line); }
.lc-facts li { padding: 30px 30px 6px 0; transition: background .35s var(--ease); }
.lc-facts li + li { padding-left: 30px; border-left: 1px solid var(--line); }
/* Liczba jest tu cala argumentacja, wiec dostaje traktowanie jak naglowek, a nie
   jak tekst: wieksza, z gradientem od bieli do przygaszonej bieli. Wyglada jak
   wygrawerowana w tle zamiast lezec na nim plasko. color: var(--text) zostaje
   jako fallback, gdyby background-clip nie zadzialal — wtedy jest zwykla biel,
   a nie pusta dziura. */
.lc-facts li::before {
  content: attr(data-n);
  /* Trzy roznej wielkosci znaki w jednym pasie o stalej wysokosci. Bez tego
     kazda liczba ma inna wysokosc bloku i podpisy pod nimi ida na trzech
     roznych poziomach — najlepiej widac to przy „0 MB", ktore jest mniejsze
     od reszty i podnosilo swoj podpis o kilkanascie pikseli. */
  display: flex; align-items: center;
  height: clamp(3.1rem, 6.6vw, 4.9rem);
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(3.1rem, 6.6vw, 4.9rem); line-height: 0.95; letter-spacing: -0.04em;
  color: var(--text);
  background: linear-gradient(180deg, #ffffff 0%, rgba(242,242,247,0.40) 82%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
  transition: filter .35s var(--ease); }
/* Znak nieskonczonosci jest niski — przy tym samym font-size wyglada obok
   cyfr na mniejszy, choc nie jest. Podbity optycznie, nie matematycznie. */
.lc-facts li[data-n="\221E"]::before { font-size: clamp(4.1rem, 8.6vw, 6.4rem); line-height: 0.72; }
/* „0 MB" to piec znakow zamiast jednego, wiec przy tym samym stopniu pisma
   wazylby optycznie dwa razy tyle co reszta. Mniejszy, zeby trojka byla rowna. */
.lc-facts li[data-n="0 MB"]::before { font-size: clamp(2.1rem, 4.3vw, 3.2rem); letter-spacing: -0.015em; }
/* Kolumna pod kursorem sie rozjasnia. Bez ruchu — sekcja i tak wjezdza z gory
   przy scrollu, a druga animacja w tym samym miejscu bylaby juz halasem. */
.lc-facts li:hover { background: linear-gradient(180deg, rgba(242,242,247,0.05), transparent 72%); }
.lc-facts li:hover::before { filter: drop-shadow(0 0 26px rgba(242,242,247,0.25)); }
.lc-facts strong { display: block; font-family: var(--font-head); font-weight: 600;
  font-size: 1.06rem; color: var(--text); margin-bottom: 7px; }
.lc-facts span { font-size: 0.92rem; color: var(--muted); line-height: 1.6; }

/* Na telefonie kolumny nie maja sensu: liczba idzie obok tekstu, nie nad nim,
   zeby trzy punkty nie zajmowaly polowy ekranu. */
@media (max-width: 820px) {
  .lc-facts { grid-template-columns: 1fr; border-top: 0; }
  .lc-facts li { display: grid; grid-template-columns: 4.8rem 1fr; column-gap: 18px;
    align-items: start; padding: 22px 0; border-top: 1px solid var(--line); }
  .lc-facts li + li { padding-left: 0; border-left: 0; }
  .lc-facts li::before { grid-row: 1 / span 2; font-size: 2.4rem; margin: 0;
    /* Na telefonie liczba stoi w komorce siatki obok tekstu, wiec pas o stalej
       wysokosci z wersji desktopowej nie jest tu potrzebny. */
    height: auto; align-self: center; }
  .lc-facts li[data-n="\221E"]::before { font-size: 3.2rem; line-height: 0.72; }
  /* Kolumna ma 4.8rem, wiec „0 MB" schodzi tyle, zeby sie w niej zmiescic. */
  .lc-facts li[data-n="0 MB"]::before { font-size: 1.8rem; }
  .lc-facts li:hover { background: none; }
}

/* requirements — a plain table beats a designed one: people scan it for one fact */
#requirements { padding-block: clamp(24px, 4vw, 44px); }
.reqs { border-top: 1px solid var(--line-2); max-width: 720px; }
.rq { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rq-k { font-size: 0.93rem; color: var(--muted); }
.rq-v { font-size: 0.93rem; color: var(--text); font-weight: 500; text-align: right; }
.reqs-note { margin-top: 16px; font-size: 0.88rem; color: var(--faint); }

/* "why there is less here" — the anti-bloat argument, on every product page */
.essentials { margin-top: 18px; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 20px 22px; background: var(--surface); }
.essentials h4 { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; margin-bottom: 8px; }
.essentials p { font-size: 0.93rem; line-height: 1.65; color: var(--muted); }
.es-line { margin-top: 10px; color: var(--text); font-weight: 600; }

/* how much is in a pack — the honest version of "hundreds of files" */
.bx-count { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--money); margin-bottom: 6px; }
.bx-note { margin-top: 10px; padding-left: 14px; border-left: 2px solid rgba(var(--accent-rgb),0.45);
  font-size: 0.88rem; line-height: 1.6; color: var(--faint); }
.card-count { font-family: var(--font-head); font-weight: 600; font-size: 0.88rem; color: var(--money); margin-bottom: 4px; }

.gate-error { margin-top: 10px; font-size: 0.85rem; color: #ff8f7f; }

/* ---------- 34. Shop page ---------- */
.header-link { font-size: 0.9rem; color: var(--muted); }
.header-link:hover { color: var(--text); }

.shop-head { padding: clamp(40px, 6vw, 76px) var(--gutter) clamp(20px, 3vw, 32px); }
.shop-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -0.025em; margin-bottom: 10px; }
.shop-head p { font-size: 1.02rem; }

/* Three columns. The middle one is the bundle and is the only card that is
   raised — the comparison does the persuading, the styling just points at it. */
/* Dwie kolumny od 9.09.2026 (byly trzy: paczka, zestaw, wtyczka). Zestaw
   zniknal, a wtyczka dostaje szersza kolumne, bo to jedyna rzecz, ktora ma tu
   cene. */
.plans { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; align-items: start; }
.plan { position: relative; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px); background: var(--surface); }
.plan h2 { font-family: var(--font-head); font-size: 1.3rem; margin-bottom: 10px; }
.plan-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.plan-price strong { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1; color: var(--text); }
.plan-price s { color: var(--muted); font-size: 1.05rem; }
.plan-sub { font-size: 0.92rem; margin-bottom: 18px; }
.plan-btns { display: flex; flex-direction: column; gap: 8px; }
.plan-cta { width: 100%; padding: 13px; font-size: 0.98rem; }
/* Od 12.09.2026 czesc przyciskow to linki na karte wtyczki, a nie <button>.
   Link nie centruje tekstu sam z siebie i ma podkreslenie, wiec dostaje to,
   co <button> mial z domyslki. */
a.btn-cta, a.plan-cta { display: inline-flex; align-items: center; justify-content: center;
  text-align: center; text-decoration: none; }
a.header-trial { display: inline-flex; align-items: center; text-decoration: none; }
.plan-list { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; }
.plan-list li { position: relative; padding-left: 26px; font-size: 0.92rem; color: var(--muted); line-height: 1.5; }
.plan-list li::before { content: "✓"; position: absolute; left: 0; color: var(--money); font-weight: 700; }
.plan-list li.no { color: var(--faint); }
.plan-list li.no::before { content: "—"; color: var(--faint); }
.plan-list li.part::before { content: "~"; color: var(--muted); }

.plan-best { border-color: rgba(var(--money-rgb),0.45); background: linear-gradient(165deg, rgba(var(--money-rgb),0.07), var(--surface) 58%); }

/* ---- cena i darmowa paczka obok siebie na stronie glownej (12.09.2026) ----
   Ten sam uklad, co na /shop, ale na glownej wtyczka stoi PIERWSZA, takze na
   telefonie: to ona ma cene, a paczka jest tym, co dostaje sie obok. */
#price .plans { grid-template-columns: 1.2fr 1fr; }
#price .plan { display: flex; flex-direction: column; }
#price .plan-price strong { font-size: clamp(2.2rem, 4.4vw, 3rem); color: var(--money); }
#price .plan-best .plan-price strong { color: var(--money); }
#price .plan-freeplan .plan-price strong { color: var(--text); }
#price .plan-list { flex: 1; }
#price .plan-btns { margin-top: 4px; }
#price .cl-alt { align-self: flex-start; }
#price .pack-links { margin-top: 16px; font-size: 0.84rem; color: var(--faint); }
#price .pc-plat { color: var(--faint); }
#price .pc-plat::before { content: "\25B8"; color: var(--faint); font-weight: 400; }
@media (max-width: 820px) {
  #price .plans { grid-template-columns: 1fr; }
}

.plan-best .plan-price strong { color: #6fe2a4; }
.plan-flag { position: absolute; top: -11px; left: clamp(22px, 3vw, 30px);
  background: var(--money); color: #06281a; font-family: var(--font-body); font-weight: 700;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 12px; border-radius: 999px; }
.plan-flag-free { background: rgba(255,255,255,0.08); border-color: var(--line-2); color: var(--text); }
.plan-math { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
.plan-math strong { color: var(--text); }
/* the whole plan card opens the product page — say so, and look clickable */
.plan[data-open] { cursor: pointer; transition: border-color .2s, transform .2s; }
.plan[data-open]:hover { border-color: rgba(var(--money-rgb),0.45); transform: translateY(-2px); }
.plan-more { display: block; margin-top: 16px; font-family: var(--font-head); font-weight: 600;
  font-size: 0.88rem; color: var(--money); }

@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; }
  .plan-best { order: -1; }   /* on a phone the bundle goes first, not middle */
}

.shop-sub { margin-top: 8px; font-size: 0.94rem; color: var(--faint); }
.shop-sub a { color: var(--accent); margin-left: 4px; }
.shop-sub a:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ---------- 35. Walkthrough, labelled thumbnails, shop button ---------- */
/* Podglad walkthrough zwezony (25.08.2026, Daniel: „Inside the plugin do
   zaktualizowania na ostatni walkthrough + mniejszy preview"). Na pelnej
   szerokosci sekcji miniatura byla wieksza niz kazdy kafel pod nia i wygladala
   jak glowny bohater strony, a jest zaproszeniem do filmu. */
/* 12.09.2026: karta, nie samo zdjecie z trojkatem. Miniatura przyciemnia sie
   od dolu, na tym leza dwa napisy, a przycisk odtwarzania stoi nad nimi. */
.walkthrough { margin: 4px auto 34px; max-width: 860px; }
.wt-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 18px 20px; text-align: left; pointer-events: none; }
.wt-label { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--money);
  padding: 5px 11px; border-radius: 999px; background: rgba(var(--money-rgb), 0.16);
  border: 1px solid rgba(var(--money-rgb), 0.36); }
.wt-title { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem;
  color: var(--text); max-width: 34ch; line-height: 1.3; }
@media (max-width: 640px) {
  .wt-meta { padding: 13px 14px; gap: 6px; }
  .wt-title { font-size: 0.9rem; }
}
.wt-play { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--radius); overflow: hidden; background: #000; }
/* the thumbnail is finished artwork now, so barely dim it */
.wt-play img { width: 100%; display: block; opacity: 0.92; transition: opacity .25s var(--ease); }
.wt-play:hover img { opacity: 1; }
/* Dead centre, where everyone looks for it. The artwork is busiest exactly
   there, so a soft pool of shadow sits under the badge and calms the icons
   down — same trick a video thumbnail anywhere else uses. */
.wt-play::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.20) 40%, transparent 68%),
    radial-gradient(ellipse 40% 52% at 50% 45%, rgba(0,0,0,0.60), rgba(0,0,0,0) 72%);
  transition: opacity .25s var(--ease); }
.wt-play:hover::before { opacity: 0.7; }
.wt-btn { position: absolute; inset: 0 0 34px; margin: auto; z-index: 3;
  width: clamp(78px, 9vw, 108px); height: clamp(78px, 9vw, 108px); border-radius: 50%;
  background: rgba(var(--accent-rgb),0.96);
  box-shadow: 0 14px 46px rgba(0,0,0,0.6);
  transition: transform .25s var(--ease); }
.wt-play:hover .wt-btn { transform: scale(1.06); }
.wt-btn::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-left: 26px solid #0a0a0f; border-top: 16px solid transparent; border-bottom: 16px solid transparent;
  transform: translateX(4px); }
.wt-frame { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius); display: block; }

/* thumbnails made to carry a label: keep the name on top of the art */
.is-labelled .ptag, .is-labelled .art-tag {
  display: grid; place-items: center; position: absolute; inset: 0; z-index: 2;
  padding: 0; text-align: center;
  font-family: var(--font-head); font-weight: 700; letter-spacing: 0.04em;
  color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.8); background: none; filter: none;
}
.is-labelled .art-sub { display: none; }

.header-shop { font-family: var(--font-head); font-weight: 600; font-size: 0.92rem;
  padding: 8px 18px; border-radius: 999px; background: var(--money); color: #06281a; }
.header-shop:hover { filter: brightness(1.08); }

/* Trial w naglowku: jedyny przycisk w tym pasku, ktory swieci. Poswiata
   oddycha, zeby oko zlapalo go od razu, ale wolno, zeby nie migal. */
.header-trial { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem;
  padding: 10px 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, var(--money), var(--money-2)); color: #06281a;
  box-shadow: 0 0 0 1px rgba(var(--money-rgb),0.5), 0 8px 26px rgba(var(--money-rgb),0.34);
  animation: trialglow 3.4s ease-in-out infinite; transition: filter .2s, transform .15s; }
.header-trial:hover { filter: brightness(1.1); }
.header-trial:active { transform: scale(0.97); }
@keyframes trialglow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--money-rgb),0.5), 0 8px 26px rgba(var(--money-rgb),0.30); }
  50%      { box-shadow: 0 0 0 1px rgba(var(--money-rgb),0.7), 0 10px 38px rgba(var(--money-rgb),0.52); }
}
@media (max-width: 560px) {
  .header-trial { font-size: 0.85rem; padding: 9px 14px; }
}

/* ---------- 36. Depth pass: lit cards, glow on the one that matters ---------- */
/* Cards were flat rectangles. A light source at the top edge and a real shadow
   underneath is what makes a panel read as raised rather than drawn. */
.plan {
  background: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, var(--surface) 42%);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}
.plan::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
}

/* The bundle is the choice we want made, so it is the only one that glows. */
.plan-best {
  background: linear-gradient(180deg, rgba(var(--money-rgb),0.16) 0%, var(--surface) 46%);
  border-color: rgba(var(--money-rgb),0.55);
  box-shadow: 0 0 0 1px rgba(var(--money-rgb),0.25),
              0 26px 60px rgba(0,0,0,0.55);
}
.plan-best::before { background: linear-gradient(90deg, transparent, rgba(var(--money-rgb),0.7), transparent); }

/* Same treatment for the product cards, quieter, and only on hover. */
.card, .card-wide {
  background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, var(--surface) 40%);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.card:hover, .card-wide:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--money-rgb),0.4);
  box-shadow: 0 22px 50px rgba(0,0,0,0.5);
}
.card-wide { box-shadow: 0 0 0 1px rgba(var(--money-rgb),0.18), 0 18px 44px rgba(0,0,0,0.45); }

/* Buy now is the action; give it enough presence to be found without hunting. */
.btn-primary { box-shadow: 0 6px 22px rgba(var(--money-rgb),0.38); }
.btn-primary:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.45); }

/* ---------- 33. Mobile: air ----------
   Desktop is untouched. On a phone the page was one long squeeze: the gutter
   was thin, sections ran into each other, and the spec sheet turned into
   paragraphs of dot-separated text that nobody reads. This block only adds
   space and breaks the dense runs into scannable lines. */
@media (max-width: 700px) {
  :root { --gutter: 22px; }

  /* The header had no mobile rules at all: brand + launch-price countdown +
     Shop + @danielm.media + cart cannot fit 430 px, and flex items refuse to
     shrink past their text, so the whole page got pushed sideways. The
     countdown lives in every buy box anyway, and the IG handle is a link the
     icon already makes. */
  .header-trust { display: none; }
  .ig span { display: none; }
  .header-right { gap: 10px; }
  .header-inner { gap: 10px; justify-content: space-between; }

  /* room between sections, and a real gap under each heading */
  .section { padding-block: 54px; }
  .section-head { margin-bottom: 24px; }
  .section p, .hero p { line-height: 1.72; }

  /* HERO — the first screen decides whether anyone scrolls */
  .hero { padding: 34px var(--gutter) 46px; gap: 34px; }
  .hero .display { font-size: clamp(2.2rem, 8.6vw, 2.7rem); line-height: 1.1; margin-bottom: 18px; }
  .hero .lead { font-size: 1rem; margin-bottom: 4px; }
  .lead-accent { margin-top: 14px; font-size: 1.05rem; }
  /* two buttons of different widths read as a mistake — make them one column */
  .hero-cta { align-items: stretch; gap: 10px; margin-top: 26px; }
  .cta-stack { display: flex; }
  .btn-hero { padding: 17px 26px; font-size: 1.02rem; }
  .cta-under { align-items: center; text-align: center; }
  .cta-time { padding-left: 0; }
  .hero-cta .btn-cta, .hero-cta .btn-ghost-lg { width: 100%; justify-content: center; text-align: center; }
  /* Na telefonie napis siada pod przyciskiem, wysrodkowany — obok nie ma
     miejsca, a zawiniety w dwie linie wygladalby jak drobny druk. */
  .cta-nocard { width: 100%; justify-content: center; }
  .hero-trust { gap: 10px 20px; margin-top: 24px; }
  .hero-under { margin-top: 18px; }

  /* SPEC SHEET — one fact per line instead of a wall of middots */
  .spec-row { padding: 18px 0; gap: 10px; }
  .spec-name { font-size: 1.02rem; }
  .spec-items { display: grid; gap: 9px; line-height: 1.55; }
  .spec-items .sep { display: none; }
  .spec-items .si { position: relative; padding-left: 18px; }
  .spec-items .si::before { content: "·"; position: absolute; left: 5px; font-weight: 700;
    color: rgba(var(--accent-rgb),0.85); }

  /* SHOWCASE — clip and its copy need a gap, not a seam */
  .showcase { gap: 46px; margin-top: 26px; }
  .sc-row { gap: 20px; }
  .sc-copy h3 { margin-bottom: 12px; }
  .sc-list { margin-top: 18px; gap: 11px; }

  /* Both of these wrapped into ragged 2-then-1 shapes that read as broken
     layout. On a phone they are lists, so they get one item per line. */
  .hero-trust { flex-direction: column; gap: 9px; }
  /* the "how fast is it" note had a quote bar down its side, which made an
     ordinary sentence look like a pull quote */
  .lc-why { border-left: 0; padding-left: 0; }

  /* product page: the same air between stacked blocks */
  .pp-left { gap: 22px; }
  .pp-grid { gap: 26px; }

  /* ALL PRODUCTS — a full-screen card per pack meant five swipes to see five
     packs; two columns fixed that but left the fifth pack sitting alone in the
     last row. So: one column of horizontal rows, thumbnail left, everything
     else right. An odd number of packs cannot strand anything, and five rows
     take less height than the two-column grid did. The description goes — at
     this width the title plus the count ("130+ LUTs") is the whole story, and
     the row opens the full page anyway. */
  .grid { grid-template-columns: 1fr; gap: 12px; }
  /* Wider thumbnail, and the text column stacked tight so the row stays short:
     a tall narrow thumbnail is what was slicing the artwork in half. */
  /* :not(.card-wide) matters — the Asset Bundle is a full-width feature and
     these row rules were overriding its own stacked layout, squeezing its copy
     into a sliver next to a thumbnail. */
  .grid .card:not(.card-wide) { display: grid; grid-template-columns: 162px 1fr; align-items: center; }
  /* Keep the thumbnail at the artwork's own 16:10 and centre it in the row.
     Stretched to full row height it was a tall narrow box, and cover had to
     throw away a third of every image to fill it. */
  .grid .card:not(.card-wide) .card-media { aspect-ratio: 16/10; min-height: 0;
    margin: 10px 0 10px 10px; border-radius: 10px; overflow: hidden; }
  .grid .card:not(.card-wide) .art-shot { inset: 0; height: 100%; object-position: center; }
  .grid .card-wide { grid-template-columns: 1fr; }
  .card-body { padding: 11px 12px; gap: 2px; }
  .card-body h4 { font-size: 0.97rem; line-height: 1.22; }
  .card-body .pdesc { display: none; }
  .card-count { font-size: 0.8rem; margin-bottom: 0; }
  .card-foot { margin-top: 3px; }
  .card-foot .pprice { font-size: 1.1rem; }
  .card-btns { gap: 6px; margin-top: 8px; }
  .card-btns .btn { padding: 8px 4px; font-size: 0.78rem; }
  .card-media .ptag { font-size: 1rem; }
  /* the category chip collided with the window dots in a 116px thumbnail, and
     the title says the same thing anyway */
  .grid .card:not(.card-wide) .card-media .ptype { display: none; }

  /* the Asset Bundle keeps the full width, just less of it */
  /* The Asset Bundle's artwork IS the pitch: five packs laid out side by side.
     A 132px-tall box on a phone is nearly 3:1, the artwork is 16:9, and cover
     answered that by slicing the outer packs off at both edges — the tile sold
     "five packs" while showing three and a half. Give the box the artwork's own
     shape and fit the whole thing inside it. The gradient behind is the card's
     own, so the small letterbox reads as part of the tile. */
  /* min-height AND aspect-ratio on purpose. On its own, aspect-ratio left the
     box at zero height here and the artwork vanished completely — the image is
     absolutely positioned, so there is no content to fall back to measuring.
     Whichever of the two an engine honours, the tile keeps its height. */
  /* Fill the frame. Fitting the artwork inside the box left bars down both
     sides and looked like a mistake, so the box takes the artwork's own 16:9
     shape and the image covers all of it, edge to edge — at matching
     proportions "cover" has nothing left to crop. The image runs under the
     window-chrome strip as well, the way the small cards do, rather than
     starting below it and leaving a band of empty gradient. */
  .grid .card-wide .cw-media { min-height: 200px; aspect-ratio: 16 / 9; }
  .grid .card-wide .art-shot { inset: 0; height: 100%; object-fit: cover; object-position: center; }
  /* contain leaves bars at the sides, and the "bundle" chip was sitting in one
     of them, reading as text leaking out from behind the artwork. The heading
     underneath already says Asset Bundle, so the chip has no job here.
     (The small cards drop it on phones for the same reason.) */
  .grid .card-wide .cw-media .ptype { display: none; }
  .cw-body { padding: 16px 16px 18px; gap: 14px; }
  .cw-text h4 { font-size: 1.25rem; }
  .cw-text .pdesc { font-size: 0.88rem; }

  /* The header was letting page content scroll ABOVE it: buttons and headings
     appeared over the bar instead of sliding under it.
     `position: sticky` keeps an element inside its scrolling ancestor, and body
     carries `overflow-x: clip` for the ticker — enough for Safari to treat the
     body as that ancestor and pin the header to the wrong edge. `fixed` is
     measured against the window itself and no ancestor's overflow can move it.
     Dropping the blur as well: it is the one thing Safari cannot repaint at
     scroll speed, and on a phone it buys nothing.
     No transform or will-change here — promoting a pinned bar to its own layer
     is precisely what makes Safari mis-place it. */
  /* On a phone the bar simply scrolls away with the page.
     Pinning it to the top was attempted four ways — blur off, sticky to fixed,
     safe-area padding, then overshooting the edge by 160px — and every one of
     them left a strip of page showing above the bar, or made the bar look like
     it grew as iOS collapsed its toolbars. The pinning was the problem, not the
     technique: what a pinned bar is worth here is the cart badge, and every
     product tile carries its own buy buttons anyway.
     No position, no offsets, no measuring where the top of the window is. */
  /* The bar follows you down the page, which is the point of it: the cart and
     its count stay reachable while you scroll a long shop.
     Two things that broke this before are gone rather than worked around:
       - The page no longer asks for viewport-fit=cover, so iOS keeps it below
         the status bar. There is no strip above the bar for anything to show
         through, and no safe-area inset to measure.
       - `fixed` rather than `sticky`. Sticky holds an element inside its
         scrolling ancestor, and body carries `overflow-x: clip` for the ticker,
         which was enough for Safari to pin the bar to the wrong box and let
         cards slide past above it. Fixed answers to the window and nothing else.
     No blur: it is the one thing Safari cannot repaint at scroll speed, and it
     bought nothing on a phone. */
  .header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    /* Flat --bg, not 97% of it. Against the strip beside the notch, which is
       flat --bg, three percent of the page showing through is exactly enough
       to see a seam between the two. */
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    /* Maciek's own suggestion, and it is the right one: a taller bar, the extra
       height being background above the logo, with the logo itself unmoved.

       Why it had to be that and not a cleverer pin. Without viewport-fit=cover
       the page still paints into the strip beside the notch, but `top: 0` for a
       fixed element means the top of the *layout* viewport, which starts below
       that strip. So the bar sat below a band the page could scroll through.
       At scroll zero nothing had reached that band yet, which is why the top of
       the page always looked fine and everything below it did not.

       cover makes `top: 0` the physical top edge, and the safe-area inset is
       then real, so it becomes the bar's extra height. Painting over that band
       from outside the viewport is not possible — a fixed element is clipped to
       the window, which is why the 140px overshoot never showed up.

       This exact pairing was tried before and still showed a seam, because the
       bar was 97% opaque over an unpainted root. Both are flat --bg now. */
    padding-top: env(safe-area-inset-top, 0px);
  }
  /* Fixed leaves the flow, so without this the first section starts underneath
     the bar. Only pages that have one get the offset; the legal pages have no
     header and do not want a blank strip above the terms. */
  body:has(.header) { padding-top: calc(var(--header-h) + 1px + env(safe-area-inset-top, 0px)); }
  /* cover also runs the page under the home indicator. */
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* Anchor jumps have to clear the bar too, or #shop lands behind it. */
  :target { scroll-margin-top: calc(var(--header-h) + 12px); }
}

/* ---------- 34. (Przelacznik jezyka zdjety 13.09.2026 razem z polska wersja.) ---------- */
/* ---------- content pages (guides and comparisons) ----------
   They ride on .legal, which is already a clean column of prose. What they add
   is a comparison table, a source line and a buy prompt at the end — the three
   things a page written to be found needs and a terms page never did. */
.article { max-width: 820px; }
.article .lead { font-size: 1.06rem; color: var(--text); margin-bottom: 20px; }
.article h2 { margin-top: 38px; }
.article h3 { font-size: 1.02rem; margin: 22px 0 8px; }
.article ol { padding-left: 20px; list-style: decimal; margin: 8px 0; }
.article ol li { color: var(--muted); line-height: 1.7; margin-bottom: 6px; }

/* Tabela w ARTYKULACH (porownania z konkurencja). Ma trzy kolumny cen i na
   telefonie przewija sie w swoim pudelku, bo inaczej nie da rady.

   12.09.2026 — WAZNE: te reguly nazywaly sie tak samo jak tabela na stronie
   glownej (`.cmp`), a stoja w pliku NIZEJ, wiec wygrywaly. Strona glowna
   dostawala stad `min-width: 520px` i `overflow-x: auto`, czyli dokladnie to,
   na co Maciek narzekal: polowa tabeli poza ekranem i przesuwanie w bok. Zaden
   z moich wczesniejszych fixow nie mial szans, bo naprawialy reguly, ktore i
   tak przegrywaly. Dlatego artykuly maja teraz wlasny prefiks `.article`. */
.article .cmp-wrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--line-2); border-radius: 10px; }
.article .cmp { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 520px; }
.article .cmp th, .article .cmp td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; color: var(--muted); }
.article .cmp thead th { color: var(--text); font-family: var(--font-head); font-weight: 600; background: var(--surface); }
.article .cmp tbody tr:last-child td { border-bottom: 0; }
.article .cmp td strong, .article .cmp th strong { color: var(--text); }
.article .cmp .yes { color: var(--money); }

/* Prices and features move. A comparison that does not say when it was checked
   is a comparison nobody should trust, including us in six months. */
.checked { font-size: 0.8rem; color: var(--faint); margin: -6px 0 22px; }
.sources { font-size: 0.82rem; color: var(--faint); margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.sources a { color: var(--muted); }

.art-cta { margin: 40px 0 8px; padding: 22px 24px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); }
.art-cta h2 { margin-top: 0; }
.art-cta p { margin-bottom: 14px; }
.art-cta .btn-cta { display: inline-block; }

.legal-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.legal-top .back { margin-bottom: 0; }

/* ---------- /install — wybor pliku i instrukcje (25.08.2026) ----------
   Strona pomocy, nie sprzedazowa: jedyne co dokladalismy do .article to
   wyglad polecenia do skopiowania i drobnych fragmentow kodu w zdaniu.
   Polecenie musi dac sie zaznaczyc i przewinac na telefonie w calosci —
   uciety ogon linii z rejestru to instrukcja, ktora nie dziala. */
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 6px; color: var(--text); white-space: nowrap; }
pre.cmd { margin: 12px 0 16px; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 10px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; }
pre.cmd code { background: none; border: 0; padding: 0; font-size: 0.86rem;
  color: var(--text); line-height: 1.6; user-select: all; }

/* =========================================================================
   AFFILIATE PROGRAMME (24.08.2026) — /affiliate, plus the discount code row
   in the cart and on the checkout page.

   Money colour is used exactly as it is everywhere else on this site: green
   is what somebody earns or pays, violet is the brand. The calculator is the
   one loud thing on the page, because it is the only argument that matters to
   a creator deciding whether to spend a post on us.
   ========================================================================= */

/* ---- code row in the cart drawer ---- */
.drawer-off { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 0.86rem; color: var(--money); margin-bottom: 6px; }

/* ---- code on the checkout page ----
   A line of text until it is clicked. A permanent empty box marked PROMO CODE
   sends people to a voucher site mid-checkout, and a share of them never come
   back — the field earns its place only for somebody who already has a code. */
.co-code { margin-top: 16px; }
/* Podpis nad polem, odkad pole jest otwarte od razu (25.08.2026). Ten sam
   rozmiar co inne etykiety w panelu platnosci, zeby nie krzyczal — ma byc
   widoczny dla tego, kto ma kod, i niewidoczny dla tego, kto go nie ma. */
.co-code-label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }
.co-code-toggle { font-size: 0.9rem; color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px; transition: color .2s; }
.co-code-toggle:hover { color: var(--text); }
.co-code-form { display: flex; gap: 8px; margin-top: 4px; }
/* `display:flex` bije `[hidden]` z przegladarki, wiec pole na kod bylo
   rozwiniete zawsze — czyli dokladnie ta pusta ramka, ktorej mialo nie byc. */
.co-code-form[hidden] { display: none; }
.co-code-form input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line-2);
  color: var(--text); padding: 11px 13px; border-radius: 10px; font-size: 0.95rem;
  letter-spacing: 0.08em; text-transform: uppercase; outline: none;
  transition: border-color .2s, box-shadow .2s; }
.co-code-form input:focus { border-color: var(--money); box-shadow: 0 0 0 3px rgba(var(--money-rgb),0.16); }
.co-code-go { font-family: var(--font-head); font-weight: 600; padding: 11px 18px; border-radius: 10px;
  border: 1px solid var(--line-2); color: var(--text); transition: border-color .2s, color .2s; }
.co-code-go:hover { border-color: var(--money); color: var(--money); }
.co-code-go:disabled { opacity: 0.6; }
.co-code-err { margin-top: 8px; font-size: 0.86rem; color: #ff8b7a; }
.co-code.is-on { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border: 1px solid rgba(var(--money-rgb),0.35); border-radius: 10px;
  background: rgba(var(--money-rgb),0.07); }
.co-code-tag { font-weight: 700; letter-spacing: 0.08em; color: var(--money); margin-right: 8px; }
.co-code-said { font-size: 0.9rem; color: var(--muted); }
.co-code-drop { font-size: 0.84rem; color: var(--faint); text-decoration: underline;
  text-underline-offset: 3px; }
.co-code-drop:hover { color: var(--text); }
.co-off span:first-child { color: var(--money); }
.co-off span:last-child { color: var(--money); font-weight: 600; }

/* ---- the page ---- */
.af-hero { display: block; padding-bottom: clamp(18px, 3vw, 32px); }
.af-hero .hero-copy { max-width: 720px; }

.af-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.af-stat { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface);
  padding: 20px 18px; display: flex; flex-direction: column; gap: 6px; }
.af-stat strong { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1; color: var(--text); }
.af-stat span { font-size: 0.88rem; color: var(--muted); line-height: 1.45; }
.af-stat-money strong { color: var(--money); }

/* ---- calculator ---- */
.af-calc { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 18px; align-items: start; }
.af-calc-in, .af-calc-out { border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--surface); padding: clamp(20px, 3vw, 28px); }
.af-calc-out { border-color: rgba(var(--money-rgb),0.32);
  background: linear-gradient(170deg, rgba(var(--money-rgb),0.08), var(--surface) 60%); }
.af-label { font-family: var(--font-body); font-weight: 700; font-size: 0.76rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--faint); margin-bottom: 12px; }
.af-label-2 { margin-top: 26px; }
.af-count { color: var(--money); margin-left: 6px; letter-spacing: 0.04em; }

/* Jeden produkt zamiast trzech przyciskow (12.09.2026): od 9.09 wtyczka jest
   jedyna platna rzecza w sklepie, wiec kalkulator nie ma czego wybierac.
   Kwote wpisuje affiliate.js z katalogu w app.js. */
.af-buy { display: flex; align-items: baseline; gap: 14px; }
.af-buy strong { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.1rem);
  color: var(--money); letter-spacing: -0.02em; line-height: 1; }
.af-buy span { font-size: 0.9rem; color: var(--muted); line-height: 1.5; max-width: 34ch; }

/* Wypelnienie sledzi wartosc: --fill ustawia affiliate.js przy kazdym ruchu.
   Bez tego suwak wygladal tak samo przy jednej sprzedazy i przy stu — jedyna
   rzecza, ktora sie ruszala, byla kropka. */
.af-calc-in input[type=range] { width: 100%; appearance: none; height: 4px; border-radius: 4px;
  --fill: 10%;
  background: linear-gradient(90deg, var(--money) var(--fill), rgba(var(--money-rgb),0.18) var(--fill));
  outline: none; transition: background .12s linear; }
.af-calc-in input[type=range]::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px;
  border-radius: 50%; background: var(--money); border: 3px solid var(--bg); cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.af-calc-in input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%;
  background: var(--money); border: 3px solid var(--bg); cursor: pointer; }

.af-out-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; }
.af-out-row strong { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; color: var(--text); }
.af-out-big { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 18px 0 4px; }
.af-out-big span { font-family: var(--font-body); font-weight: 700; font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); }
.af-out-big strong { font-family: var(--font-head); font-weight: 700; color: var(--money);
  font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; }
.af-out-year { border-bottom: 0; }
.af-fine { margin-top: 14px; font-size: 0.85rem; line-height: 1.6; color: var(--faint); }

/* ---- steps, who, rules ---- */
/* Kroki jako kafle, nie tekst wiszacy na kresce (25.08.2026). Numer jest duzy
   i przygaszony, wiec porzadek widac katem oka, zanim ktokolwiek zacznie czytac. */
.af-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.af-step { position: relative; overflow: hidden; border: 1px solid var(--line-2);
  border-radius: var(--radius); background: var(--surface); padding: 20px 20px 22px; }
.af-num { position: absolute; top: 2px; right: 14px; font-family: var(--font-head); font-weight: 700;
  font-size: 3.4rem; line-height: 1; color: rgba(var(--accent-rgb), 0.16); pointer-events: none; }
.af-step h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.12rem; margin: 0 0 8px;
  padding-right: 34px; }
.af-step p { font-size: 0.92rem; color: var(--muted); line-height: 1.6; }

.af-rules { display: flex; flex-direction: column; }
.af-rules li { position: relative; padding: 13px 0 13px 26px; font-size: 1.02rem; color: var(--muted);
  line-height: 1.55; border-bottom: 1px solid var(--line); }
.af-rules li:first-child { padding-top: 0; }
.af-rules li:last-child { border-bottom: 0; padding-bottom: 0; }
.af-rules li::before { content: "—"; position: absolute; left: 0; top: 13px; color: var(--accent); }
.af-rules li:first-child::before { top: 0; }
.af-rules strong { color: var(--text); }


/* ---- application form ---- */
.af-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 860px; }
.af-field { display: flex; flex-direction: column; gap: 7px; }
.af-field > span { font-size: 0.85rem; color: var(--muted); }
.af-field input, .af-field textarea { background: var(--bg); border: 1px solid var(--line-2);
  color: var(--text); padding: 12px 13px; border-radius: 10px; font-size: 0.98rem; outline: none;
  transition: border-color .2s, box-shadow .2s; resize: vertical; }
.af-field input:focus, .af-field textarea:focus { border-color: var(--money);
  box-shadow: 0 0 0 3px rgba(var(--money-rgb),0.16); }
.af-wide { grid-column: 1 / -1; }
.af-submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.af-submit .af-fine { margin-top: 0; max-width: 46ch; }
.af-form-msg { grid-column: 1 / -1; font-size: 0.98rem; padding: 14px 16px; border-radius: 10px; }
.af-form-msg.is-ok { color: var(--money); border: 1px solid rgba(var(--money-rgb),0.35);
  background: rgba(var(--money-rgb),0.08); }
.af-form-msg.is-bad { color: #ff8b7a; border: 1px solid rgba(255,139,122,0.35);
  background: rgba(255,139,122,0.07); }

/* ---- the affiliate's own numbers ---- */
.af-dash { padding-top: clamp(24px, 4vw, 40px); }
.af-dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  flex-wrap: wrap; margin-bottom: 18px; }
.af-dash-code { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.04em; }
.af-dash-sub { color: var(--muted); font-size: 0.95rem; margin-top: 4px; }
.af-dash-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.af-dash-link > span { font-size: 0.8rem; color: var(--faint); text-transform: uppercase;
  letter-spacing: 0.12em; width: 100%; }
.af-dash-link input { width: min(360px, 68vw); background: var(--bg); border: 1px solid var(--line-2);
  color: var(--text); padding: 10px 12px; border-radius: 10px; font-size: 0.9rem; }
.af-copy { font-family: var(--font-head); font-weight: 600; padding: 10px 16px; border-radius: 10px;
  border: 1px solid var(--line-2); color: var(--text); transition: border-color .2s, color .2s; }
.af-copy:hover { border-color: var(--money); color: var(--money); }
.af-dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.af-dash-list { margin-top: 18px; border-top: 1px solid var(--line); }
.af-dash-row { display: grid; grid-template-columns: 100px 1fr auto auto; gap: 14px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); }
.af-dash-row strong { color: var(--money); font-weight: 700; min-width: 68px; text-align: right; }
.af-dash-row.is-off { opacity: 0.5; text-decoration: line-through; }
.af-dash-what { color: var(--text); }

@media (max-width: 900px) {
  .af-stats, .af-dash-grid { grid-template-columns: repeat(2, 1fr); }
  .af-calc { grid-template-columns: 1fr; }
  .af-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .af-form { grid-template-columns: 1fr; }
  .af-steps { grid-template-columns: 1fr; }
  .af-dash-row { grid-template-columns: 84px 1fr auto; }
  .af-dash-row span:nth-child(3) { display: none; }   /* the gross; the commission is the point */
}


/* ---- ruch (25.08.2026) ----
   Zasada ta sama, co wszedzie na tej stronie: ruch ma cos MOWIC. Kafel unosi
   sie, bo da sie w niego wejsc; duza kwota drga, bo wlasnie sie zmienila;
   suwak rosnie pod palcem, bo trzymasz go w tej chwili. Nic tu nie rusza sie
   samo z siebie, wiec nie ma czego wyciszac poza tym jednym drgnieciem. */
.af-stat { transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.af-stat:hover { transform: translateY(-3px); border-color: rgba(var(--money-rgb),0.35);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45); }

.af-calc-in input[type=range]::-webkit-slider-thumb { transition: transform .18s var(--ease), box-shadow .18s; }
.af-calc-in input[type=range]:active::-webkit-slider-thumb { transform: scale(1.22);
  box-shadow: 0 0 0 8px rgba(var(--money-rgb),0.16); }
.af-calc-in input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(var(--money-rgb),0.22); }

.af-out-big strong { display: inline-block; will-change: transform; }
.af-out-big strong.is-bump { animation: af-bump .34s var(--ease); }
@keyframes af-bump {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.055); }
  100% { transform: scale(1); }
}

.af-step { transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.af-step:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb),0.45);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45); }

.af-rules li { transition: color .25s; }
.af-rules li:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .af-out-big strong.is-bump { animation: none; }
  .af-stat:hover { transform: none; }
}

/* 13.09.2026, Maciek: „na glownej musi byc zakladka affiliate". Do dzis link
   znikal ponizej 620 px, wiec na telefonie, gdzie ogladaja strone tworcy
   z Instagrama, programu partnerskiego nie bylo widac w ogole. Zostaje na
   kazdej szerokosci; zmierzone nizej, ile miejsca ma przy 390 px. */
/* 12.09.2026: po dolozeniu zielonej pigulki „Free trial" naglowek przestal sie
   miescic na telefonie i przelacznik jezyka uciekal za prawa krawedz. Link
   tekstowy („Shop", „How it works") schodzi pierwszy: prowadzi tam, dokad na
   telefonie i tak sie scrolluje, a pigulka jest jedynym wezwaniem w pasku. */
@media (max-width: 700px) {
  .header-link:not(.header-affil), .header-shop { display: none; }
  .header-inner { gap: 10px; }
  /* 12.09.2026, zmierzone w przegladarce na 390 px: pasek potrzebowal 457 px
     na polskiej stronie produktu, czyli koszyk wychodzil poza ekran. Ikona
     Instagrama schodzi (jest w stopce), a odstepy sie zaciskaja. */
  .header-right .ig { display: none; }
  .header-right { gap: 8px; }
}
@media (max-width: 430px) {
  /* Polski napis („Darmowy trial") jest o 20 px szerszy od angielskiego, wiec
     to on wyznacza te wartosci. Zmierzone na 390 px: pasek miesci sie z zapasem
     przy 0.76 rem i tych odstepach. */
  /* 13.09.2026: doszedl link „Affiliate", wiec pasek jest ciasniejszy.
     Bez przelacznika jezyka (zdjety tego samego dnia) miesci sie z zapasem
     na 360 px. */
  .header-trial { font-size: 0.72rem; padding: 7px 9px; }
  .header-affil { font-size: 0.78rem; }
  .brand-word { font-size: 0.92rem; }
  .brand-word .reg { display: none; }
  .header-inner { gap: 8px; }
  .header-right { gap: 5px; }
  .cart-btn { width: 38px; height: 38px; }
}

/* Strona partnerska niesie o polowe mniej tekstu niz sklep, wiec odstepy ze
   sklepu robily z niej korytarz. Tu sekcje stoja blizej siebie. */
.page-affiliate .section { padding-block: clamp(30px, 4vw, 54px); }
.page-affiliate .af-hero { padding-bottom: clamp(14px, 2vw, 24px); }
.page-affiliate .section-head { margin-bottom: 22px; }

/* ---- cztery sekcje zamiast osmiu (25.08.2026, druga uwaga Macka: „za duzo
   segmentow") ----
   Nic z tresci nie wypadlo — wypadly naglowki nad garscia tresci. Cztery
   liczby i trzy chipy dolaczyly do hero, bo tlumacza obietnice, ktora wlasnie
   nad nimi stoi; cztery kroki weszly pod kalkulator, bo odpowiadaja na „i co
   dalej", a to pytanie przychodzi po decyzji; pytania stanely pod zasadami,
   bo mowia o tym samym: na co uwazac. */
.af-hero .af-stats { margin-top: clamp(24px, 4vw, 36px); }

/* Kroki jako pasek pod kalkulatorem, a nie jego rownorzedny sasiad: mniejszy
   kafel, mniejszy numer, mniejszy tekst. Kalkulator ma zostac najwazniejsza
   rzecza na tym ekranie. */
/* Para kart „co mowisz / co sie dzieje" (12.09.2026): ten sam .twhat co w sekcji
   triala na stronie glownej, tylko ze strzalka zamiast plusa, bo to jest
   kolejnosc zdarzen, a nie suma. Stoi nad kalkulatorem. */
.af-what { margin-bottom: clamp(16px, 2.5vw, 22px); }
.af-what .tw-plus { font-size: 1.7rem; color: var(--faint); }
@media (max-width: 720px) { .af-what .tw-plus { transform: rotate(90deg); font-size: 1.4rem; } }

.af-steps-slim { margin-top: clamp(16px, 2.5vw, 22px); }
.af-steps-slim .af-step { padding: 16px 18px 18px; }
.af-steps-slim .af-step h3 { font-size: 1rem; margin-bottom: 5px; padding-right: 28px; }
.af-steps-slim .af-step p { font-size: 0.87rem; }
.af-steps-slim .af-num { font-size: 2.6rem; right: 12px; }

/* Zasady i pytania obok siebie, pod wspolnym naglowkiem (25.08.2026, druga
   poprawka po zrzucie od Macka).

   Bylo pasmo: naglowek z lewej, tresc z prawej. Przy pieciu zasadach dzialalo.
   Po dolozeniu pod nie pieciu pytan prawa kolumna urosla dwukrotnie, a lewa
   zostala z jednym naglowkiem — czyli **pol ekranu pustki obok najwazniejszej
   tresci na tej stronie**, i do tego tresc scisnieta do jednej trzeciej
   szerokosci. Naglowek wraca wiec na gore, tak jak w kazdej innej sekcji, a pod
   nim stoja dwie rownorzedne kolumny: zasady i pytania. Zadna nie jest pusta. */
.af-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px);
  align-items: start; }

/* 13.09.2026: regulamin w szesciu grupach zamiast szesciu linijek (Maciek:
   „musi byc zasady i wymagania"). Dwie kolumny kart na desktopie, jedna na
   telefonie. Pytania schodza pod spod na cala szerokosc. */
.af-rulegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.af-rulebox { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface);
  padding: 20px 22px 18px; }
.af-rulebox h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; margin: 0 0 8px; }
.af-rulebox .af-rules li { font-size: 0.95rem; padding: 10px 0 10px 22px; line-height: 1.55; }
.af-rulebox .af-rules li::before { top: 10px; }
.af-rulebox .af-rules li:first-child { padding-top: 10px; }
.af-rulebox .af-rules li:first-child::before { top: 10px; }
.af-rulebox h3 { margin-bottom: 2px; }
.af-faq-wide { margin-top: clamp(22px, 3vw, 34px); }
@media (max-width: 860px) { .af-rulegrid { grid-template-columns: 1fr; } }

/* `.faq` ma wlasna szerokosc i gorny margines liczony na osobna sekcje — w
   kolumnie oba przeszkadzaja. */
.af-faq { max-width: none; margin: 0; }
.af-faq-label { margin-bottom: 12px; }

/* Pierwsza zasada rownana z pierwszym pytaniem: bez tego lista zaczyna sie
   wyzej niz kolumna obok i cale pasmo wyglada na przekrzywione. */
.af-two .af-rules { padding-top: 26px; }

@media (max-width: 860px) {
  .af-two { grid-template-columns: 1fr; gap: 28px; }
  .af-two .af-rules { padding-top: 0; }
}

/* Formularz zgloszeniowy nie ma powodu byc wezszy niz sekcja nad nim — przy
   860 px konczyl sie w polowie ekranu i wygladal na niedokonczony. */
.page-affiliate .af-form { max-width: none; }

/* ---- znaki platnosci pod przyciskiem (25.08.2026) ----
   Bialy kafelek pod kazdym logo, bo znaki kart sa robione na jasne tlo: Visa
   jest granatowa, Apple Pay czarne, i na naszym tle po prostu znikaja. To ten
   sam uklad, ktory ludzie widza w kazdym innym sklepie, wiec czyta sie go bez
   patrzenia. */
.co-cards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.co-card { display: grid; place-items: center; height: 30px; min-width: 46px; padding: 0 9px;
  border-radius: 7px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.35); }
.co-card img { height: 15px; width: auto; display: block; }
.co-card-sq img { height: 24px; }   /* Amex to kwadrat — przy 15 px byl znaczkiem */
/* BLIK to nie sam napis, tylko napis w ciemnym kaflu: przy 15 px litery w srodku
   robily sie mniejsze niz wszystko obok, wiec kafel dostaje wiecej wysokosci. */
.co-card-box img { height: 21px; }

/* Pole na kod siedzi teraz w panelu platnosci, wiec nie potrzebuje gornego
   marginesu sprzed listy produktow. */
.co-pay .co-code { margin-top: 12px; }
.co-pay .co-code-form { flex-wrap: wrap; }
.co-pay .co-code-form input { min-width: 120px; }

/* ---- powiekszanie strony wylaczone (25.08.2026, decyzja Macka) ----
   `manipulation` zabiera podwojne stukniecie, ktorym telefon powieksza tekst.
   Sam meta viewport nie wystarcza: iOS Safari go ignoruje od lat, a Chrome na
   Androidzie i tak przepuszcza dwuklik. Reszte (szczypanie na gladziku, gesty
   w Safari) przechwytuje app.js. */
html { touch-action: manipulation; }

/* =========================================================================
   MOBILE — dopisane po audycie mobile (25.08.2026)
   Glowny ruch idzie z telefonu, a arkusz wyzej jest pisany od desktopu w dol
   (same `max-width`). Zamiast go przepisywac, ten blok naprawia to, co na
   telefonie realnie boli. Caly blok jest na koncu pliku, wiec wygrywa
   specyficznoscia i da sie go wyciac jednym ciachnieciem, nic nie psujac.
   ========================================================================= */

/* ---- 1. iOS: pole z czcionka ponizej 16px zoomuje cala strone ----
   Tapniecie w pole kodu rabatowego przy kasie powiekszalo widok i kupujacy
   musial odszczypywac go z powrotem — w momencie, w ktorym placi.
   `max()` zamiast twardych 16px, zeby uszanowac wieksza czcionke z ustawien. */
.co-code-form input,
.af-field input,
.af-field textarea,
.af-dash-link input { font-size: max(16px, 1rem); }

/* ---- 2. Dotyk nie ma najechania ----
   Na telefonie `:hover` wchodzi po tapnieciu i ZOSTAJE, dopoki nie stukniesz
   gdzie indziej. Karta, ktora na desktopie unosi sie pod kursorem, na telefonie
   po prostu zostawala uniesiona i wygladalo to na zaciecie strony. */
@media (hover: none) {
  .free-card:hover,
  .card:hover,
  .review:hover,
  .lc-facts li:hover,
  .plan[data-open]:hover,
  .af-stat:hover,
  .af-step:hover { transform: none; }
  .wt-play:hover .wt-btn { transform: none; }
  /* ta ma wlasny kat spoczynkowy, wiec wraca do niego, a nie do zera */
  .brand:hover .bw-slash { transform: rotate(18deg) translateY(0.08em); }
}

/* ---- 3. Telefon: cele dotyku i czytelnosc ---- */
@media (max-width: 640px) {

  /* 3a. Palec to nie kursor. Minimum Apple HIG to 44x44 px.
         `min-height` zamiast paddingu, zeby nie rozjechac szerokosci. */
  .btn,
  .btn-add,
  .card-btns .btn,
  .cookie-decline,
  .chip,
  .soon-pill { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  .cart-btn { width: 44px; height: 44px; }
  /* Strona po zakupie. Klucz i przycisk "Copy" ida na cala szerokosc: klucz
     ma 19 znakow monospace z rozstrzeleniem i na 320-360 px wychodzil poza
     kolumne, a przycisk mial 38 px wysokosci przy minimum 44. Przy okazji
     kopiowanie ladnie wpada pod kciuk, bo to jedyna rzecz do klikniecia
     na tym ekranie poza pobraniem. */
  .key-row { gap: 10px; }
  .key-row code { width: 100%; text-align: center; font-size: clamp(0.95rem, 4.4vw, 1.25rem);
    letter-spacing: 0.08em; }
  .key-copy { width: 100%; min-height: 44px; }
  .drawer-close,
  .gate-close { width: 44px; height: 44px; }
  .co-remove { width: 40px; height: 40px; }

  /* powiekszamy pole trafienia, nie sam napis: ujemny margines zdejmuje
     z powrotem to, co padding dolozyl do ukladu */
  .di-remove { padding: 12px; margin: -12px; }
  .footer-legal a { padding: 8px 0; }
  .footer-legal { gap: 10px 18px; }

  /* 3b. Nic czytanego ponizej 14 px.
         Etykiety i badge'e (1-3 slowa, wersaliki) zostaja male celowo —
         tu chodzi o zdania, ktore ktos naprawde czyta na telefonie. */
  .card-body .pdesc,
  .free-list li,
  .cookie p,
  .co-guarantee,
  .co-accepted,
  .co-wallets,
  .co-secured,
  .co-error,
  .co-code-err,
  .co-code-label,
  .co-code-drop,
  .gate-error,
  .gate-fine,
  .drawer-fine,
  .di-price,
  .di-remove,
  .bx-trust li,
  .buybox .bx-trust li,
  .review figcaption,
  .pb-note,
  .fb-note,
  .g-points span,
  .made-for,
  .section-tag,
  .dl-note,
  .dl-size,
  .su-note,
  .sources,
  .legal .note,
  .legal .legal-meta,
  .af-field > span,
  .af-fine,
  .af-label,
  .footer-legal a { font-size: 0.875rem; }
}

/* ---------- 3x. Ruch dolozony 27.08.2026 ----------
   Trzy miejsca, w ktorych cos przeskakiwalo bez przejscia. Reszta strony ruch
   juz miala (reveal, hover kart, wcisniecia, szuflada, ticker), wiec tu nie ma
   nic „dla ozdoby" — kazdy z tych trzech zamyka konkretna dziure. */

/* 1. Odpowiedz w FAQ. Otwarcie bylo skokiem: caly akapit pojawial sie w jednej
      klatce i oko gubilo, gdzie sie zaczyna. Zamkniecie zostaje natychmiastowe
      i tak ma zostac — przegladarka chowa tresc <details> w tej samej klatce,
      w ktorej znika [open], wiec wyjscie wymagaloby przechwycenia zdarzenia
      w JS i trzymania panelu otwartego wbrew elementowi. Nikt nie patrzy, jak
      pytanie sie zamyka. */
.faq details[open] > *:not(summary),
.legal details.drop[open] > *:not(summary) { animation: ans-in .24s var(--ease) both; }
@keyframes ans-in { from { opacity: 0; transform: translateY(-6px); } }

/* 2. „✓ Sent" po zapisie na darmowa paczke. Formularz znikal i w jego miejscu
      z niczego pojawiala sie linijka tekstu. To jedyny moment na tej stronie,
      w ktorym ktos cos DOSTAJE za darmo, wiec jest to tez jedyne miejsce, gdzie
      lekkie przestrzelenie skali jest na miejscu. */
.gate-success { animation: sent-in .34s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes sent-in { from { opacity: 0; transform: scale(0.94); } }

/* 3. Przycisk, ktory czeka na serwer (Stripe, wysylka darmowej paczki).
      Sam napis „Taking you to Stripe…" stoi nieruchomo i przy wolnym laczu
      wyglada tak samo jak zawieszona strona. Pasek pod spodem mowi „to jeszcze
      trwa" i nie udaje, ze wie ile — bo nie wie. Klasa, nie [disabled]:
      przycisk bywa wylaczony takze z innych powodow. */
.is-working { position: relative; overflow: hidden; }
.is-working::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 38%;
  background: currentColor; opacity: 0.5; border-radius: 2px;
  animation: work-bar 1.15s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes work-bar { from { transform: translateX(-105%); } to { transform: translateX(370%); } }

@media (prefers-reduced-motion: reduce) {
  .faq details[open] > *:not(summary),
  .legal details.drop[open] > *:not(summary),
  .gate-success { animation: none; }
  /* Pasek zostaje, bo niesie informacje („trwa"), ale przestaje jezdzic. */
  .is-working::after { animation: none; width: 100%; opacity: 0.28; }
}

/* ---- 4. Mniej ruchu, gdy ktos o to prosi ----
   Wyzej w pliku jest osiem punktowych blokad na konkretne animacje. Ten
   domyka reszte: przejscia i scroll-reveal, ktore tamte pomijaly. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================== TELEFON: REAKCJA NA DOTKNIECIE =====================
   27.08.2026, priorytet Macka: ruch ma dzialac przede wszystkim na telefonie.

   Problem, ktory to naprawia: cala reakcja strony na dotyk byla zbudowana na
   `:hover`. Na telefonie nie ma kursora, wiec przegladarka udaje najechanie w
   momencie tapniecia — i ZOSTAWIA je zapalone. Po dotknieciu karty produktu
   zostawala ona uniesiona i podswietlona, dopoki uzytkownik nie dotknal czegos
   innego. Wygladalo to jak zaznaczenie, ktorego nie da sie cofnac.

   `@media (hover: none)` to pytanie "czy to urzadzenie w ogole umie najechac".
   Telefon odpowiada "nie" — i dostaje inny zestaw reakcji niz mysz. */
@media (hover: none) {
  /* Nic nie zostaje uniesione po tapnieciu. */
  .card:hover, .free-card:hover { transform: none; }

  /* Zamiast tego: element UGINA SIE pod palcem i wraca. To jedyna informacja
     zwrotna, jaka telefon daje przed przeladowaniem widoku — bez niej tapniecie
     w cisze przez pol sekundy czyta sie jak "nie zadzialalo, kliknij jeszcze raz". */
  .btn, .btn-cta, .btn-primary, .btn-free, .btn-ghost, .btn-ghost-lg,
  .btn-add, .btn-buy, .btn-checkout, .btn-stripe {
    transition: transform .12s var(--ease), filter .2s, border-color .2s, background-color .2s, color .2s;
  }
  .btn:active, .btn-cta:active, .btn-primary:active, .btn-free:active,
  .btn-ghost:active, .btn-ghost-lg:active, .btn-add:active, .btn-buy:active,
  .btn-checkout:active, .btn-stripe:active { transform: scale(0.955); }

  /* Karta jest duza, wiec ugina sie duzo subtelniej — te same 4.5% co na
     przycisku wygladalyby na niej jak usterka. */
  .card, .free-card { transition: transform .14s var(--ease), border-color .25s, box-shadow .25s; }
  .card:active, .free-card:active { transform: scale(0.985); }
}