/* =====================================================================
   Landing B2B `/strony-dla-masazystow/` – sprzedaje usługę masażyście.

   ZASADA NADRZĘDNA ZE SPECU: landing sam jest dowodem jakości.
   Ma być zbudowany z tą samą precyzją, co strona, którą sprzedaje.
   Prospekt ma pomyśleć „skoro jego własna strona tak wygląda, to moja też”.

   RELACJA DO DEMA: ten sam język – papier, tusz, morska zieleń, ta sama
   triada krojów, ta sama siatka redakcyjna z indeksem w marginesie.
   RÓŻNICA: demo otwiera się ciemnym pełnym ekranem, ten landing otwiera
   się na papierze, a ciemny jest środek (sekcja „czy AI Cię poleca”) i
   domknięcie. Odwrócony rytm – to inna strona, nie kopia.

   TYPOGRAFIA: Bricolage Grotesque (display, oś wdth) + Archivo (treść)
   + DM Mono (indeksy, ceny, etykiety).
   ===================================================================== */

:root {
  --papier:   #F4F3EF;
  --papier-2: #EAE8E2;
  --tusz:     #12140F;
  --tusz-2:   #4E5249;
  --hairline: #D6D3CA;
  --marka:    #1F5F5B;
  --marka-j:  #7FB3AD;

  --display: "Bricolage Grotesque", Georgia, serif;
  --tekst:   "Archivo", system-ui, sans-serif;
  --dane:    "DM Mono", ui-monospace, monospace;

  --rama-x: clamp(20px, 5vw, 72px);
  --h-gora: 66px;
}

/* ── [hidden] musi wygrywać z każdym `display` ─────────────────────────
   Przeglądarka ukrywa [hidden] przez `display:none` we własnym arkuszu,
   więc DOWOLNA reguła autorska z `display` to nadpisuje i element widać
   mimo atrybutu. Tak wyciekła pusta ramka „sukces” pod formularzem.
   Jedna reguła zamyka to raz i na przyszłość. */
[hidden] { display: none !important; }


* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--papier); color: var(--tusz);
  font-family: var(--tekst); font-size: 17px; line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }

.rama { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--rama-x); }
:focus-visible { outline: 2px solid var(--marka); outline-offset: 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── typografia ───────────────────────────────────────────────────── */
.wielki {
  font-family: var(--display); font-size: clamp(2.3rem, 5.4vw, 4.8rem);
  font-weight: 500; line-height: .98; letter-spacing: -.032em;
  font-variation-settings: "wdth" 88; max-width: 17ch; text-wrap: balance;
}
h2 {
  font-family: var(--display); font-size: clamp(1.55rem, 3vw, 2.5rem);
  font-weight: 500; line-height: 1.06; letter-spacing: -.025em;
  font-variation-settings: "wdth" 92; margin-bottom: 28px; max-width: 22ch;
  text-wrap: balance;
}
h3 { font-size: 1.04rem; font-weight: 600; letter-spacing: -.008em; }
.wiodacy { color: var(--tusz-2); font-size: clamp(1rem, 1.2vw, 1.14rem); max-width: 54ch; }
.akapit { color: var(--tusz-2); margin-bottom: 16px; max-width: 60ch; }
.akapit-mocny { color: var(--tusz); border-left: 2px solid var(--marka); padding-left: 18px; margin-top: 26px; }
.nadpis, .indeks, .indeks-nazwa {
  font-family: var(--dane); letter-spacing: .08em; text-transform: uppercase;
}

/* ── nagłówek ─────────────────────────────────────────────────────── */
.gora {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--papier) 90%, transparent);
  backdrop-filter: blur(9px); border-bottom: 1px solid var(--hairline);
}
.gora-in { display: flex; align-items: center; gap: 22px; min-height: var(--h-gora); }
/* Marka 1:1 jak na stronie głównej – ten sam znak, ten sam lockup, ten sam
   akcent na drugim członie. Landing nie ma prawa mieć innego logo niż serwis. */
.marka {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  margin-right: auto; min-height: 44px;
  /* Sora – ten sam krój, co w logotypie na stronie głównej. Logo nie
     dziedziczy typografii podstrony, tylko zachowuje własną. */
  font-family: "Sora", var(--display); font-size: 1.25rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--tusz);
}
.marka-znak { height: 24px; width: auto; display: block; }
.marka-tekst { white-space: nowrap; }
/* Drugi człon logo w firmowym indygo, NIE w akcencie tej strony.
   Znak marki zachowuje swoje kolory niezależnie od palety podstrony. */
