/*
  Ścieżka ścianki (/scianki). Tokeny, typografia, przyciski, ramka telefonu (.device),
  FAQ, formularze i stopka są w base.css; ruch (reveal, przyklejony telefon, liczniki,
  pętle wideo) w motion.css według MOTION.md. Tu tylko układy tej strony (prefiks sc-).
*/

/* ---------- 1. Hero ---------- */

.sc-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(40px, 24px + 5vw, 112px) var(--section-y);
}

/* Telefon: nagłówek, nagranie, oferta (kolejność DOM). Nagranie wchodzi w pierwszy ekran. */
.sc-hero__grid {
  display: grid;
  gap: var(--s-8);
}

.sc-eyebrow { color: var(--c-accent); }
.sc-hero h1 { margin-top: var(--s-4); }
.sc-hero__lead { margin-top: var(--s-4); max-width: 38ch; }
.sc-hero__actions { margin-top: var(--s-6); }
.sc-hero__media { justify-self: center; width: 100%; }

/* Oferta w hero: cena dla pierwszych ścianek (pierwszy miesiąc 0 zł) z trzema powodami, przed CTA. Bez przekreśleń. */
.sc-offer {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6);
  max-width: 34rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}
.sc-offer__price {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
}
.sc-offer__amount {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2.8rem + 3vw, 5rem);
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.sc-offer__unit {
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-text-2);
}
.sc-offer__h { color: var(--c-accent); }
.sc-offer__list { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.sc-offer__std { margin-top: calc(var(--s-1) * -1); }
.sc-offer__list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--s-3);
  line-height: 1.45;
  color: var(--c-text-2);
}
.sc-offer__list strong { color: var(--c-text); font-weight: 600; }
.sc-offer__list .icon { margin-top: 2px; color: var(--c-success); }
.sc-hero__status { margin-top: var(--s-5); max-width: 52ch; }

@media (min-width: 64rem) {
  .sc-hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    grid-template-rows: auto 1fr;
    row-gap: var(--s-6);
  }
  .sc-hero__head { grid-column: 1 / span 7; grid-row: 1; align-self: end; }
  .sc-hero__body { grid-column: 1 / span 7; grid-row: 2; align-self: start; }
  .sc-hero__media { grid-column: 8 / span 5; grid-row: 1 / span 2; align-self: center; }
  /* Poziomy kadr mapy (600 x 514) zamiast pionowego telefonu: szersza kolumna, żeby mapa była czytelna. */
  /* Karta na całą kolumnę: powody w jednej linii, więc CTA mieści się w pierwszym ekranie 1440 x 900. */
  .sc-offer { max-width: none; }
}
/* Niskie okno desktopu (np. 1440 x 900): mniej powietrza nad nagłówkiem, żeby CTA hero był cały widoczny. */
@media (min-width: 64rem) and (max-height: 62rem) {
  .sc-hero { padding-top: clamp(40px, 8vh, 72px); }
}

/* Nagłówek sekcji dłuższy niż 8 słów: szersza miara, żeby nie łamał się na 4 linie. */
.sc-h2-wide { max-width: 24ch; }

/* ---------- Rozwinięcia „Więcej” (drugorzędna treść schowana, nie usunięta) ---------- */

.sc-more { margin-top: var(--s-8); max-width: var(--measure); }
.sc-more > summary { cursor: pointer; list-style: none; }
.sc-more > summary::-webkit-details-marker { display: none; }
.sc-more > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: var(--s-3);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast) var(--ease-out);
}
.sc-more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.sc-more__body { display: grid; gap: var(--s-3); padding-top: var(--s-3); color: var(--c-text-2); }
.sc-more__body strong { color: var(--c-text); font-weight: 600; }

/* ---------- 2. Mechanizm: przyklejony telefon ---------- */

.sc-story { margin-top: var(--s-12); }
.sc-story .story__title { max-width: 16ch; }

/* Krok 2: baner powiadomienia nad ekranem telefonu z nagraniem. Stos ma szerokość telefonu
   i jest kontenerem, więc baner skaluje się razem z ramką (56svh na telefonie, 330 px na desktopie). */
