@charset "UTF-8";
/* ============================================================================
   VectraWatch — site.css
   Jeden plik, cztery warstwy, bez build stepu. Wartości pochodzą wprost
   z prototypów w reference/design_handoff/design/, nie ze streszczenia —
   README handoffu miejscami się z kodem nie zgadza (np. podaje 15px dla
   linków nawigacji, w kodzie jest 14.5px).
   ========================================================================= */

@layer tokens, base, components, utilities;

/* ==========================================================================
   1. TOKENY
   ========================================================================== */
@layer tokens {
  :root {
    /* --- Kolory udokumentowane w handoffie --- */
    --c-page:            #ffffff;
    --c-band:            #fbfcfd;  /* tinted band: cennik, trust bar */
    --c-ink:             #101828;  /* h1–h3, mocny tekst; też tło ciemnego CTA */
    --c-body:            #5b6478;  /* akapity, linki nav w spoczynku */
    --c-secondary:       #3c4457;  /* bullety w kartach, linki w stopce */
    --c-accent:          #1d3fbb;
    --c-accent-hover:    #16309a;
    --c-accent-tint:     #eef1fd;  /* tło pigułek, hover nav, ring focusa */
    --c-border:          #e6e8ee;
    --c-border-strong:   #c3cbdd;
    --c-border-input:    #d5d9e3;
    --c-hairline:        #eef0f4;  /* dzielniki wewnątrz kart */
    --c-placeholder:     #dfe3ea;  /* szare bloki logotypów pilotażowych */

    /* --- Kontrast: token rozdzielony (decyzja #14) ---
       Oryginalne #8a92a6 na białym daje ~3,1:1 i nie spełnia WCAG AA (4,5:1).
       Tekst czytany dostaje ciemniejszy wariant; #8a92a6 zostaje wyłącznie
       dla dekoracyjnych etykiet w mockupach, które są aria-hidden. */
    --c-muted:            #6b7385;  /* ~4,6:1 — kickery, drobny druk, jednostki */
    --c-muted-decorative: #8a92a6;  /* tylko wnętrza mockupów (aria-hidden) */

    /* --- Kolory obecne w kodzie, nieudokumentowane w handoffie --- */
    --c-chart-secondary: #ccd6f2;  /* słupki „market median" */
    --c-on-dark-body:    #9aa3b7;  /* tekst na ciemnym panelu CTA (~6,4:1, OK) */
    --c-hairline-faint:  #f4f6fa;  /* linie wierszy w mock-tabelach */
    --c-track:           #f2f4f8;  /* tło pigułek neutralnych, tor paska */
    --c-border-tint:     #dfe5f2;  /* obramowanie karty hero use-case */
    --c-band-tint:       #f4f7fd;  /* tło sekcji hero use-case */
    --c-pill-tint:       #e2e9fa;  /* pigułka w hero use-case */
    --c-ok:              #1d8f5d;
    --c-warn:            #b5811a;
    --c-danger:          #c2413c;  /* był w mockupach; służy też za stan błędu */
    --c-danger-tint:     #fbeeed;  /* jedyna nowa wartość — ring błędu */

    /* --- Powierzchnie półprzezroczyste --- */
    --c-header-bg:       rgba(255, 255, 255, .88);
    --c-panel-bg:        rgba(255, 255, 255, .97);
    --blur-header:       blur(10px);

    /* --- Typografia ---
       ≈ → ✓ nie istnieją w żadnym z tych fontów (zweryfikowane: Google zwraca
       pusty subset). Prototypy też renderowały je zastępczo. Stack zastępczy
       jest jawny, żeby rendering był powtarzalny; → i ✓ zastępujemy inline SVG. */
    --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* --- Layout --- */
    --w-container: 1180px;   /* główna kolumna */
    --w-narrow:     900px;   /* kolumna FAQ */
    --w-prose:      780px;   /* kolumna stron prawnych (README mylnie podaje 900) */
    --pad-x:         32px;
    --h-header:      68px;

    /* --- Promienie --- */
    --r-nav:      7px;   /* hover linku nav, zakładka cennika */
    --r-btn:      8px;   /* przyciski desktop */
    --r-btn-lg:   9px;   /* przyciski mobilne, CTA planu */
    --r-input:   10px;   /* inputy, przycisk hero, pasek zakładek */
    --r-tile:    11px;   /* kafelki ikon 44×44 */
    --r-card:    14px;
    --r-card-lg: 16px;   /* karta hero use-case */
    --r-panel:   18px;   /* ciemny panel CTA */
    --r-pill:   999px;

    /* --- Cienie --- */
    --sh-card-hover: 0 12px 32px -20px rgba(16, 24, 40, .35);
    --sh-popular:    0 20px 44px -28px rgba(29, 63, 187, .5);
    --sh-tab-active: 0 1px 3px rgba(16, 24, 40, .14);
    --sh-hero-card:  0 18px 50px -26px rgba(16, 24, 40, .3);
    --ring-focus:    0 0 0 3px var(--c-accent-tint);
    --ring-error:    0 0 0 3px var(--c-danger-tint);

    /* --- Ruch --- */
    --t-base: color .15s ease, background .15s ease, border-color .15s ease;
    --t-acc-h: max-height .28s ease;
    --t-acc-o: opacity .2s ease;
  }
}

/* ==========================================================================
   2. FONTY (self-hosted — RODO: żadnych żądań do fonts.gstatic.com)
   ========================================================================== */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-sans-400-latin.woff2") format("woff2");
  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; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-sans-400-latin-ext.woff2") format("woff2");
  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: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/instrument-sans-500-latin.woff2") format("woff2");
  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; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/instrument-sans-500-latin-ext.woff2") format("woff2");
  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: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/instrument-sans-600-latin.woff2") format("woff2");
  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; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/instrument-sans-600-latin-ext.woff2") format("woff2");
  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: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/instrument-sans-700-latin.woff2") format("woff2");
  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; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/instrument-sans-700-latin-ext.woff2") format("woff2");
  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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  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; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  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; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  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; }

/* ==========================================================================
   3. BASE
   ========================================================================== */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    background: var(--c-page);
    color: var(--c-ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  a { color: var(--c-accent); text-decoration: none; }
  a:hover { color: var(--c-accent-hover); }

  /* [hidden] musi wygrać z każdym display: z warstwy utilities.
     Bez tego .u-stack{display:flex} na panelu cennika nadpisuje domyślne
     [hidden]{display:none} przeglądarki i wszystkie trzy grupy cen widać naraz.
     !important w warstwie base bije normalne deklaracje z warstw późniejszych —
     dla deklaracji ważnych kolejność warstw jest odwrócona. */
  [hidden] { display: none !important; }

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

  button { font-family: inherit; }

  h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
  /* Handoff: „nigdy nie odstępujemy rodzeństwa marginesami — tylko gap". */

  /* Ring focusa musi być widoczny na każdym elemencie interaktywnym.
     Handoff zabrania polegania na domyślnym outline przeglądarki. */
  :focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: 3px;
  }

  /* Pomijanie nawigacji — brak w designie, wymagane przez dostępność. */
  .vw-skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--c-page); color: var(--c-accent);
    padding: 12px 18px; border: 1px solid var(--c-accent);
    border-radius: var(--r-btn); font-size: 15px; font-weight: 600;
  }
  .vw-skip:focus { left: 12px; top: 12px; }

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

/* ==========================================================================
   4. KOMPONENTY — shell (nagłówek, nawigacja, stopka, przyciski)
   ========================================================================== */
