/* /sprawdz — „Wasza organizacja w liczbach".
   Sama ramka rachunku ma styl we wspólnym `landing.css` (klasy .org-*), bo stoi też na
   pozostałych landingach. Tutaj zostaje wyłącznie to, co jest TYLKO na tej stronie:
   ekran powitalny bez makiety i pole na domenę. */

.sp-hero .hero-inner { max-width:780px; text-align:center; }
.sp-hero h1 { letter-spacing:-.02em; }
.sp-hero .hero-sub { margin-left:auto; margin-right:auto; }

/* Pole na domenę: jedno, szerokie, z przyciskiem w tej samej linii. Na telefonie przycisk
   schodzi pod spód na pełną szerokość — wpisywanie adresu jednym palcem jest tu najważniejsze. */
.sp-form { display:flex; gap:10px; justify-content:center; margin-top:26px; flex-wrap:wrap; }
.sp-form input {
  flex:1 1 320px; max-width:420px; padding:14px 18px; font:inherit; font-size:1rem;
  color:var(--fg); background:var(--surface);
  border:1.5px solid var(--border-strong); border-radius:999px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.sp-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,111,0,.15); }
.sp-form .btn-primary { flex:0 0 auto; }

.sp-brak { margin-top:18px; font-size:.92rem; color:var(--fg-secondary); }
.sp-brak b { color:var(--fg); }

@media (max-width:520px){
  .sp-form { flex-direction:column; align-items:stretch; }
  .sp-form input { max-width:none; }
  .sp-form .btn-primary { text-align:center; }
}