.sc-stack {
  position: relative;
  width: var(--phone-w);
  margin-inline: auto;
  container-type: inline-size;
}
.sc-notif {
  position: absolute;
  z-index: 2;
  top: 8%;
  left: 7%;
  right: 7%;
  display: grid;
  grid-template-columns: 2.5em minmax(0, 1fr);
  gap: 0.75em;
  align-items: start;
  padding: 0.85em;
  font-size: clamp(10px, 4.6cqi, 14px);
  line-height: 1.35;
  background: rgba(30, 34, 40, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 1.4em;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.sc-notif__icon {
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 0.7em;
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.sc-notif__icon .icon { width: 1.3em; height: 1.3em; }
.sc-notif__body { display: grid; gap: 0.15em; min-width: 0; }
.sc-notif__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.85em;
  color: var(--c-text-2);
}
.sc-notif__title { font-weight: 600; }

/* Baner wjeżdża z góry, kiedy krok 2 staje się aktywny (tylko transform i opacity). */
html.motion-ok .sc-story .sc-notif {
  opacity: 0;
  transform: translateY(-16px) scale(0.96);
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
}
html.motion-ok .sc-story .story__step[data-active] .sc-notif {
  opacity: 1;
  transform: none;
  transition: opacity 260ms ease 240ms, transform 420ms var(--ease-out-quint) 240ms;
}
@media (prefers-reduced-motion: reduce) {
  html .sc-story .sc-notif { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- 3. Właściciel: wiersze tekst + nagranie ---------- */
/* Każdy wiersz: tekst i nagranie obok siebie od 1024 px, co drugi odwrócony. */

.sc-job {
  display: grid;
  gap: var(--s-12);
  margin-top: var(--section-y);
  scroll-margin-top: calc(var(--nav-h) + var(--s-6));
}
.sc-section-head + .sc-job { margin-top: var(--s-16); }

.sc-job__num { display: flex; gap: var(--s-3); color: var(--c-text-2); }
.sc-job__num .mono { color: var(--c-accent); }
.sc-job .h2 { margin-top: var(--s-4); max-width: 18ch; }
.sc-job__lead { margin-top: var(--s-6); max-width: 40ch; }
.sc-job__list { margin-top: var(--s-8); max-width: var(--measure); }
.sc-job__note { margin-top: var(--s-6); max-width: var(--measure); }
.sc-job__media { justify-self: center; min-width: 0; }

/* Siatka funkcji: nazwa i jedno zdanie, do skanowania wzrokiem. */
.sc-feats {
  display: grid;
  gap: var(--s-5) var(--s-8);
  margin-top: var(--s-8);
}
.sc-feats > div { padding-top: var(--s-3); border-top: 1px solid var(--c-border); }
.sc-feats dt { font-weight: 600; }
.sc-feats dd { margin-top: var(--s-1); color: var(--c-text-2); font-size: var(--fs-small); line-height: 1.5; }

/* Funkcja „w przygotowaniu”: kropka zamiast checka, żeby nie udawała gotowej. */
.sc-checks li.sc-checks__soon { color: var(--c-text-2); align-items: center; }
.sc-soon-dot {
  justify-self: center;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--c-warning);
  border-radius: 50%;
}
.sc-badge {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 2px 10px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-warning);
  white-space: nowrap;
  vertical-align: 0.1em;
}

@media (min-width: 48rem) {
  .sc-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .sc-job {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: center;
  }
  .sc-job__text { grid-column: 1 / span 6; }
  .sc-job__media { grid-column: 8 / span 5; }
  .sc-job--flip .sc-job__text { grid-column: 7 / span 6; grid-row: 1; }
  .sc-job--flip .sc-job__media { grid-column: 1 / span 5; grid-row: 1; }
}

/* ---------- 4. Co dostają wspinacze ---------- */

.sc-cards {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-10);
}
.sc-card {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  min-width: 0;
}
/* Każde ujęcie apki w pionowej ramce telefonu (bez poziomych wycinków ekranu). */
.sc-card__device {
  --phone-w: clamp(170px, 48vw, 210px);
  justify-self: center;
  margin-block: var(--s-2) var(--s-3);
}
.sc-card__h { font-size: var(--fs-lead); font-weight: 600; line-height: 1.3; padding-inline: var(--s-2); }
.sc-card p { color: var(--c-text-2); padding-inline: var(--s-2); }
.sc-cards__foot { margin-top: var(--s-6); }

@media (min-width: 48rem) {
  .sc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 3b. Dla trenerów i sekcji ---------- */

.sc-coach {
  display: grid;
  gap: var(--s-12);
  margin-top: var(--s-12);
  list-style: none;
  padding: 0;
}
.sc-coach__item { display: grid; align-content: start; gap: var(--s-3); min-width: 0; }
.sc-coach__device { --phone-w: clamp(200px, 58vw, 260px); justify-self: center; margin-bottom: var(--s-4); }
.sc-coach__h { font-size: var(--fs-lead); font-weight: 600; line-height: 1.3; }
.sc-coach__item p:not(.label) { color: var(--c-text-2); max-width: 40ch; }
.sc-coach__foot { margin-top: var(--s-6); max-width: var(--measure); }
@media (min-width: 48rem) {
  .sc-coach { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
  .sc-coach__device { --phone-w: clamp(180px, 24vw, 250px); }
}

/* Wspinacze stoją teraz na zwykłym tle, więc cennik pod nimi oddziela cienka linia. */
.sc-section--rule { border-top: 1px solid var(--c-border); }

/* ---------- 5. Cennik ---------- */
/* Na wierzchu tylko decyzja: przełącznik, cena z jedną linią notki, 4 checki, CTA.
   Warunki, przypomnienia i pytania o płatności są w jednym rozwinięciu pod spodem. */

.sc-pricing__head .lead { margin-top: var(--s-4); }

.sc-pricing {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-10);
}

.sc-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--s-6);
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent);
  border-radius: var(--r-card);
  min-width: 0;
}