@layer components {

  /* ---------- Nagłówek ---------- */
  .vw-header {
    position: sticky; top: 0; z-index: 20;
    background: var(--c-header-bg);
    backdrop-filter: var(--blur-header);
    -webkit-backdrop-filter: var(--blur-header);
    border-bottom: 1px solid var(--c-border);
  }
  .vw-header__bar {
    max-width: var(--w-container); margin: 0 auto;
    padding: 0 var(--pad-x); height: var(--h-header);
    display: flex; align-items: center; gap: 30px;
  }

  .vw-brand { display: flex; align-items: center; gap: 9px; color: var(--c-ink); }
  .vw-brand:hover { color: var(--c-ink); }
  .vw-brand__mark { width: 42px; height: 42px; }
  .vw-brand__name { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }

  /* Nawigacja stoi PRZY logo — odstęp bierze z gap:30px kontenera paska.
     margin-left:auto należy do bloku akcji, nie tutaj: postawiony na nawigacji
     wypychał ją na prawo razem z przyciskami i pasek rozjeżdżał się z projektem. */
  .vw-nav { display: flex; align-items: center; gap: 4px; font-size: 14.5px; }
  .vw-nav__link {
    color: var(--c-body); padding: 6px 10px;
    border-radius: var(--r-nav); transition: var(--t-base);
  }
  .vw-nav__link:hover,
  .vw-nav__link[aria-current="page"] { color: var(--c-accent); background: var(--c-accent-tint); }

  .vw-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

  /* ---------- Przyciski ---------- */
  .vw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 14.5px; font-weight: 500; text-align: center;
    padding: 10px 18px; border-radius: var(--r-btn);
    border: 1px solid transparent; cursor: pointer; transition: var(--t-base);
  }
  .vw-btn--ghost { color: var(--c-ink); background: transparent; }
  .vw-btn--ghost:hover { color: var(--c-accent); background: var(--c-accent-tint); border-color: var(--c-border-strong); }

  .vw-btn--primary { font-weight: 600; color: #fff; background: var(--c-accent); }
  .vw-btn--primary:hover { color: #fff; background: var(--c-accent-hover); }

  /* Wariant hero: wyższy, większy promień (prototyp: 50px / 10px) */
  .vw-btn--hero { height: 50px; padding: 0 22px; font-size: 15px; font-weight: 600; border-radius: var(--r-input); }

  /* Wariant w panelu mobilnym: pełna szerokość, promień 9px */
  .vw-btn--block { width: 100%; font-size: 15px; font-weight: 600; padding: 13px; border-radius: var(--r-btn-lg); }
  .vw-btn--outline { color: var(--c-ink); border-color: var(--c-border-input); background: transparent; }
  .vw-btn--outline:hover { color: var(--c-ink); border-color: var(--c-ink); }

  /* ---------- Hamburger ---------- */
  .vw-burger {
    display: none; margin-left: auto;
    width: 44px; height: 44px; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--r-btn); cursor: pointer; transition: var(--t-base);
  }
  .vw-burger:hover { background: var(--c-accent-tint); border-color: var(--c-border-strong); }
  .vw-burger svg { stroke: var(--c-ink); }

  /* ---------- Panel mobilny ----------
     display:none bezwarunkowo; widoczny WYŁĄCZNIE wewnątrz media query poniżej.
     Dzięki temu panel nie może pojawić się na desktopie nawet przy nieaktualnym
     atrybucie, a „zamknij przy resize" przestaje być kwestią poprawności.
     Zamknięty panel jest display:none, więc jego linki nie są tabowalne. */
  .vw-nav-panel {
    display: none;
    background: var(--c-panel-bg);
    backdrop-filter: var(--blur-header);
    -webkit-backdrop-filter: var(--blur-header);
  }
  .vw-nav-panel__inner {
    max-width: var(--w-container); margin: 0 auto;
    padding: 8px var(--pad-x) 20px;
    display: flex; flex-direction: column; gap: 2px;
    border-top: 1px solid var(--c-border);
  }
  .vw-nav-panel__link {
    font-size: 16px; color: var(--c-ink);
    padding: 13px 10px; border-radius: var(--r-btn); transition: var(--t-base);
  }
  .vw-nav-panel__link:hover { background: var(--c-accent-tint); color: var(--c-accent); }
  .vw-nav-panel__actions {
    display: flex; flex-direction: column; gap: 9px;
    margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--c-hairline);
  }

  /* ---------- Stopka ----------
     Uwaga: kolumny linków różnią się między archetypami stron (są trzy warianty
     stopki) — dlatego stopka jest partialem parametryzowanym, nie duplikatem. */
  .vw-footer { border-top: 1px solid var(--c-border); background: var(--c-page); }
  .vw-footer__top {
    max-width: var(--w-container); margin: 0 auto;
    padding: 52px var(--pad-x) 40px; display: flex; gap: 56px; flex-wrap: wrap;
  }
  .vw-footer__brand { flex: 1 1 260px; display: flex; flex-direction: column; gap: 12px; }
  .vw-footer__brand .vw-brand__mark { width: 64px; height: 64px; }
  .vw-footer__brand .vw-brand__name { font-size: 16px; }
  .vw-footer__blurb { font-size: 14px; line-height: 1.6; color: var(--c-body); max-width: 26em; }
  .vw-footer__mail { font: 400 12.5px var(--font-mono); color: var(--c-muted); }

  .vw-footer__col { display: flex; flex-direction: column; gap: 11px; }
  .vw-footer__heading {
    font: 500 12px var(--font-mono); color: var(--c-muted); letter-spacing: .05em;
  }
  .vw-footer__link { font-size: 14.5px; color: var(--c-secondary); transition: var(--t-base); }
  .vw-footer__link:hover { color: var(--c-accent); }

  .vw-footer__bottom {
    max-width: var(--w-container); margin: 0 auto;
    padding: 22px var(--pad-x) 40px 32px;
    display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between;
    font: 400 12.5px var(--font-mono); color: var(--c-muted);
    border-top: 1px solid var(--c-hairline);
  }
  .vw-footer__legal { display: flex; gap: 8px; flex-wrap: wrap; }
  .vw-footer__legal a { color: var(--c-muted); }
  .vw-footer__legal a:hover { color: var(--c-accent); }

  /* ---------- Drobne elementy współdzielone ---------- */
  .vw-kicker {
    font: 500 12px var(--font-mono); color: var(--c-accent);
    letter-spacing: .06em; text-transform: uppercase;
  }
  .vw-pill {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    background: var(--c-accent-tint); color: var(--c-accent);
    border-radius: var(--r-pill); padding: 6px 13px;
    font: 500 12px/1 var(--font-mono); letter-spacing: .04em;
  }
  .vw-fine { font: 400 13px var(--font-mono); color: var(--c-muted); }

  /* Linki WEWNĄTRZ bloku tekstu muszą dać się rozpoznać bez koloru (WCAG 1.4.1
     „Use of Color"). Globalne `a { text-decoration: none }` jest słuszne dla
     nawigacji, CTA i list w stopce — tam link jest samodzielnym elementem, nie
     wyrazem w zdaniu. W prozie kolor zostaje jedynym wyróżnieniem, a wymóg mówi:
     albo wskazówka inna niż kolor, albo kontrast ≥3:1 wobec otaczającego tekstu.

     Zmierzone: #1d3fbb na #6b7385 daje 1,78:1 (drobny druk), a na #3c4457
     1,15:1 (proza prawna) — oba daleko poniżej progu. Dotyczyło 8 linków na
     6 stronach. Podkreślenie jest tańsze niż rozjaśnianie tekstu wokół, bo nie
     rusza kontrastu samego tekstu wobec tła, który jest już dostrojony. */
  .vw-fine a,
  .vw-legal p a,
  .vw-legal li a {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Ikony: stroke=currentColor zamiast zaszytego #1d3fbb — jedna deklaracja
     mniej w 36 miejscach i darmowy recolor na hover. */
  .vw-icon { width: 24px; height: 24px; flex: none; }
  .vw-icon--inline { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; }
}

/* ==========================================================================
   4b. KOMPONENTY — typografia i sekcje stron treściowych
   ========================================================================== */
