/* Wygląd stron sprzedażowych Fotillo Cloud (PLAN-album-b2c.md, Etapy 2 i 7).
   ---------------------------------------------------------------------------------------
   WSPÓLNY ARKUSZ dla strony Albumu (/album/<język>/) i strony dla operatorów
   (/operator/<język>/). Dwie strony mówią do dwóch różnych grup, ale mają być
   ROZPOZNAWALNE JAKO JEDNA USŁUGA — a to znaczy jeden arkusz, nie dwie kopie tych
   samych reguł, które przy pierwszej zmianie zaczną się różnić.

   Układ jednokolumnowy, czytelny na telefonie: tam trafia większość ruchu z wyszukiwarki.
   Reguły paska nawigacyjnego są osobno, w nav.css — on stoi także na stronach logowania. */

/* Strona sprzedażowa — układ jednokolumnowy, czytelny na telefonie (tam trafia większość ruchu). */
.lp{max-width:960px;margin:0 auto;padding:0 18px 60px}
.lp-hero{text-align:center;padding:38px 0 26px}
.lp-hero img{height:52px;margin-bottom:18px}
.lp-hero h1{font-size:30px;line-height:1.25;margin:0 0 14px}
.lp-hero .lead{font-size:17px;line-height:1.65;max-width:640px;margin:0 auto 24px;color:#4a4f57}
.lp-cta{display:inline-block;background:#F03C0A;color:#fff;text-decoration:none;font-weight:700;
  font-size:17px;padding:15px 32px;border-radius:10px;margin:4px}
.lp-cta.alt{background:#2F353E}
.lp-note{font-size:13.5px;color:#6b6f76;margin-top:12px}
.lp h2{font-size:23px;margin:44px 0 6px}
.lp h2+.lead{color:#4a4f57;margin:0 0 20px;line-height:1.6}
.lp-steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:20px}
.lp-step{background:#fff;border:1px solid #e7e2d8;border-radius:12px;padding:20px}
.lp-step .n{display:inline-flex;width:28px;height:28px;border-radius:50%;background:#F03C0A;color:#fff;
  align-items:center;justify-content:center;font-weight:700;font-size:15px;margin-bottom:10px}
.lp-step h3{margin:0 0 6px;font-size:17px}
.lp-step p{margin:0;line-height:1.6;color:#4a4f57}
.lp-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:18px}
.lp-item{background:#fff;border:1px solid #e7e2d8;border-radius:12px;padding:17px 19px}
.lp-item b{display:block;margin-bottom:5px;font-size:16px}
.lp-item span{color:#4a4f57;line-height:1.6;font-size:14.5px}
.lp-price{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:18px}
.lp-pack{background:#fff;border:1px solid #e7e2d8;border-radius:12px;padding:20px;text-align:center}
.lp-pack .cap{font-size:15px;color:#6b6f76}
.lp-pack .amt{font-size:28px;font-weight:700;margin:6px 0}
.lp-pack .desc{font-size:14px;color:#4a4f57;line-height:1.5}
.lp-free{background:#FBF7EF;border:1px solid #e7e2d8;border-radius:12px;padding:20px;margin-top:18px}
.lp-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;padding:0;list-style:none}
.lp-tags li{background:#fff;border:1px solid #e7e2d8;border-radius:999px;padding:8px 16px;font-size:14.5px}
.lp-faq{margin-top:18px}
.lp-faq details{background:#fff;border:1px solid #e7e2d8;border-radius:12px;padding:15px 19px;margin-bottom:10px}
.lp-faq summary{font-weight:600;cursor:pointer;font-size:16px}
.lp-faq p{margin:10px 0 0;line-height:1.65;color:#4a4f57}
.lp-end{text-align:center;margin-top:48px;padding-top:26px;border-top:1px solid #e7e2d8;color:#4a4f57;line-height:1.65}
.lp-end a{color:#2F353E}
.lp-langs{text-align:center;margin-top:22px;font-size:14px}
.lp-langs a{margin:0 7px;color:#6b6f76}
@media(max-width:600px){.lp-hero h1{font-size:25px}.lp h2{font-size:20px}}

/* ── cienki pasek pod paskiem serwisu: spis sekcji TEJ strony ──────────────────
   Pasek serwisu (lib/nav.php) prowadzi MIĘDZY usługami, ten prowadzi PO stronie. Rozdzielone,
   bo mieszanie obu rodzajów odnośników w jednej linii jest nieczytelne, a strona jest długa.
   Na telefonie ukryty — nie zmieściłby się, a pasek serwisu z logowaniem jest ważniejszy. */
.lp-sub{position:sticky;top:45px;z-index:40;background:#fff;border-bottom:1px solid #e7e2d8}
.lp-sub-in{max-width:960px;margin:0 auto;padding:7px 18px;display:flex;align-items:center;gap:18px}
.lp-sub-in a{color:#6b6f76;text-decoration:none;font-size:14px;white-space:nowrap;
  padding:4px 0;border-bottom:2px solid transparent}
.lp-sub-in a:hover{color:#2F353E;border-bottom-color:#F03C0A}
.lp-sub-cta{margin-left:auto;background:#F03C0A;color:#fff!important;font-weight:700;
  padding:7px 15px;border-radius:8px;border-bottom:none!important}
.lp h2{scroll-margin-top:104px}   /* dwa przyklejone paski nad nagłówkiem */
@media(max-width:820px){ .lp-sub{display:none} .lp h2{scroll-margin-top:60px} }

/* ── tabela porównawcza cennika (strona dla operatorów, Etap 7) ────────────────
   Operator porównuje dwie kolumny i chce zobaczyć różnicę w jednym rzucie oka,
   a nie czytać sześciu akapitów — dlatego tabela, a nie kolejna lista kart.
   Zawijana w kontener z przewijaniem: na telefonie trzy kolumny nie zmieszczą się
   w szerokości ekranu, a strona NIE MOŻE przewijać się w poziomie całą sobą. */
.lp-tab-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.lp-tab{width:100%;min-width:420px;border-collapse:collapse;background:#fff;
  border:1px solid #e7e2d8;border-radius:12px;overflow:hidden;font-size:14.5px}
.lp-tab th,.lp-tab td{padding:11px 14px;text-align:left;border-bottom:1px solid #efece5}
.lp-tab th{background:#FBF7EF;font-size:13.5px;font-weight:700}
.lp-tab tr:last-child td{border-bottom:none}
.lp-tab td{color:#4a4f57}
.lp-tab .c{text-align:center;white-space:nowrap}
.lp-tab td.on{font-weight:700;color:#2F353E}