/* Przełącznik: dwa natywne radia (strzałki działają bez JS). Zaznaczenie to pigułka pod
   etykietami przesuwana transformem; kolor etykiety zmienia się od razu. */
.sc-toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 4px;
  min-width: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-bg);
}
.sc-toggle__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.sc-toggle__label {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--fs-nav);
  color: var(--c-text-2);
  cursor: pointer;
}
.sc-toggle__pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--r-pill);
  background: var(--c-accent-strong);
  transition: transform var(--t-toggle) var(--ease-out);
}
#okres-rok:checked ~ .sc-toggle__pill { transform: translateX(100%); }
.sc-toggle__input:checked + .sc-toggle__label { color: var(--c-on-accent); }
.sc-toggle__input:focus-visible + .sc-toggle__label {
  outline: 2px solid var(--c-chalk);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .sc-toggle__input:not(:checked) + .sc-toggle__label:hover { color: var(--c-text); }
}
@media (prefers-reduced-motion: reduce) {
  .sc-toggle__pill { transition: none; }
}

/* Dwa równorzędne wiersze cen obok siebie (od 48rem), na telefonie jeden pod drugim.
   Wiersz pierwszych ścianek wyróżnia tylko ramka i dopisek o darmowym miesiącu. */
.sc-tiers {
  align-self: stretch;
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.sc-tier {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  min-width: 0;
}
.sc-tier--first { border-color: var(--c-accent); }
.sc-tier__h { color: var(--c-text-2); }
.sc-tier--first .sc-tier__h { color: var(--c-warm); }
.sc-tier__free {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
  font-weight: 600;
  color: var(--c-success);
}
.sc-tier__more { margin-top: var(--s-2); color: var(--c-text-2); }
.sc-tax { margin-top: var(--s-3); }
@media (min-width: 48rem) {
  .sc-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sc-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s-2);
  margin-top: var(--s-3);
}
.sc-price__amount {
  font-family: var(--font-display);
  font-size: var(--fs-price);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.sc-price__unit { font-weight: 600; color: var(--c-text-2); }
.sc-price__note {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--c-text-2);
}

/* Bez JS: zostaje cena roczna z HTML i linia z ceną miesięczną, przełącznika nie ma.
   Z JS linia miesięczna znika, bo pokazuje ją przełącznik. */
.sc-pricing:not(.is-enhanced) .sc-toggle { display: none; }
.sc-price__alt { margin-top: var(--s-2); }
.sc-pricing.is-enhanced .sc-price__alt { display: none; }

.sc-plan .sc-checks {
  align-self: stretch;
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
}
.sc-plan__cta { margin-top: var(--s-8); }
.sc-plan__cta.actions { align-self: stretch; }

.sc-box {
  padding: var(--s-6);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  align-self: start;
  min-width: 0;
}

.sc-checks {
  display: grid;
  gap: var(--s-3);
}
.sc-checks li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--s-3);
  line-height: 1.5;
}
.sc-checks .icon { margin-top: 2px; color: var(--c-success); }