@layer components {

  /* ---------- Typografia ----------
     h1 nie ma jednego rozmiaru: 56 produkty, 54 landing, 52 use-case,
     50 support, 44 legal. README handoffu dokumentuje tylko 54. */
  .vw-h1 { font-size: 56px; line-height: 1.02; letter-spacing: -.035em; font-weight: 600; }
  .vw-h1--landing { font-size: 54px; line-height: 1.05; text-wrap: balance; }
  .vw-h1--usecase { font-size: 52px; line-height: 1.04; text-wrap: balance; }
  .vw-h1--support { font-size: 50px; line-height: 1.04; max-width: 18em; }
  .vw-h1--legal   { font-size: 44px; line-height: 1.06; letter-spacing: -.03em; }

  .vw-h2 { font-size: 36px; line-height: 1.15; letter-spacing: -.025em; font-weight: 600; }
  .vw-h2--sm { font-size: 32px; }
  .vw-h2--xs { font-size: 28px; }
  .vw-h3 { font-size: 18.5px; font-weight: 600; letter-spacing: -.015em; }
  .vw-h3--sm { font-size: 18px; }

  .vw-lead     { font-size: 19px;   line-height: 1.55; color: var(--c-secondary); max-width: var(--max, 32em); text-wrap: pretty; }
  .vw-lead--sm { font-size: 16.5px; line-height: 1.6;  color: var(--c-body); }
  .vw-intro    { font-size: 16px;   line-height: 1.6;  color: var(--c-body); text-wrap: pretty; }
  .vw-copy     { font-size: 15px;   line-height: 1.6;  color: var(--c-body); text-wrap: pretty; }

  /* ---------- Siatka ----------
     Minimalna szerokość kolumny to dana, nie styl — stąd zmienna --min.
     Liczba kolumn nigdzie nie jest zaszyta, więc dodanie planu w panelu
     nie wymaga zmiany CSS. */
  .vw-grid {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(var(--min, 300px), 1fr));
  }
  .vw-grid--steps { --min: 230px; }
  .vw-grid--plans { --min: 252px; align-items: start; }
  .vw-grid--links { --min: 280px; }
  .vw-grid--stats { --min: 180px; gap: 24px; }

  /* ---------- Nagłówek sekcji (kicker + h2, obok akapit) ---------- */
  .vw-sechead { display: flex; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
  .vw-sechead__main { flex: 1 1 420px; display: flex; flex-direction: column; gap: 12px; }
  .vw-sechead__aside { flex: 1 1 300px; }

  /* ---------- Okruszki ---------- */
  .vw-crumbs {
    max-width: var(--w-container); margin: 0 auto;
    padding: 28px var(--pad-x) 8px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font: 400 13px var(--font-mono); color: var(--c-muted);
  }
  .vw-crumbs a { color: var(--c-muted); }
  .vw-crumbs a:hover { color: var(--c-accent); }
  .vw-crumbs__current { color: var(--c-secondary); }

  /* ---------- Hero strony produktowej ---------- */
  .vw-hero {
    max-width: var(--w-container); margin: 0 auto;
    padding: 24px var(--pad-x) 64px;
    display: flex; gap: 56px; align-items: center; flex-wrap: wrap;
  }
  .vw-hero__text { flex: 1 1 420px; display: flex; flex-direction: column; gap: 20px; }
  .vw-hero__media { flex: 1 1 400px; min-width: 340px; }
  /* width:100% jest tu warunkiem, nie ozdobą. Sam max-width nie zmniejsza
     obrazu: przy własnej szerokości 1120 px przeglądarka daje mu min(1120, 560),
     czyli zawsze 560 px — niezależnie od tego, jak wąski jest kontener. Na
     telefonie dawało to dokument szerszy od ekranu i poziome przewijanie całej
     strony. height:auto pilnowało proporcji, gdy szerokość zaczyna być płynna. */
  .vw-hero__img { width: 100%; height: auto; max-width: var(--max, 100%); margin-inline: auto; }
  .vw-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

  /* Przyciski hero: większy padding i promień niż w nagłówku */
  .vw-btn--lg { font-size: 15px; font-weight: 600; padding: 14px 22px; border-radius: var(--r-input); }
  .vw-btn--soft { color: var(--c-ink); border-color: var(--c-border-input); background: transparent; }
  .vw-btn--soft:hover { color: var(--c-ink); border-color: var(--c-border-strong); background: var(--c-band); }

  /* ---------- Pasek statystyk ---------- */
  .vw-stats {
    border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
    background: var(--c-band);
  }
  .vw-stats__inner { max-width: var(--w-container); margin: 0 auto; padding: 26px var(--pad-x); }
  .vw-stat { display: flex; flex-direction: column; gap: 5px; }
  .vw-stat__value { font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
  .vw-stat__label { font: 400 12.5px var(--font-mono); color: var(--c-muted); }

  /* ---------- Sekcje ---------- */
  .vw-section {
    max-width: var(--w-container); margin: 0 auto;
    display: flex; flex-direction: column; gap: 32px;
    scroll-margin-top: 80px;
  }
  .vw-section--benefits { padding: 88px var(--pad-x) 24px; }
  .vw-section--how      { padding: 64px var(--pad-x); }
  .vw-section--related  { padding: 0 var(--pad-x) 72px; gap: 20px; }
  .vw-section--cta      { padding: 0 var(--pad-x) 88px; }

  /* ---------- Karta ---------- */
  .vw-card {
    background: var(--c-page); border: 1px solid var(--c-border); border-radius: var(--r-card);
    padding: 24px; display: flex; flex-direction: column; gap: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .vw-card:hover { border-color: var(--c-border-strong); box-shadow: var(--sh-card-hover); }

  .vw-tile {
    width: 44px; height: 44px; flex: none; border-radius: var(--r-tile);
    background: var(--c-accent-tint); color: var(--c-accent);
    display: flex; align-items: center; justify-content: center;
  }

  /* ---------- Kroki „jak to działa" ---------- */
  .vw-step {
    display: flex; flex-direction: column; gap: 12px;
    padding-top: 18px; border-top: 2px solid var(--c-accent);
  }
  .vw-step__num { font: 500 12px var(--font-mono); color: var(--c-accent); letter-spacing: .06em; }

  .vw-callout {
    border: 1px solid var(--c-border); border-radius: var(--r-card); background: var(--c-band);
    padding: 22px 24px; display: flex; gap: 28px; flex-wrap: wrap; align-items: center;
  }
  .vw-callout__main { flex: 1 1 300px; display: flex; flex-direction: column; gap: 6px; }
  .vw-callout__title { font-size: 16px; font-weight: 600; }
  .vw-callout__body { font-size: 14.5px; line-height: 1.55; color: var(--c-body); }
  .vw-callout__tags { display: flex; gap: 8px; flex-wrap: wrap; }

  .vw-tag {
    font: 400 12.5px var(--font-mono); color: var(--c-secondary);
    border: 1px solid var(--c-border-input); border-radius: var(--r-pill); padding: 7px 12px;
  }
  .vw-tag--accent { color: var(--c-accent); border-color: var(--c-border-strong); background: var(--c-accent-tint); }

  /* ---------- Cennik ---------- */
  .vw-pricing {
    background: var(--c-band);
    border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
    scroll-margin-top: 80px;
  }
  .vw-pricing__inner {
    max-width: var(--w-container); margin: 0 auto;
    padding: 80px var(--pad-x); display: flex; flex-direction: column; gap: 30px;
  }

  .vw-plan {
    background: var(--c-page); border: 1px solid var(--c-border); border-radius: var(--r-card);
    padding: 26px; display: flex; flex-direction: column; gap: 18px;
  }
  .vw-plan--popular { border: 1.5px solid var(--c-accent); box-shadow: var(--sh-popular); }
  .vw-plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .vw-plan__name { font-size: 16px; font-weight: 600; }
  .vw-plan__blurb { font-size: 14px; line-height: 1.5; color: var(--c-body); }
  .vw-plan__badge {
    font: 500 11px var(--font-mono); color: var(--c-accent); background: var(--c-accent-tint);
    border-radius: var(--r-pill); padding: 5px 10px; white-space: nowrap;
  }
  .vw-plan__pricing { display: flex; flex-direction: column; gap: 4px; }
  .vw-plan__amount { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .vw-plan__price { font-size: 34px; font-weight: 600; letter-spacing: -.03em; }
  .vw-plan__unit  { font-size: 14px; color: var(--c-muted); }
  .vw-plan__rate  { font: 400 12.5px var(--font-mono); color: var(--c-accent); }
  /* Ważność jest konfigurowalna per plan, więc nie mieści się już we wspólnej
     nocie pod cennikiem i musi stać przy cenie. */
  .vw-plan__validity { font: 400 12.5px var(--font-mono); color: var(--c-muted); }
  .vw-plan__cta {
    text-align: center; font-size: 15px; font-weight: 600;
    border-radius: var(--r-btn-lg); padding: 12px;
    color: var(--c-ink); border: 1px solid var(--c-border-input); transition: var(--t-base);
  }
  .vw-plan__cta:hover { color: var(--c-ink); border-color: var(--c-ink); }
  .vw-plan--popular .vw-plan__cta { color: #fff; background: var(--c-accent); border-color: transparent; }
  .vw-plan--popular .vw-plan__cta:hover { color: #fff; background: var(--c-accent-hover); }
  .vw-plan__features {
    display: flex; flex-direction: column; gap: 10px;
    font-size: 14.5px; line-height: 1.45; color: var(--c-secondary);
    border-top: 1px solid var(--c-hairline); padding-top: 18px;
  }

  /* ---------- FAQ ---------- */
  .vw-faq {
    max-width: var(--w-narrow); margin: 0 auto;
    padding: 80px var(--pad-x); display: flex; flex-direction: column; gap: 28px;
    scroll-margin-top: 80px;
  }
  .vw-faq__list { display: flex; flex-direction: column; }
  .vw-faq__item { border-top: 1px solid var(--c-border); }
  .vw-faq__list::after { content: ""; display: block; border-top: 1px solid var(--c-border); }
  .vw-faq__q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 22px 0; background: none; border: none; cursor: pointer; text-align: left;
    font: 600 17.5px var(--font-sans); color: var(--c-ink); letter-spacing: -.01em;
  }
  .vw-faq__sign { font: 400 20px var(--font-mono); color: var(--c-muted); }
  /* Stylowanie po aria-expanded, nie po klasie: stan wizualny i dostępnościowy
     są jednym źródłem prawdy i nie mogą się rozjechać. */
  .vw-faq__a {
    overflow: hidden; max-height: 0; opacity: 0;
    transition: var(--t-acc-h), var(--t-acc-o);
  }
  .vw-faq__q[aria-expanded="true"] + .vw-faq__a { max-height: 340px; opacity: 1; }
  .vw-faq__a p { padding: 0 60px 24px 0; font-size: 15.5px; line-height: 1.65; color: var(--c-body); text-wrap: pretty; }

  /* ---------- Karta-link (inne produkty / use case) ---------- */
  .vw-linkcard {
    border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 24px;
    display: flex; flex-direction: column; gap: 10px; color: var(--c-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .vw-linkcard:hover { color: var(--c-ink); border-color: var(--c-border-strong); box-shadow: var(--sh-card-hover); }
  .vw-linkcard__title { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
  .vw-linkcard__body { font-size: 15px; line-height: 1.6; color: var(--c-body); }
  .vw-linkcard__more {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14.5px; font-weight: 600; color: var(--c-accent);
  }

  /* ---------- Ciemny panel CTA ---------- */
  .vw-ctapanel {
    background: var(--c-ink); border-radius: var(--r-panel); padding: var(--pad, 52px 48px);
    display: flex; gap: 40px; align-items: center; flex-wrap: wrap;
  }
  .vw-ctapanel__text { flex: 1 1 380px; display: flex; flex-direction: column; gap: 12px; }
  .vw-ctapanel__text h2 { color: #fff; }
  .vw-ctapanel__body { font-size: 16px; line-height: 1.6; color: var(--c-on-dark-body); max-width: 32em; }
  .vw-ctapanel__actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .vw-btn--on-dark { color: var(--c-ink); background: #fff; }
  .vw-btn--on-dark:hover { color: var(--c-ink); background: var(--c-accent-tint); }
  .vw-btn--on-dark-outline { color: #fff; border-color: var(--c-secondary); background: transparent; }
  .vw-btn--on-dark-outline:hover { color: #fff; border-color: var(--c-on-dark-body); }
  .vw-ctapanel :focus-visible { outline-color: #fff; }
}

/* ==========================================================================
   4c. KOMPONENTY — landing
   ========================================================================== */
@layer components {

  .vw-hero--landing { padding: 88px var(--pad-x) 72px; gap: 64px; }
  .vw-hero--landing .vw-hero__text,
  .vw-hero--landing .vw-hero__media { flex: 1 1 420px; }
  .vw-hero--landing .vw-hero__media { min-width: 360px; }
  .vw-hero--landing .vw-hero__text { gap: 22px; }

  /* ---------- Formularz e-mail ---------- */
  .vw-leadform { display: flex; flex-direction: column; gap: 10px; }
  /* Honeypot: przesunięcie poza ekran, nie display:none — część botów sprawdza
     display i pomija takie pola, a czytnik ekranu i tak tu nie trafi
     (aria-hidden + tabindex=-1 na polu). */
  .vw-honeypot { position: absolute; left: -9999px; }
  .vw-leadform__row { display: flex; gap: 10px; flex-wrap: wrap; max-width: 480px; margin-top: 4px; }
  .vw-leadform__input {
    flex: 1 1 220px; height: 50px; padding: 0 16px;
    font-size: 15px; font-family: var(--font-sans); color: var(--c-ink);
    background: var(--c-page); border: 1px solid var(--c-border-input);
    border-radius: var(--r-input); outline: none; transition: var(--t-base), box-shadow .15s ease;
  }
  .vw-leadform__input:focus { border-color: var(--c-accent); box-shadow: var(--ring-focus); }
  /* Stan błędu nie istniał w designie. Zbudowany z tokenów, które już były:
     #c2413c występowało w mockupach jako „out of stock". */
  .vw-leadform__input[aria-invalid="true"] { border-color: var(--c-danger); }
  .vw-leadform__input[aria-invalid="true"]:focus { box-shadow: var(--ring-error); }
  /* Komunikat wchodzi w slot, który projektant już przewidział (nota 13px pod
     polem) — zero przesunięcia layoutu i jeden live region na sukces i błąd. */
  .vw-leadform__note[data-state="error"] { color: var(--c-danger); }
  .vw-leadform__note[data-state="ok"] { color: var(--c-accent); }
  .vw-leadform button[aria-busy="true"] { opacity: .75; cursor: progress; }
  .vw-leadform button[disabled] { opacity: .75; cursor: default; }
  /* Wymagana przez RODO informacja przy zbieraniu danych. Osobny element od noty,
     bo JS podmienia jej treść przy zmianie stanu. */
  .vw-leadform__legal { font: 400 12px var(--font-mono); color: var(--c-muted); }
  .vw-leadform__legal a { color: var(--c-muted); text-decoration: underline; }
  .vw-leadform__legal a:hover { color: var(--c-accent); }
  .vw-ctapanel .vw-leadform__legal,
  .vw-ctapanel .vw-leadform__legal a { color: var(--c-on-dark-body); }
  .vw-ctapanel .vw-leadform__legal a:hover { color: #fff; }

  /* Wariant na ciemnym panelu CTA */
  .vw-ctapanel .vw-leadform { flex: 1 1 340px; }
  .vw-ctapanel .vw-leadform__row { max-width: none; margin-top: 0; }
  .vw-ctapanel .vw-leadform__input { flex: 1 1 200px; border-color: var(--c-ink); }
  .vw-ctapanel .vw-leadform__note { color: var(--c-on-dark-body); font-size: 12.5px; }

  /* ---------- Pasek zaufania ---------- */
  .vw-trustbar {
    border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
    background: var(--c-band);
  }
  .vw-trustbar__inner {
    max-width: var(--w-container); margin: 0 auto; padding: 22px var(--pad-x);
    display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
  }
  .vw-trustbar__label { font: 400 12px var(--font-mono); color: var(--c-muted); letter-spacing: .04em; }
  .vw-trustbar__logos { display: flex; gap: 36px; flex-wrap: wrap; align-items: center; opacity: .55; }
  .vw-trustbar__logo { width: var(--w); height: 22px; border-radius: 5px; background: var(--c-placeholder); }

  /* ---------- Sekcje landinga ---------- */
  .vw-section--products { padding: 96px var(--pad-x) 40px; gap: 34px; }
  .vw-section--usecases { padding: 70px var(--pad-x); gap: 30px; }

  /* Karta produktu: obraz wychodzi poza padding karty (26px z każdej strony). */
  .vw-prodcard { padding: 0 26px 26px; gap: 16px; overflow: hidden; }
  .vw-prodcard__media {
    width: calc(100% + 52px); margin: 0 -26px; height: 180px; object-fit: contain;
  }
  .vw-prodcard__title { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
  .vw-bullets {
    display: flex; flex-direction: column; gap: 9px;
    font-size: 14px; color: var(--c-secondary);
    border-top: 1px solid var(--c-hairline); padding-top: 16px;
  }
  .vw-bullets li { display: flex; gap: 9px; list-style: none; }
  .vw-bullets li::before { content: "·"; color: var(--c-accent); }
  .vw-prodcard__more { margin-top: auto; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

  .vw-usecase { display: flex; flex-direction: column; gap: 16px; }
  .vw-usecase__title { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
  .vw-usecase__more { font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

  /* ---------- Podglądy 180px (landing) ----------
     Osobna rodzina od pełnowymiarowych dashboardów w heroach use-case:
     wnętrza różnią się realnie, a wspólny komponent z modyfikatorem rozmiaru
     zamieniłby każdą wartość geometrii w zmienną. Wspólne są tokeny, nie klasy.

     Geometria słupków i pasków to dane, nie styl — stąd --h i --w w atrybucie. */
  .vw-preview {
    height: 180px; border: 1px solid var(--c-border); border-radius: var(--r-card);
    background: var(--c-page); overflow: hidden; display: flex; flex-direction: column;
  }
  .vw-preview__head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 12px; border-bottom: 1px solid var(--c-hairline);
  }
  .vw-preview__title { font-size: 11.5px; font-weight: 600; }
  .vw-preview__meta {
    margin-left: auto; font: 400 9px var(--font-mono); color: var(--c-muted-decorative);
  }
  .vw-preview__foot {
    margin-top: auto; padding: 8px 12px; background: var(--c-band);
    border-top: 1px solid var(--c-hairline);
    font: 400 9px var(--font-mono); color: var(--c-muted-decorative);
  }
  .vw-preview__foot--prose { font: 400 10px/1.4 var(--font-sans); color: var(--c-body); }

  /* Tabela */
  .vw-ptable__head, .vw-ptable__row { display: flex; }
  .vw-ptable__head {
    background: var(--c-band); border-bottom: 1px solid var(--c-hairline);
    font: 500 8.5px var(--font-mono); color: var(--c-muted-decorative); letter-spacing: .05em;
  }
  .vw-ptable__head span { padding: 5px 10px; }
  .vw-ptable__row { font-size: 10.5px; color: var(--c-secondary); border-bottom: 1px solid var(--c-hairline-faint); }
  .vw-ptable__row span { padding: 6px 10px; }
  .vw-ptable__c1 { flex: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vw-ptable__c2 { flex: 1; color: var(--c-muted-decorative); }
  .vw-ptable__c3, .vw-ptable__c4 { flex: 1; text-align: right; }
  .vw-ptable__ok { color: var(--c-ok); }
  .vw-ptable__warn { color: var(--c-warn); }

  /* Wykres słupkowy */
  .vw-pbars { flex: 1; display: flex; align-items: flex-end; gap: 2px; padding: 10px 12px 6px; }
  .vw-pbars__group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .vw-pbars__pair { width: 100%; height: 76px; display: flex; gap: 2px; align-items: flex-end; justify-content: center; }
  .vw-pbars__bar { width: 7px; height: var(--h); border-radius: 2px 2px 0 0; background: var(--c-accent); }
  .vw-pbars__bar--alt { background: var(--c-chart-secondary); }
  .vw-pbars__label { font: 400 8px var(--font-mono); color: var(--c-muted-decorative); }
  .vw-plegend {
    display: flex; gap: 14px; padding: 8px 12px;
    border-top: 1px solid var(--c-hairline); background: var(--c-band);
    font: 400 9px var(--font-mono); color: var(--c-muted-decorative);
  }
  .vw-plegend span { display: flex; align-items: center; gap: 5px; }
  .vw-plegend i { width: 7px; height: 7px; border-radius: 2px; background: var(--c-accent); }
  .vw-plegend i.is-alt { background: var(--c-chart-secondary); }

  /* Ranking udziałów */
  .vw-pranks { flex: 1; padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; }
  .vw-pranks__row { display: flex; align-items: center; gap: 8px; }
  .vw-pranks__name {
    width: 74px; font-size: 10.5px; color: var(--c-body);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .vw-pranks__row--self .vw-pranks__name { color: var(--c-ink); font-weight: 600; }
  .vw-pranks__track { flex: 1; height: 7px; border-radius: 4px; background: var(--c-track); }
  .vw-pranks__fill { width: var(--w); height: 7px; border-radius: 4px; background: var(--c-chart-secondary); }
  .vw-pranks__row--self .vw-pranks__fill { background: var(--c-accent); }
  .vw-pranks__pct { width: 30px; text-align: right; font: 400 9.5px var(--font-mono); color: var(--c-body); }

  /* ---------- Przełącznik usług w cenniku ---------- */
  .vw-tabs {
    display: flex; gap: 4px; padding: 4px;
    background: var(--c-hairline); border-radius: var(--r-input); flex-wrap: wrap;
  }
  .vw-tab {
    padding: 9px 16px; border: none; border-radius: var(--r-nav); cursor: pointer;
    font: 600 14px var(--font-sans); white-space: nowrap;
    background: transparent; color: var(--c-body); transition: var(--t-base);
  }
  /* Stan aktywnej zakładki po aria-selected, nie po klasie. */
  .vw-tab[aria-selected="true"] { background: var(--c-page); color: var(--c-ink); box-shadow: var(--sh-tab-active); }

  .vw-pricing__inner--landing { padding: 88px var(--pad-x); gap: 34px; }
  /* Ujemny margines górny wciąga akapit pod wiersz nagłówka — tak jest w designie. */
  .vw-pricing__lead {
    margin-top: -14px; font-size: 16.5px; line-height: 1.6;
    color: var(--c-body); max-width: 44em; text-wrap: pretty;
  }

  .vw-faq--landing { padding: 88px var(--pad-x); }
}

/* ==========================================================================
   4d. KOMPONENTY — strony use-case
   ========================================================================== */
@layer components {

  /* Hero na barwnym tle — jedyna sekcja w serwisie z tym tłem. */
  .vw-uchero { background: var(--c-band-tint); border-bottom: 1px solid var(--c-border-tint); }
  .vw-uchero__crumbs { padding-top: 24px; padding-bottom: 0; }
  .vw-uchero__inner {
    max-width: var(--w-container); margin: 0 auto;
    padding: 34px var(--pad-x) 56px;
    display: flex; gap: 56px; align-items: center; flex-wrap: wrap;
  }
  .vw-uchero__text { flex: 1 1 430px; display: flex; flex-direction: column; gap: 20px; }
  .vw-uchero__media { flex: 1 1 400px; min-width: 340px; }
  .vw-uchero .vw-lead { max-width: 31em; }
  .vw-pill--tint { background: var(--c-pill-tint); }
  /* Przycisk wtórny stoi na barwnym tle, więc ma białe wypełnienie. */
  .vw-btn--onband { color: var(--c-ink); border-color: var(--c-border-strong); background: var(--c-page); }
  .vw-btn--onband:hover { color: var(--c-ink); border-color: var(--c-ink); }

  /* ---------- Dashboard w hero ----------
     Osobna rodzina od kompaktowych podglądów na landingu (vw-preview):
     inne wysokości, inne typografie, inne wnętrza. Wspólne są tokeny. */
  .vw-dash {
    border: 1px solid var(--c-border-tint); border-radius: var(--r-card-lg);
    background: var(--c-page); overflow: hidden; box-shadow: var(--sh-hero-card);
  }
  .vw-dash__head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--c-hairline);
  }
  .vw-dash__title { font-size: 13.5px; font-weight: 600; }
  .vw-dash__meta { margin-left: auto; font: 400 11px var(--font-mono); color: var(--c-muted-decorative); }
  .vw-dash__foot {
    display: flex; gap: 18px; padding: 12px 16px;
    border-top: 1px solid var(--c-hairline); background: var(--c-band);
    font: 400 11px var(--font-mono); color: var(--c-muted-decorative);
  }
  .vw-dash__foot .is-accent { margin-left: auto; color: var(--c-accent); }
  .vw-dash__foot--prose { font: 400 12px/1.5 var(--font-sans); color: var(--c-body); }

  /* Wykres słupkowy */
  .vw-dbars { padding: 18px 16px 10px; display: flex; align-items: flex-end; gap: 10px; height: 190px; }
  .vw-dbars__group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; }
  .vw-dbars__pair { width: 100%; height: 130px; display: flex; gap: 3px; align-items: flex-end; justify-content: center; }
  .vw-dbars__bar { width: 11px; height: var(--h); border-radius: 3px 3px 0 0; background: var(--c-accent); }
  .vw-dbars__bar--alt { background: var(--c-chart-secondary); }
  .vw-dbars__label { font: 400 10.5px var(--font-mono); color: var(--c-muted-decorative); }
  .vw-dlegend {
    display: flex; gap: 18px; padding: 12px 16px;
    border-top: 1px solid var(--c-hairline); background: var(--c-band);
    font: 400 11px var(--font-mono); color: var(--c-muted-decorative);
  }
  .vw-dlegend span { display: flex; align-items: center; gap: 6px; }
  .vw-dlegend i { width: 8px; height: 8px; border-radius: 2px; background: var(--c-accent); }
  .vw-dlegend i.is-alt { background: var(--c-chart-secondary); }

  /* Feed zmian */
  .vw-dfeed__row {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; border-bottom: 1px solid var(--c-hairline-faint); font-size: 13px;
  }
  .vw-dfeed__what { flex: 1; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vw-dfeed__where { width: 74px; font: 400 11.5px var(--font-mono); color: var(--c-muted-decorative); }
  .vw-dfeed__state { width: 104px; text-align: right; font: 400 11.5px var(--font-mono); }
  .vw-dfeed__state[data-tone="bad"]  { color: var(--c-danger); }
  .vw-dfeed__state[data-tone="warn"] { color: var(--c-warn); }
  .vw-dfeed__state[data-tone="good"] { color: var(--c-ok); }

  /* Udziały */
  .vw-dranks { padding: 6px 0 2px; }
  .vw-dranks__row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; border-bottom: 1px solid var(--c-hairline-faint);
  }
  .vw-dranks__name {
    width: 112px; font-size: 13px; color: var(--c-body);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .vw-dranks__row--self .vw-dranks__name { color: var(--c-ink); font-weight: 600; }
  .vw-dranks__track { flex: 1; height: 9px; border-radius: 5px; background: var(--c-track); }
  .vw-dranks__fill { width: var(--w); height: 9px; border-radius: 5px; background: var(--c-chart-secondary); }
  .vw-dranks__row--self .vw-dranks__fill { background: var(--c-accent); }
  .vw-dranks__pct { width: 38px; text-align: right; font: 400 11.5px var(--font-mono); color: var(--c-body); }

  /* ---------- Sekcje use-case ---------- */
  .vw-section--challenges { padding: 88px var(--pad-x) 24px; }
  .vw-section--stack { padding: 84px var(--pad-x) 24px; }
  .vw-grid--wide { --min: 320px; }
  .vw-grid--outcomes { --min: 240px; }
  .vw-grid--top { align-items: start; }

  .vw-outcomes {
    background: var(--c-band);
    border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
    scroll-margin-top: 80px;
  }
  .vw-outcomes__inner {
    max-width: var(--w-container); margin: 0 auto;
    padding: 72px var(--pad-x); display: flex; flex-direction: column; gap: 30px;
  }
  .vw-outcard {
    background: var(--c-page); border: 1px solid var(--c-border); border-radius: var(--r-card);
    padding: 24px; display: flex; flex-direction: column; gap: 10px;
  }
  .vw-outcard__title { font-size: 15px; font-weight: 600; }

  /* ---------- Karta rekomendowanego produktu ---------- */
  .vw-stackcard {
    background: var(--c-page); border: 1px solid var(--c-border); border-radius: var(--r-card);
    padding: 26px; display: flex; flex-direction: column; gap: 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .vw-stackcard:hover { border-color: var(--c-border-strong); box-shadow: var(--sh-card-hover); }
  /* Produkt oznaczony jako CORE dostaje to samo wyróżnienie co plan POPULAR. */
  .vw-stackcard--core { border: 1.5px solid var(--c-accent); box-shadow: var(--sh-popular); }
  .vw-stackcard--core:hover { border-color: var(--c-accent); box-shadow: var(--sh-popular); }
  .vw-stackcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .vw-stackcard__title { font-size: 21px; font-weight: 600; letter-spacing: -.015em; }
  /* Teaser ceny wyliczany z najtańszego planu, nigdy przechowywany —
     w prototypach te same kwoty były powielone w pięciu miejscach. */
  .vw-stackcard__from { font: 400 12.5px var(--font-mono); color: var(--c-muted); }
  .vw-stackcard__features {
    display: flex; flex-direction: column; gap: 9px;
    font-size: 14.5px; color: var(--c-secondary);
    border-top: 1px solid var(--c-hairline); padding-top: 16px;
  }
  .vw-stackcard__more { margin-top: auto; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

  .vw-pilltag {
    font: 500 11px var(--font-mono); border-radius: var(--r-pill); padding: 5px 10px;
    color: var(--c-secondary); background: var(--c-track);
  }
  .vw-pilltag--core { color: var(--c-accent); background: var(--c-accent-tint); }

  .vw-scope { padding: 24px; }
  .vw-scope .vw-callout__main { flex: 1 1 320px; }
  .vw-btn--md { font-size: 15px; font-weight: 600; padding: 13px 20px; border-radius: var(--r-input); }
}

/* ==========================================================================
   4e. KOMPONENTY — support i strony prawne
   ========================================================================== */
@layer components {

  /* ---------- Support ---------- */
  .vw-section--intro { padding: 34px var(--pad-x) 44px; gap: 20px; }
  .vw-section--support-cta { padding: 72px var(--pad-x) 88px; }
  .vw-section--routes {
    padding: 0 var(--pad-x) 72px; flex-direction: row; gap: 24px;
    flex-wrap: wrap; align-items: flex-start;
  }
  .vw-routes { flex: 1 1 560px; display: flex; flex-direction: column; gap: 14px; }

  /* Cała karta jest linkiem mailto — większy cel kliknięcia niż sam adres. */
  .vw-route {
    border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 24px;
    display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;
    color: var(--c-ink); background: var(--c-page);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .vw-route:hover { color: var(--c-ink); border-color: var(--c-border-strong); box-shadow: var(--sh-card-hover); }
  .vw-route__body { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
  .vw-route__title { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
  .vw-route__mail { font: 500 14px var(--font-mono); color: var(--c-accent); }
  .vw-route__sla {
    flex: none; font: 400 12px var(--font-mono); color: var(--c-muted);
    white-space: nowrap; padding-top: 4px;
  }

  .vw-aside {
    flex: 1 1 300px; min-width: 280px;
    border: 1px solid var(--c-border); border-radius: var(--r-card);
    background: var(--c-band); padding: 24px;
    display: flex; flex-direction: column; gap: 16px;
  }
  .vw-aside__title { font-size: 16px; font-weight: 600; }
  .vw-aside__list { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--c-secondary); }
  .vw-aside__list li { display: flex; gap: 9px; list-style: none; }
  .vw-aside__list li::before { content: "·"; color: var(--c-accent); }
  .vw-aside__block { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--c-hairline); padding-top: 16px; }
  .vw-aside__more { font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

  .vw-faq--band {
    background: var(--c-band);
    border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
    max-width: none; padding: 0;
  }
  .vw-faq--band .vw-faq__inner {
    max-width: var(--w-narrow); margin: 0 auto;
    padding: 80px var(--pad-x); display: flex; flex-direction: column; gap: 28px;
  }

  /* ---------- Strony prawne ----------
     Kolumna 780px, nie 900px jak podaje README handoffu. */
  .vw-legal {
    max-width: var(--w-prose); margin: 0 auto;
    padding: 36px var(--pad-x) 88px;
    display: flex; flex-direction: column; gap: 36px;
  }
  /* Okruszki w kolumnie prawnej dziedziczą kontener z .vw-legal. */
  .vw-crumbs--flat { max-width: none; margin: 0; padding: 0; }
  .vw-legal__head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 26px; border-bottom: 1px solid var(--c-border); }
  .vw-legal__dates { font: 400 13px var(--font-mono); color: var(--c-muted); }
  .vw-legal section { display: flex; flex-direction: column; gap: 14px; }

  /* Treść z panelu przychodzi jako płaski ciąg nagłówków i akapitów — Markdown
     nie zna znacznika <section>. Rytm odstępów odtwarzamy tak samo, jak dawały
     go sekcje: 14px wewnątrz, 36px między sekcjami, czyli 14 + 22 na nagłówku. */
  .vw-legal__body { display: flex; flex-direction: column; gap: 14px; }
  .vw-legal__body > h2 { margin-top: 22px; }
  .vw-legal__body > :first-child { margin-top: 0; }
  .vw-legal h2 { font-size: 25px; line-height: 1.25; letter-spacing: -.02em; font-weight: 600; color: var(--c-ink); }
  .vw-legal h3 { font-size: 18.5px; line-height: 1.35; letter-spacing: -.015em; font-weight: 600; }
  .vw-legal p  { font-size: 16.5px; line-height: 1.72; color: var(--c-secondary); }
  .vw-legal ul { display: flex; flex-direction: column; gap: 8px; padding-left: 22px; }
  .vw-legal li { font-size: 16.5px; line-height: 1.72; color: var(--c-secondary); }

  /* ---------- Strona zbiorcza FAQ ----------
     Dwie kolumny: menu kategorii i pytania. Menu jest przyklejone, bo lista
     ma kilkanaście pozycji i po zjechaniu na dół nawigacja bez tego znika. */
  .vw-faqpage {
    max-width: var(--w-container); margin: 0 auto;
    padding: 36px var(--pad-x) 88px;
    display: flex; flex-direction: column; gap: 36px;
  }
  .vw-faqpage__head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 26px; border-bottom: 1px solid var(--c-border); }
  .vw-faqpage__body { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start; }
  .vw-faqpage__groups { display: flex; flex-direction: column; gap: 48px; min-width: 0; }

  .vw-faqnav { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 12px; }
  .vw-faqnav__title { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
  .vw-faqnav__list { display: flex; flex-direction: column; gap: 2px; list-style: none; padding: 0; margin: 0; }
  .vw-faqnav__link {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px; border-radius: var(--r-nav);
    font-size: 14.5px; line-height: 1.35; color: var(--c-secondary);
  }
  .vw-faqnav__link:hover { background: var(--c-accent-tint); color: var(--c-accent); }
  .vw-faqnav__count { font: 400 12px var(--font-mono); color: var(--c-muted); }

  /* Kotwica pod przyklejonym nagłówkiem — bez tego kliknięcie w kategorię
     chowa jej tytuł za paskiem u góry. */
  .vw-faqgroup { scroll-margin-top: 92px; display: flex; flex-direction: column; gap: 6px; }

  /* Bez JavaScriptu akordeon nie ma czym się otworzyć, a odpowiedzi są w HTML-u.
     Pokazujemy je wtedy rozwinięte, zamiast zostawiać stronę, która wygląda na
     pustą. Dotyczy też akordeonów na landingu i stronach produktów. */
  @media (scripting: none) {
    .vw-faq__a { max-height: none; opacity: 1; }
  }

  /* ---------- Strona 404 ----------
     Nie jest ślepym zaułkiem. Domyślna strona błędu Laravela wygląda jak awaria
     serwisu i wyprowadza użytkownika na zewnątrz; tu z nieaktualnego linku
     prowadzą wyjścia do trzech produktów i do wsparcia. */
  .vw-notfound {
    max-width: var(--w-prose); margin: 0 auto;
    padding: 64px var(--pad-x) 96px;
    display: flex; flex-direction: column; gap: 22px;
  }
  .vw-h1--error { font-size: 44px; line-height: 1.06; letter-spacing: -.03em; }
  .vw-notfound__lead { font-size: 16.5px; line-height: 1.72; color: var(--c-secondary); max-width: 44em; }
  .vw-notfound__ways {
    display: flex; flex-direction: column; gap: 12px;
    margin-top: 12px; padding-top: 26px; border-top: 1px solid var(--c-border);
  }
  .vw-notfound__ways h2 { font-size: 15px; font-weight: 600; color: var(--c-ink); }
  .vw-notfound__list { display: flex; flex-wrap: wrap; gap: 10px 20px; }
  .vw-notfound__list a { font-size: 16px; }

  /* ---------- Aplikacja klienta: ekrany uwierzytelniania ----------
     Ten sam arkusz co strona marketingowa — klient po kliknięciu „Create
     account" ma zostać w tym samym świecie wizualnym, a nie trafić do innego
     produktu. */
  .vw-auth {
    min-height: 100svh; display: flex; align-items: center; justify-content: center;
    padding: 48px var(--pad-x); background: var(--c-band);
  }
  .vw-auth__card {
    width: 100%; max-width: 420px;
    background: var(--c-page); border: 1px solid var(--c-border);
    border-radius: var(--r-card-lg); padding: 36px 32px;
    display: flex; flex-direction: column; gap: 22px;
  }
  .vw-auth__brand { display: flex; align-items: center; gap: 9px; align-self: center; color: var(--c-ink); }
  .vw-auth__brand img { width: 34px; height: 34px; }
  .vw-auth__brand span { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
  .vw-auth__head { display: flex; flex-direction: column; gap: 7px; }
  .vw-auth__title { font-size: 25px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
  .vw-auth__sub { font-size: 14.5px; line-height: 1.6; color: var(--c-body); }
  .vw-auth form { display: flex; flex-direction: column; gap: 16px; }
  .vw-field { display: flex; flex-direction: column; gap: 6px; }
  .vw-field label { font-size: 13.5px; font-weight: 500; color: var(--c-secondary); }
  .vw-field input {
    height: 46px; padding: 0 14px;
    font-size: 15px; font-family: var(--font-sans); color: var(--c-ink);
    background: var(--c-page); border: 1px solid var(--c-border-input);
    border-radius: var(--r-input); outline: none;
    transition: var(--t-base), box-shadow .15s ease;
  }
  .vw-field input:focus { border-color: var(--c-accent); box-shadow: var(--ring-focus); }
  .vw-field input[aria-invalid="true"] { border-color: var(--c-danger); }
  .vw-field input[aria-invalid="true"]:focus { box-shadow: var(--ring-error); }
  /* Lista wyboru w formularzu wygląda jak pole tekstowe — stoi w tej samej
     kolumnie co pozostałe pola i inny wygląd czytałby się jak inny rodzaj
     danych. `appearance: none` zdejmuje wygląd systemowy, strzałka jest
     dorysowana tłem, żeby nie dokładać obrazka. */
  .vw-field select {
    height: 46px; padding: 0 36px 0 12px;
    font-size: 15px; font-family: var(--font-sans); color: var(--c-ink);
    background: var(--c-page) no-repeat right 12px center/12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236b7385' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    border: 1px solid var(--c-border-input); border-radius: var(--r-input);
    appearance: none;
  }
  .vw-field select:focus { border-color: var(--c-accent); outline: none; box-shadow: var(--ring-focus); }
  .vw-field select[aria-invalid="true"] { border-color: var(--c-danger); }

  .vw-field__error { font-size: 13px; color: var(--c-danger); }
  .vw-field__hint { font-size: 12.5px; color: var(--c-muted); }

  /* Komunikat ogólny (np. „wysłaliśmy link"). Jeden slot na sukces i błąd,
     żeby nie przesuwać layoutu przy zmianie stanu. */
  .vw-auth__status {
    font-size: 13.5px; line-height: 1.55; padding: 11px 13px;
    border-radius: var(--r-btn); border: 1px solid var(--c-border);
    background: var(--c-band); color: var(--c-secondary);
  }
  .vw-auth__status--ok { border-color: #bfe3d0; background: #f2fbf6; color: #14603d; }
  .vw-auth__status--error { border-color: #f0c9c6; background: var(--c-danger-tint); color: #8f2e2a; }

  .vw-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .vw-auth__foot { font-size: 13.5px; color: var(--c-body); text-align: center; }
  .vw-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--c-secondary); }

  /* ---------- Przycisk Google ----------
     Wygląd narzucony wytycznymi Google, dlatego jedyny komponent w serwisie
     bez naszych tokenów kolorystycznych. */
  .vw-gbtn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 46px; padding: 0 16px;
    font-size: 14.5px; font-weight: 500; color: #1f1f1f;
    background: #fff; border: 1px solid #747775; border-radius: var(--r-input);
    transition: background .15s ease;
  }
  .vw-gbtn:hover { color: #1f1f1f; background: #f7f8f8; }
  .vw-gbtn svg { flex: none; }

  /* Rozdzielacz miedzy sciezkami logowania. */
  .vw-or { display: flex; align-items: center; gap: 12px; color: var(--c-muted); font-size: 12.5px; }
  .vw-or::before,
  .vw-or::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }

  /* ---------- Aplikacja: powłoka i listy ---------- */
  .vw-app { min-height: 100svh; display: flex; flex-direction: column; background: var(--c-band); }
  .vw-app__bar {
    background: var(--c-page); border-bottom: 1px solid var(--c-border);
  }
  .vw-app__bar-inner {
    max-width: 880px; margin: 0 auto; padding: 0 var(--pad-x); height: 60px;
    display: flex; align-items: center; gap: 22px;
  }
  .vw-app__brand { display: flex; align-items: center; gap: 8px; color: var(--c-ink); }
  .vw-app__brand img { width: 28px; height: 28px; }
  .vw-app__brand span { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
  .vw-app__nav { display: flex; gap: 4px; font-size: 14px; }
  .vw-app__nav a { color: var(--c-body); padding: 6px 10px; border-radius: var(--r-nav); }
  .vw-app__nav a:hover,
  .vw-app__nav a[aria-current="page"] { color: var(--c-accent); background: var(--c-accent-tint); }
  .vw-app__who { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--c-muted); }
  .vw-app__main {
    flex: 1; width: 100%; max-width: 880px; margin: 0 auto;
    padding: 34px var(--pad-x) 64px; display: flex; flex-direction: column; gap: 26px;
  }
  .vw-panel {
    background: var(--c-page); border: 1px solid var(--c-border);
    border-radius: var(--r-card); padding: 24px;
    display: flex; flex-direction: column; gap: 16px;
  }
  .vw-panel__head { display: flex; flex-direction: column; gap: 5px; }
  .vw-panel__head h2 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
  .vw-panel__head p { font-size: 13.5px; color: var(--c-body); }
  .vw-list { display: flex; flex-direction: column; }
  .vw-list__row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0; border-top: 1px solid var(--c-hairline);
  }
  .vw-list__row:first-child { border-top: 0; }
  .vw-list__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .vw-list__name { font-size: 14.5px; font-weight: 500; color: var(--c-ink); }
  .vw-list__meta { font-size: 12.5px; color: var(--c-muted); }
  .vw-list__side { margin-left: auto; display: flex; align-items: center; gap: 12px; }
  .vw-tag {
    font: 500 11.5px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
    padding: 5px 9px; border-radius: var(--r-pill);
    background: var(--c-track); color: var(--c-secondary);
  }
  .vw-tag--owner { background: var(--c-accent-tint); color: var(--c-accent); }
  .vw-inviteform { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
  .vw-inviteform .vw-field { flex: 1 1 220px; }
  /* Lista wyboru w wierszu listy — niższa niż w formularzu, bo stoi obok
     etykiet i przycisków tekstowych, nie obok pól. */
  .vw-list__side select {
    height: 32px; padding: 0 8px;
    font: 500 12.5px var(--font-sans); color: var(--c-secondary);
    background: var(--c-page);
    border: 1px solid var(--c-border-input); border-radius: var(--r-nav);
  }
  .vw-list__side select:focus { border-color: var(--c-accent); outline: none; box-shadow: var(--ring-focus); }

  .vw-inviteform select {
    height: 46px; padding: 0 12px; font-size: 15px; font-family: var(--font-sans);
    color: var(--c-ink); background: var(--c-page);
    border: 1px solid var(--c-border-input); border-radius: var(--r-input);
  }
  /* Formularz w panelu.
     Panel jest flexem, ale <form> w środku jest zwykłym blokiem — więc pola
     i przycisk stykały się ze sobą, a `align-self` na przycisku nie miało
     na czym zadziałać. Klasa jest JAWNA, nie `.vw-panel form`: ta druga
     przejęłaby też formularz zaproszeń, który układa się w wiersz. */
  .vw-form { display: flex; flex-direction: column; gap: 14px; }
  .vw-form > .vw-btn { align-self: flex-end; margin-top: 4px; }

  /* Panel operacji nieodwracalnych. Wyróżniony, bo stoi pod ekranem pełnym
     zwykłych formularzy i musi zatrzymać rękę, zanim kliknie dalej. */
  .vw-panel--danger { border-color: var(--c-danger); }
  .vw-panel--danger .vw-panel__head h2 { color: var(--c-danger); }
  .vw-panel--danger form { display: flex; flex-direction: column; gap: 12px; }
  .vw-panel--danger input {
    height: 46px; padding: 0 12px; font-size: 15px; font-family: var(--font-sans);
    color: var(--c-ink); background: var(--c-page);
    border: 1px solid var(--c-border-input); border-radius: var(--r-input);
    max-width: 360px;
  }
  .vw-panel--danger input:focus { border-color: var(--c-danger); outline: none; box-shadow: var(--ring-error); }
  .vw-btn--danger { color: #fff; background: var(--c-danger); border-color: var(--c-danger); }
  .vw-btn--danger:hover { filter: brightness(.94); }

  /* Zapowiedź zamiast cennika. Wyraźnie inna od siatki planów, żeby nikt nie
     wziął jej za plan o nazwie „Coming soon". */
  .vw-soon {
    border: 1px dashed var(--c-border-strong); border-radius: var(--r-card);
    padding: 32px 28px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    background: var(--c-band);
  }
  .vw-soon__badge {
    font: 600 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
    padding: 6px 11px; border-radius: var(--r-pill);
    background: var(--c-accent-tint); color: var(--c-accent);
  }
  .vw-soon p { font-size: 15px; color: var(--c-body); max-width: 52ch; }

  /* ---- Ekran poświadczeń proxy ---------------------------------------- */

  /* Sekret widoczny raz. Wyróżniony mocniej niż zwykły komunikat, bo to jedyny
     moment, w którym da się go skopiować — przeoczony oznacza wymianę. */
  .vw-secret {
    border: 1px solid var(--c-accent); border-radius: var(--r-card);
    background: var(--c-accent-tint); padding: 20px 24px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .vw-secret h2 { font-size: 16px; font-weight: 600; color: var(--c-accent); }
  .vw-secret p { font-size: 13.5px; color: var(--c-body); }
  .vw-secret__value { font-size: 14px; word-break: break-all; }

  .vw-kv { display: flex; flex-direction: column; gap: 9px; margin: 0; }
  .vw-kv > div, .vw-kv > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
  .vw-kv dt { flex: 0 0 120px; font-size: 12.5px; color: var(--c-muted); }
  .vw-kv dd { margin: 0; font-size: 14px; color: var(--c-ink); display: flex; align-items: center; gap: 8px; }
  .vw-kv--code { list-style: none; padding: 0; font-size: 13.5px; color: var(--c-body); }
  .vw-kv code, .vw-list__meta code, .vw-secret code {
    font: 500 13px/1.5 var(--font-mono);
    background: var(--c-track); color: var(--c-ink);
    padding: 3px 7px; border-radius: var(--r-nav);
  }

  .vw-note { font-size: 13px; color: var(--c-muted); }
  .vw-note--warn { color: var(--c-warn); }
  .vw-note--inline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 46px; }
  .vw-note--inline .vw-linkbtn { white-space: nowrap; padding-left: 0; }

  /* Rozwijane bez JS. Szczegóły targetowania i składnia sufiksu są potrzebne
     przy pierwszej konfiguracji i praktycznie nigdy później — na widoku
     zamieniłyby ekran w instrukcję obsługi. */
  .vw-disclose { border-top: 1px solid var(--c-hairline); padding-top: 14px; }
  .vw-disclose--inset { border-top: 0; padding: 0 0 12px 0; }
  .vw-disclose > summary {
    cursor: pointer; font-size: 13px; color: var(--c-secondary);
    padding: 4px 0; list-style-position: inside;
  }
  .vw-disclose > summary:hover { color: var(--c-accent); }
  .vw-disclose__body { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
  .vw-disclose__body p { font-size: 13px; color: var(--c-body); }

  .vw-profileform { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
  .vw-profileform .vw-field { flex: 1 1 200px; }
  .vw-profileform select, .vw-profileform input {
    height: 46px; padding: 0 12px; font-size: 15px; font-family: var(--font-sans);
    color: var(--c-ink); background: var(--c-page);
    border: 1px solid var(--c-border-input); border-radius: var(--r-input);
  }
  .vw-profileform select:focus, .vw-profileform input:focus {
    border-color: var(--c-accent); outline: none; box-shadow: var(--ring-focus);
  }
  .vw-profileform .vw-btn { height: 46px; }

  /* Wiersz poświadczeń ma trzy linie opisu, więc akcje wyrównujemy do góry,
     a nie do środka — inaczej „Delete" ląduje na wysokości metadanych. */
  .vw-list__row--stacked { align-items: flex-start; }
  .vw-list__row--stacked .vw-list__side { padding-top: 2px; }
  .vw-tag--off { background: var(--c-danger-tint); color: var(--c-danger); margin-left: 8px; }

  .vw-linkbtn {
    font-size: 13px; color: var(--c-danger); background: none; border: 0;
    cursor: pointer; padding: 4px 6px; border-radius: var(--r-nav);
  }
  .vw-linkbtn:hover { background: var(--c-danger-tint); }
}

/* ==========================================================================
   5. UTILITIES — zamknięty zestaw
   ========================================================================== */
@layer utilities {
  .u-container { max-width: var(--w-container); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
  .u-container--narrow { max-width: var(--w-narrow); }
  .u-container--prose  { max-width: var(--w-prose); }
  .u-stack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
  .u-row   { display: flex; align-items: center; gap: var(--gap, 12px); }
  .u-wrap  { flex-wrap: wrap; }
  .u-mt-auto { margin-top: auto; }
  .u-balance { text-wrap: balance; }
  .u-pretty  { text-wrap: pretty; }
  .u-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ==========================================================================
   6. BREAKPOINT — jedyny w całym serwisie
   Granica 899.98px, nie 899px: prototyp przełącza się na `innerWidth < 900`,
   a przy ułamkowych szerokościach (zoom, skalowanie DPI) 899px i <900 się
   rozjeżdżają. Reszta layoutu reflowuje się sama na auto-fit minmax()
   i flex: 1 1 Npx — dlatego jeden breakpoint wystarcza.
   ========================================================================== */
@media (max-width: 899.98px) {
  /* Strona zbiorcza FAQ: jedna kolumna, menu kategorii nad pytaniami
     i bez przyklejania — na telefonie zjadałoby połowę ekranu. */
  .vw-faqpage__body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .vw-faqnav { position: static; }
  .vw-faqnav__list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .vw-faqnav__link { border: 1px solid var(--c-border); border-radius: var(--r-pill); padding: 7px 14px; }

  .vw-nav,
  .vw-header__actions { display: none; }
  .vw-burger { display: inline-flex; }
  .vw-header[data-menu="open"] .vw-nav-panel { display: block; }

  /* Kolumny mediów mają min-width 340–360 px, żeby na desktopie nie zwężały się
     do nieczytelnej szerokości. Na telefonie 375 px zostaje po odjęciu marginesów
     311 px, więc te same wartości blokowały zwężenie i wypychały dokument poza
     ekran. Element zwęża się poniżej flex-basis sam — pod warunkiem, że nie ma
     min-width, który mu tego zabrania. */
  .vw-hero__media,
  .vw-hero--landing .vw-hero__media,
  .vw-uchero__media { min-width: 0; }

  /* Pasek zalogowanej aplikacji nie ma menu pod hamburgerem i mieć go nie musi —
     pozycji jest kilka, a nie kilkanaście. Na telefonie nawigacja przewija się
     w poziomie zamiast rozpychać dokument; bez min-width: 0 flex odmawia
     zwężenia elementu poniżej jego zawartości i cały pasek wychodzi poza ekran. */
  .vw-app__bar-inner { gap: 12px; }
  /* Logo zostaje, napis obok niego znika — inaczej zabiera trzecią część paska
     i wchodzi na nawigację, bo flex ściska go poniżej szerokości tekstu.
     Marka jest w tytule strony i na każdym ekranie niżej. */
  .vw-app__brand { flex: 0 0 auto; }
  .vw-app__brand span { display: none; }
  .vw-app__who { flex: 0 0 auto; }
  .vw-app__who button { white-space: nowrap; }
  .vw-app__nav {
    flex: 1 1 auto; min-width: 0; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .vw-app__nav::-webkit-scrollbar { display: none; }
  .vw-app__nav a { white-space: nowrap; }
  /* Nazwa organizacji znika, „Sign out" zostaje. Nazwa jest powtórzona
     w nagłówku każdego ekranu, wylogowanie nigdzie indziej. */
  .vw-app__who span { display: none; }

  /* Wiersz poświadczeń: akcje POD treścią, nie obok niej. Obok zostawiały
     kolumnie opisu około 140 px, przez co metadane rozsypywały się w wąską
     pionową wstęgę, a nazwa zestawu łamała się w pół. */
  .vw-list__row--stacked { flex-direction: column; align-items: stretch; }
  .vw-list__row--stacked .vw-list__side {
    margin-left: 0; padding-top: 10px; flex-wrap: wrap; gap: 4px;
  }
  .vw-list__row--stacked .vw-list__side .vw-linkbtn { padding-left: 0; }
}

/* ==========================================================================
   6b. SIEROTA W SIATCE CENNIKA — zakres, w którym mieszczą się DOKŁADNIE
       trzy kolumny planów

   Siatka planów celowo nie zna liczby kolumn (auto-fit minmax(--min, 1fr)),
   żeby dodanie planu w panelu nie wymagało zmiany CSS. Cena tej właściwości:
   przy czterech planach każdy stan trójkolumnowy zostawia czwartą kartę samą
   na jedną trzecią szerokości, co czyta się jak niedokończony layout.

   Obniżenie --min tego nie usuwa, tylko przesuwa okno problemu i zwęża karty
   na wszystkich szerokościach — sprawdzone.

   Rozwiązanie: gdy ostatnia karta zostaje sama w wierszu, rozciąga się na całą
   szerokość. Wygląda to celowo, bo czwarty plan to „Custom" — pełnowymiarowy
   pas dla oferty enterprise jest na stronach cennika wzorcem, nie obejściem.

   Reguła jest świadomie zależna od liczby elementów, a nie od kolumn, bo CSS
   nie potrafi zapytać o realną liczbę kolumn:
     3 plany → ostatni jest 3., nie pasuje do 3n+1 → trzy w rzędzie, bez zmian
     4 plany → ostatni jest 4. = 3n+1 → pas na pełną szerokość
     5 planów → ostatni jest 5. → 3+2, sierota nie powstaje
     7 planów → ostatni jest 7. = 3n+1 → pas na pełną szerokość
   :not(:first-child) chroni przypadek jednego planu, który inaczej stałby się
   samotnym pasem przez całą szerokość.

   GRANICE — i dlaczego nie są dokładnie tam, gdzie wychodzą z rachunku.

   Z samych tokenów: 3 kolumny mieszczą się od 3×252 + 2×20 + 64 = 860px,
   4 kolumny od 4×252 + 3×20 + 64 = 1132px. Ale rachunek pomija PASEK
   PRZEWIJANIA, który odejmuje od szerokości okna kolejne ~15px — i którego
   szerokość zależy od systemu: macOS rysuje pasek nakładkowy o zerowej
   szerokości, Windows i Linux zabierają realne piksele. Ten sam próg wypada
   więc na 860px albo na 875px, w zależności od maszyny.

   Zmierzone: przy 860px z paskiem mieszczą się tylko DWIE kolumny, więc reguła
   ustawiona na 860px rozciągała „Custom" w siatce dwukolumnowej i zostawiała
   samotny „Scale" — czyli pogarszała to, co miała naprawić.

   Dobór granic jest zachowawczy: reguła obowiązuje w zakresie, w którym
   trzykolumnowość jest pewna w OBU wariantach paska.
     dolna 875px  = próg trzech kolumn przy pasku 15px
     górna 1132px = próg czterech kolumn bez paska
   Skutkiem są dwa okna po ~15px (860–874 bez paska, 1132–1146 z paskiem),
   w których sierota nadal wystąpi. To świadomy kompromis: reguła nigdy nie
   zadziała ZŁE — nie rozciągnie karty w siatce dwu- ani czterokolumnowej.

   Przy zmianie --min, gap lub --pad-x trzeba te granice przeliczyć.

   Znane zachowanie, świadomie nieobsługiwane: w zakresie dwukolumnowym
   nieparzysta liczba planów zostawia analogiczną sierotę. Przy obecnych
   czterech planach nie występuje.
   ========================================================================== */
@media (min-width: 875px) and (max-width: 1131.98px) {
  .vw-grid--plans > :last-child:nth-child(3n + 1):not(:first-child) {
    grid-column: 1 / -1;
  }
  /* Karta jest wewnątrz kolumną, więc w pasie na pełną szerokość przycisk
     rozciągałby się na ~950px. Ograniczamy go do szerokości zbliżonej do
     przycisków w pozostałych kartach, żeby pas nie wyglądał na rozjechany. */
  .vw-grid--plans > :last-child:nth-child(3n + 1):not(:first-child) .vw-plan__cta {
    max-width: 320px;
  }
}

/* ==========================================================================
   7. PRINT — strony prawne bywają drukowane
   ========================================================================== */
@media print {
  .vw-header, .vw-footer, .vw-burger, .vw-nav-panel { display: none !important; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
  .u-container, .u-container--prose { max-width: none; padding: 0; }
}