.marka-tekst span { color: #4F46E5; }
.menu { display: none; gap: 26px; font-size: .87rem; }
.menu a { text-decoration: none; color: var(--tusz-2); position: relative; padding: 4px 0; }
.menu a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--tusz); transition: right .28s cubic-bezier(.22,1,.36,1);
}
.menu a:hover { color: var(--tusz); }
.menu a:hover::after { right: 0; }

/* ── przyciski ────────────────────────────────────────────────────── */
.guzik {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 50px; padding: 13px 26px;
  font-family: var(--tekst); font-weight: 600; font-size: .93rem;
  text-decoration: none; border: 1px solid var(--tusz);
  background: var(--tusz); color: var(--papier); cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.guzik:hover { background: var(--marka); border-color: var(--marka); }
.guzik-glowny { background: var(--marka); border-color: var(--marka); }
.guzik-glowny:hover { background: var(--tusz); border-color: var(--tusz); }
.guzik-cichy { background: transparent; color: var(--tusz); border-color: var(--hairline); }
.guzik-cichy:hover { background: transparent; border-color: var(--tusz); color: var(--tusz); }
.guzik-jasny { background: var(--papier); color: var(--tusz); border-color: var(--papier); }
.guzik-jasny:hover { background: var(--marka-j); border-color: var(--marka-j); color: var(--tusz); }
.guzik-cichy-ciemny { color: var(--papier); border-color: rgba(244,243,239,.32); }
.guzik-cichy-ciemny:hover { border-color: var(--papier); color: var(--papier); }
.gora .guzik { min-height: 44px; padding: 10px 18px; font-size: .84rem; }
@media (min-width: 1020px) { .gora .guzik { min-height: 40px; padding: 8px 18px; } }
.akcje { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 4vh, 40px); }

/* ── hero ─────────────────────────────────────────────────────────── */
.ekran { padding: clamp(52px, 9vh, 110px) 0 clamp(48px, 8vh, 96px); }
.nadpis { font-size: .68rem; color: var(--marka); margin-bottom: clamp(22px, 4vh, 40px); }
.ekran h1 { margin-bottom: 24px; }
.zaufanie {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin-top: clamp(30px, 5vh, 48px); padding-top: 22px; border-top: 1px solid var(--hairline);
  font-family: var(--dane); font-size: .72rem; letter-spacing: .04em; color: var(--tusz-2);
}
.zaufanie li { position: relative; padding-left: 18px; }
.zaufanie li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 1px; background: var(--marka); }