.sc-start { margin-top: var(--s-4); }
.sc-start__row { padding-block: var(--s-3); border-top: 1px solid var(--c-border); }
.sc-start__row:first-child { padding-top: 0; border-top: 0; }
.sc-start__row:last-child { padding-bottom: 0; }
.sc-start__row dt { font-weight: 600; }
.sc-start__row dd { margin-top: var(--s-1); color: var(--c-text-2); }

/* Rozwinięcie „Warunki i przypomnienia”. */
.sc-conditions { max-width: none; margin-top: var(--s-8); }
.sc-conditions__body {
  display: grid;
  gap: var(--s-8);
  padding-top: var(--s-6);
}
.sc-conditions__col { min-width: 0; }
.sc-conditions__h { color: var(--c-accent); }
.sc-conditions__h:not(:first-child) { margin-top: var(--s-8); }
.sc-conditions__foot { margin-top: var(--s-4); }
.sc-faq--terms { margin-top: var(--s-3); }

.sc-terms {
  margin-top: var(--s-3);
  max-width: var(--measure);
  padding-left: 1.1em;
  list-style: disc;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-2);
}
.sc-terms li + li { margin-top: var(--s-2); }
.sc-terms li::marker { color: var(--c-accent); }

.sc-pricing__note { margin-top: var(--s-6); max-width: var(--measure); }

.sc-toggle__hint { margin-top: var(--s-3); color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.sc-pricing:not(.is-enhanced) .sc-toggle__hint { display: none; }

/* Obietnica pod cennikiem: większym krojem, jedna linia na desktopie. */
.sc-promise {
  margin-top: var(--s-10);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: 1.05;
  color: var(--c-warm);
  text-wrap: balance;
}

@media (min-width: 64rem) {
  .sc-pricing {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
  }
  .sc-plan { grid-column: 1 / span 7; padding: var(--s-8); align-self: start; }
  .sc-why { grid-column: 8 / span 5; }
  .sc-conditions__body { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-16); }
}

/* ---------- 6. Wdrożenie: 3 kroki na wierzchu ---------- */

.sc-launch__lead { margin-top: var(--s-6); max-width: 44ch; }

.sc-steps {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-10);
  counter-reset: none;
}
.sc-step {
  position: relative;
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
}
.sc-step__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.4rem + 2.4vw, 4.5rem);
  line-height: 0.9;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.sc-step h3 { margin-top: var(--s-3); }
.sc-step p { margin-top: var(--s-2); color: var(--c-text-2); }

.sc-launch__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-8);
  margin-top: var(--s-10);
}
.sc-steps__foot { font-weight: 600; color: var(--c-text); }

@media (min-width: 48rem) {
  .sc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap); }
}
@media (min-width: 64rem) {
  .sc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 8. FAQ ---------- */

.sc-faqwrap { max-width: 52rem; }
.sc-faq { margin-top: var(--s-8); }
.sc-faq__more { margin-top: var(--s-6); }

/* ---------- 9. Kontakt: osobna sekcja na pełną szerokość ---------- */

.sc-contact {
  display: grid;
  gap: var(--s-8);
  scroll-margin-top: calc(var(--nav-h) + var(--s-4));
}
.sc-contact:focus { outline: none; }
.sc-contact:focus-visible { outline: 2px solid var(--c-chalk); outline-offset: 4px; }
.sc-contact__h { max-width: 16ch; }
.sc-contact__lead { margin-top: var(--s-4); max-width: 38ch; }
.sc-contact__points { margin-top: var(--s-6); color: var(--c-text-2); }

.sc-check-error { grid-column: 2; }

@media (min-width: 48rem) {
  .sc-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-4);
  }
  .sc-form__wide { grid-column: 1 / -1; }
  .sc-form .btn { justify-self: start; }
}

@media (min-width: 64rem) {
  .sc-contact {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
  }
  .sc-contact__intro { grid-column: 1 / span 5; }
  .sc-form, .sc-form-done { grid-column: 7 / span 6; }
}

/* ---------- Oferta 2026-09-24: nagłówki sekcji, setterzy, panel, właściciel, cena, oferta dla pierwszych ścianek ---------- */

/* Kotwice z nagłówka i przycisków: sekcja nie chowa się pod przyklejonym nagłówkiem. */
.sc-anchor, .sc-job { scroll-margin-top: calc(var(--nav-h) + var(--s-4)); }

.sc-section-head { display: grid; gap: var(--s-4); }
.sc-section-head__lead { max-width: 46ch; color: var(--c-text-2); }
.sc-climbers__h { margin-top: var(--s-4); }

/* Kroki routesettingu: numer nad tytułem, druga linia ciszej. */
.sc-step-label { display: flex; gap: var(--s-3); color: var(--c-text-2); }
.sc-step-label .mono { color: var(--c-accent); }
.sc-story .story__text .sc-step-label + .story__title { margin-top: var(--s-3); }
.sc-story__aside {
  margin-top: var(--s-4);
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-accent-deep);
  font-size: var(--fs-small);
  color: var(--c-text-2);
  max-width: 44ch;
}

/* Panel w przeglądarce: dwa nagrania obok siebie od 1024 px. */
.sc-panel { margin-top: var(--section-y); }
.sc-panel__head { display: grid; gap: var(--s-4); }
.sc-panel__h { max-width: 22ch; }
.sc-panel__lead { max-width: 52ch; }
.sc-panel__grid {
  display: grid;
  gap: var(--s-10);
  margin-top: var(--s-10);
}
@media (min-width: 64rem) {
  .sc-panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
}

/* Ramka przeglądarki pod nagrania panelu (1440 x 900). Przycisk pętli jak przy telefonie:
   na prawym dolnym rogu ramki (style .video-toggle z base.css, pierścień z motion.css). */
.sc-browser { margin: 0; min-width: 0; width: 100%; }
.sc-browser__frame {
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-raised);
  box-shadow: var(--shadow-phone, 0 24px 60px rgba(0, 0, 0, 0.45));
}
.sc-browser__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 32px;
  padding-inline: var(--s-3);
  border-bottom: 1px solid var(--c-border);
}
.sc-browser__dots { display: inline-flex; gap: 6px; }
.sc-browser__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-border);
}
.sc-browser__url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 3px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--c-text-2);
}
.sc-browser__screen {
  position: relative;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  border-radius: 0 0 13px 13px;
  background: var(--c-device);
}
.sc-browser__poster,
.sc-browser__video { position: absolute; inset: 0; }
.sc-browser__screen img,
.sc-browser__screen video,
.sc-browser__screen picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.sc-browser .device__meta { margin-top: var(--s-4); }

/* Lista funkcji settera: trzy kolumny od 1024 px. */
.sc-kit { margin-top: var(--section-y); }
.sc-kit__h { color: var(--c-accent); }
.sc-kit .sc-feats { margin-top: var(--s-6); }
@media (min-width: 64rem) {
  .sc-feats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Właściciel, wiersz z panelem: szersze nagranie, węższy tekst. */
@media (min-width: 64rem) {
  .sc-job--wide.sc-job--flip .sc-job__media { grid-column: 1 / span 7; justify-self: stretch; }
  .sc-job--wide.sc-job--flip .sc-job__text { grid-column: 8 / span 5; }
  .sc-job--wide .sc-feats { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}
.sc-job--wide .sc-job__media { width: 100%; }

/* „Też w planie”: karty bez nagrań. */
.sc-rest { margin-top: var(--section-y); }
.sc-rest__grid {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.sc-rest__item {
  padding: var(--s-5) var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  min-width: 0;
}
.sc-rest__item h4 { font-weight: 600; font-size: var(--fs-lead); line-height: 1.3; }
.sc-rest__item p { margin-top: var(--s-2); color: var(--c-text-2); font-size: var(--fs-small); line-height: 1.5; }
.sc-rest__item--soon { border-style: dashed; }
.sc-rest__item--soon .sc-badge { margin-left: var(--s-2); }
.sc-rest__foot { margin-top: var(--s-6); max-width: var(--measure); }
@media (min-width: 48rem) {
  .sc-rest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .sc-rest__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sc-cards__foot a { font-weight: 600; }

/* Cennik: lista w karcie planu, „Za co płacisz”, gwarancja. */
.sc-plan__list strong { font-weight: 600; }
.sc-plan__list li { color: var(--c-text-2); }
.sc-plan__list li strong { color: var(--c-text); }

.sc-why__h { font-size: var(--fs-lead); }
/* Obrona ceny przy kwocie: jedno zdanie nad listą, bez nazw i cen innych aplikacji. */
.sc-why__lead { margin-top: var(--s-3); line-height: 1.5; color: var(--c-text); font-weight: 600; max-width: 52ch; }
.sc-why__list { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.sc-why__list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--s-3);
  line-height: 1.5;
  color: var(--c-text-2);
}
.sc-why__list strong { color: var(--c-text); font-weight: 600; }
.sc-why__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: 0.8rem;
}

.sc-price__std { margin-top: var(--s-4); max-width: 52ch; color: var(--c-text-2); }

/* Gwarancja: trzy krótkie odpowiedzi w jednym bloku. Bez kart i bez akcentu z boku:
   nad każdą odpowiedzią ta sama cienka linia co w siatkach funkcji. */
.sc-guar { margin-top: var(--s-12); }
.sc-guar__h {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 400;
  line-height: 1;
  color: var(--c-text);
}
.sc-guar__list {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-6);
}
.sc-guar__item { padding-top: var(--s-4); border-top: 1px solid var(--c-border); min-width: 0; }
.sc-guar__item dt { font-weight: 600; color: var(--c-accent); }
.sc-guar__item dd { margin-top: var(--s-2); max-width: 40ch; line-height: 1.5; color: var(--c-text); }
@media (min-width: 64rem) {
  .sc-guar__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap); }
}