/* ── bloki i siatka redakcyjna ────────────────────────────────────── */
.blok { padding: clamp(60px, 10vh, 122px) 0; border-top: 1px solid var(--hairline); }
.blok-mgla { background: var(--papier-2); border-top: none; }
.blok-ciemny { background: var(--tusz); color: var(--papier); border-top: none; }
.blok-ciemny h2 { color: var(--papier); }
.blok-ciemny .akapit { color: #ADB2A6; }
.blok-ciemny .indeks { color: var(--marka-j); }
.blok-ciemny .indeks-nazwa { color: #8F958A; }
.redakcja { display: grid; gap: 24px; }
.margines { display: flex; align-items: baseline; gap: 12px; }
.indeks { font-family: var(--dane); font-size: .74rem; color: var(--marka); }
.indeks-nazwa { font-family: var(--dane); font-size: .62rem; color: var(--tusz-2); }
.kolumna { min-width: 0; }

/* ── formularz „czy AI Cię poleca” ────────────────────────────────── */
.formularz { margin-top: 34px; display: grid; gap: 22px; max-width: 720px; }
.pola { display: grid; gap: 18px; }
.pole { display: grid; gap: 7px; }
.pole label { font-size: .9rem; font-weight: 600; }
.wym { color: var(--marka-j); }
.pole input {
  font: inherit; padding: 13px 15px; min-height: 50px; width: 100%;
  border: 1px solid rgba(244,243,239,.26); background: rgba(244,243,239,.05);
  color: var(--papier); border-radius: 0;
}
.pole input::placeholder { color: #7A8074; }
.pole input:focus { border-color: var(--marka-j); }
.pole input[aria-invalid="true"] { border-color: #E39A8A; }
.pole-err { color: #E39A8A; font-size: .86rem; }
.pole-err:empty { display: none; }

.zgoda { display: grid; gap: 10px; padding: 18px; background: rgba(244,243,239,.05); border: 1px solid rgba(244,243,239,.14); }
.checkbox { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: .9rem; line-height: 1.55; min-height: 44px; }
.checkbox input { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px; accent-color: var(--marka-j); }
.zgoda-nota { font-size: .84rem; color: #9AA093; line-height: 1.6; }
.zgoda-nota a, .blok-ciemny a { color: var(--marka-j); }

.status { font-size: .9rem; color: #ADB2A6; }
.status.err { color: #E39A8A; }
.sukces { margin-top: 30px; padding: 26px; border: 1px solid var(--marka-j); display: grid; gap: 12px; max-width: 720px; }
.sukces h3 { color: var(--marka-j); font-size: 1.2rem; }
.sukces p { color: #ADB2A6; font-size: .95rem; }
/* Widoczne tylko wtedy, gdy zapis do CRM padł i zgłoszenie wisi na moim mailu. */
.sukces .uwaga { background: rgba(127,179,173,.12); border-left: 2px solid var(--marka-j); padding: 12px 14px; color: #C8CCC2; font-size: .9rem; }
.sukces .uwaga a { color: var(--marka-j); }

/* ── podgląd dema ─────────────────────────────────────────────────── */
.podglad-ramka { margin-top: 30px; border: 1px solid var(--hairline); background: var(--papier-2); }
.podglad-pasek {
  display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px;
  border-bottom: 1px solid var(--hairline); font-family: var(--dane);
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tusz-2);
}
.podglad-ramka iframe { width: 100%; height: clamp(420px, 62vh, 660px); border: 0; display: block; background: var(--tusz); }

/* ── cennik: karty, układ jak na stronie głównej ──────────────────── */
/* Karty mają jednakową wysokość w rzędzie: grid rozciąga je do najwyższej,
   a przycisk trzyma się dołu przez margin-top:auto. Na telefonie kolumna
   jest jedna, więc rozciąganie nic nie zmienia i nie szkodzi. */
.pakiety { display: grid; gap: 16px; margin-top: 34px; align-items: stretch; }
.karta {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 30px 26px 26px; background: var(--papier); border: 1px solid var(--hairline);
  height: 100%;
}
/* przycisk zawsze przy dolnej krawędzi, niezależnie od długości listy */
.karta-cta { margin-top: auto; }
.karta-wyrozniona { border-color: var(--marka); border-width: 2px; padding-top: 38px; }
.karta-odznaka {
  position: absolute; top: -1px; left: 26px; transform: translateY(-50%);
  background: var(--marka); color: var(--papier);
  font-family: var(--dane); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; padding: 6px 12px;
}
.karta-nazwa { font-family: var(--display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.karta-cena {
  font-family: var(--display); font-size: clamp(2.1rem, 3.4vw, 2.8rem); font-weight: 500;
  line-height: 1; letter-spacing: -.035em; font-variation-settings: "wdth" 86;
}
.karta-przedrostek { font-size: .5em; font-weight: 500; letter-spacing: -.01em; }
.karta-jednostka { font-family: var(--dane); font-size: .68rem; letter-spacing: .06em; color: var(--tusz-2); margin-top: -6px; }
.karta-opis { color: var(--marka); font-weight: 600; font-size: .94rem; }
.karta-lista { list-style: none; display: grid; gap: 0; }
.karta-lista li {
  position: relative; padding: 11px 0 11px 26px; font-size: .93rem;
  color: var(--tusz-2); border-top: 1px solid var(--hairline);
}
.karta-lista li:first-child { border-top: none; padding-top: 0; }
/* Kreska trafia w optyczny środek PIERWSZEGO wiersza, niezależnie od tego,
   czy pozycja ma jeden wiersz, czy trzy. Pozycja liczona, nie zgadywana:
   górny padding + połowa interlinii (line-height 1.6 → .8em). */
.karta-lista li::before {
  content: ""; position: absolute; left: 0; top: calc(11px + .8em);
  width: 11px; height: 1px; background: var(--marka);
}
.karta-lista li:first-child::before { top: .8em; }
.karta-cta { justify-content: center; padding-top: 14px; }
/* Pakiet bez ustalonej ceny nie udaje, że ją ma. */
.karta-bez-ceny .karta-cena {
  font-family: var(--dane); font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tusz-2);
}
.cennik-przypis { margin-top: 26px; font-weight: 600; font-size: .93rem; }
.cennik-przypis-cichy { margin-top: 8px; font-weight: 400; color: var(--tusz-2); font-size: .88rem; }

/* ── kroki ────────────────────────────────────────────────────────── */
.kroki { list-style: none; margin-top: 8px; }
.kroki li { display: grid; gap: 7px 24px; padding: 24px 0; border-top: 1px solid var(--hairline); }
.kroki li:last-child { border-bottom: 1px solid var(--hairline); }
.krok-nr { font-family: var(--dane); font-size: .7rem; color: var(--marka); padding-top: 5px; }
.kroki p { color: var(--tusz-2); max-width: 56ch; }

/* ── pytania ──────────────────────────────────────────────────────── */
.pytania { margin-top: 8px; }
.pytanie { border-top: 1px solid var(--hairline); }
.pytanie:last-child { border-bottom: 1px solid var(--hairline); }
.pytanie summary {
  cursor: pointer; list-style: none; padding: 21px 0; min-height: 48px; font-weight: 600;
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
}
.pytanie summary::-webkit-details-marker { display: none; }
.pytanie summary::after { content: "+"; font-family: var(--dane); color: var(--marka); font-size: 1.15rem; }
.pytanie[open] summary::after { content: "–"; }
.pytanie p { padding-bottom: 24px; color: var(--tusz-2); max-width: 64ch; }

/* ── domknięcie i stopka ──────────────────────────────────────────── */
.final { background: var(--tusz); color: var(--papier); padding: clamp(68px, 12vh, 140px) 0; }
.wielki-final { color: var(--papier); }
.final .wiodacy { color: #ADB2A6; margin-top: 22px; }
.final-kontakt { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px 26px; font-family: var(--dane); font-size: .8rem; }
.final-kontakt a { color: var(--marka-j); min-height: 44px; display: inline-flex; align-items: center; }

.dol { border-top: 1px solid var(--hairline); padding: 26px 0 92px; font-size: .84rem; color: var(--tusz-2); }
.dol-in { display: grid; gap: 10px; }
.dol-linki { display: flex; flex-wrap: wrap; gap: 0 22px; }
.dol-linki a { min-height: 44px; display: inline-flex; align-items: center; }
.dol-nota { margin-top: 16px; font-size: .78rem; line-height: 1.7; max-width: 76ch; color: var(--tusz-2); }

/* ── pasek na telefonie ───────────────────────────────────────────── */
.pasek-tel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--marka); color: #fff; text-decoration: none; font-weight: 600;
  text-align: center; padding: 16px; min-height: 54px;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.pasek-tel.widac { transform: none; }

/* ── wejście treści ───────────────────────────────────────────────── */
.wchodzi { opacity: 0; transform: translateY(16px); }
.wchodzi.jest {
  opacity: 1; transform: none;
  transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wchodzi, .wchodzi.jest { opacity: 1; transform: none; transition: none; }
  .pasek-tel, .menu a::after { transition: none; }
}

/* ── od 720 px ────────────────────────────────────────────────────── */
@media (min-width: 720px) {
  .pola { grid-template-columns: 1fr 1fr; }
  .pola .pole:last-child { grid-column: 1 / -1; }
  .kroki li { grid-template-columns: 52px minmax(0, 1fr); }
  .dol-in { display: flex; justify-content: space-between; align-items: center; }
  .dol { padding-bottom: 26px; }
  .pasek-tel { display: none; }
  .pakiety { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

/* ── od 1020 px ───────────────────────────────────────────────────── */
@media (min-width: 1020px) {
  .menu { display: flex; }
  .ekran { padding: clamp(78px, 12vh, 140px) 0 clamp(64px, 9vh, 110px); }
  .redakcja { grid-template-columns: 200px minmax(0, 1fr); gap: 0 64px; }
  .margines { position: sticky; top: calc(var(--h-gora) + 30px); align-self: start; flex-direction: column; gap: 6px; }
  .kolumna { max-width: 760px; }
  .kolumna-szeroka { max-width: 100%; }
}