/* Pierwsze ścianki: oferta po lewej, uczciwy stan na dziś po prawej. */
.sc-first { display: grid; gap: var(--s-10); }
.sc-first__lead { margin-top: var(--s-6); max-width: 46ch; }
.sc-first__pl { margin-top: var(--s-4); font-weight: 600; color: var(--c-warm); }
.sc-first__actions { margin-top: var(--s-8); }
.sc-first__side .sc-terms { margin-top: var(--s-4); }
@media (min-width: 64rem) {
  .sc-first { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .sc-first__main { grid-column: 1 / span 7; }
  .sc-first__side { grid-column: 9 / span 4; padding-top: var(--s-4); }
}

/* Start zrobiony za Was: cztery punkty, 2 x 2 od 48rem, w jednym rzędzie od 64rem. */
@media (min-width: 48rem) {
  .sc-steps.sc-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .sc-steps.sc-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Za Cuzkę odpowiadam osobiście: zdjęcie (slot), imię i nazwisko, telefon. */
.sc-founder {
  display: grid;
  gap: var(--s-8);
  margin-top: var(--s-12);
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}
.sc-founder__label { color: var(--c-accent); }
.sc-founder__id { display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-4); }
.sc-founder__photo {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--c-accent-soft);
}
.sc-founder__photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sc-founder__h { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; letter-spacing: 0.01em; }
.sc-founder__role { margin-top: var(--s-1); color: var(--c-text-2); }
.sc-founder__text { margin-top: var(--s-4); color: var(--c-text-2); line-height: 1.55; max-width: 56ch; }
.sc-founder__text--lead { margin-top: var(--s-6); color: var(--c-text); font-size: var(--fs-lead); }
.sc-founder__phone { margin-top: var(--s-6); color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.sc-founder__phone a { display: inline-block; padding-block: 10px; margin-block: -10px; white-space: nowrap; font-weight: 600; font-size: var(--fs-lead); }
.sc-founder__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); align-items: start; }
.sc-founder__shot { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); background: var(--c-raised); }
.sc-founder__shot--a { object-position: 50% 15%; }
.sc-founder__shot--b { object-position: 50% 70%; margin-top: var(--s-8); }
@media (min-width: 48rem) {
  .sc-founder { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-10, 2.5rem); align-items: center; padding: var(--s-10, 2.5rem); }
  .sc-founder__photo { width: 128px; height: 128px; }
}

/* Bezpłatny pokaz: drugi CTA strony, obok formularza. */
.sc-demo {
  margin-top: var(--s-8);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--c-accent);
  border-radius: var(--r-card);
  background: var(--c-accent-soft);
  scroll-margin-top: calc(var(--nav-h) + var(--s-4));
}
.sc-demo__h { font-weight: 600; font-size: var(--fs-lead); line-height: 1.3; }
.sc-demo__text { margin-top: var(--s-2); color: var(--c-text-2); line-height: 1.5; max-width: 46ch; }
.sc-demo__how { margin-top: var(--s-3); }

/* Fraza SEO nad hasłem h1 (plan SEO A12): mniejszy krój tekstu, osobny wiersz. */
.sc-hero__kicker {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  color: var(--c-text);
}

/* Treść pytania: pole wielowierszowe, tylko pionowe rozciąganie. */
.sc-form__message { min-height: 120px; resize: vertical; }