/* Strony integracji (/sync, /banks): kafle miejsc docelowych i instytucji,
   lista banków, para chipów, karta ceny, zakres, kroki. Wymaga tokens.css +
   components.css + sections.css. Ten plik ma bajtowo identyczną kopię w
   apps/web-v1/public/landing-v2/sync.css (test zgodności); ładowany tylko na
   ścieżkach /sync i /banks. */

/* ── Segmenty: zakładki ───────────────────────────────────────
   Tor w owsiance, aktywny segment w bieli. Promień toru = promień segmentu
   (0.75rem) + wcięcie (0.25rem). Hover zmienia tło, nigdy obrys. */
.sync-seg {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--bg-tint);
  border-radius: 1rem;
}

.sync-seg-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.sync-seg-item:hover { color: var(--ink); background: rgb(18 12 8 / 0.04); }

.sync-seg-item[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(18 12 8 / 0.08);
}

.sync-seg-item:active { transform: scale(0.97); }

.sync-seg-item[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* ── Cena: jedna karta subskrypcji Martii ──────────────────────
   Kwota przychodzi z żywego źródła cen (props), nigdy z tego pliku.
   Lista obietnic produktu, nie warianty planów. */
.sync-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2rem;
  max-width: 56rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--stone);
  border-radius: var(--radius-lg);
}

.sync-price-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sync-price-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.15;
}

.sync-price-amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sync-price-amount b {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 3.25rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.sync-price-amount span {
  font-size: 0.9375rem;
  color: var(--ink-muted);
}

.sync-price-offer {
  font-size: 0.875rem;
  color: var(--ink-muted);
}

.sync-price-note {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

.sync-price-none {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.3;
}

.sync-price-main .btn {
  align-self: flex-start;
  margin-top: auto;
}

.sync-price-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-left: 2rem;
  border-left: 1px solid var(--stone-soft);
  font-size: 0.9375rem;
}

.sync-price-list li,
.sync-scope li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.sync-price-list svg,
.sync-scope svg {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.3rem;
}

.sync-price-list svg,
.sync-scope-can svg { color: var(--status-green); }

/* ── Zakres: co asystent może, a czego nie ─────────────────── */
.sync-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.sync-scope-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.6rem;
  border-radius: var(--radius-lg);
}

.sync-scope-can { background: var(--surface); border: 1px solid var(--stone); }
.sync-scope-cannot { background: var(--bg-tint); border: 1px solid transparent; }
.sync-scope-cannot svg { color: var(--ink-muted); }

.sync-scope-title {
  font-weight: 600;
  font-size: 1.0625rem;
}

.sync-scope ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9375rem;
}

/* ── Kroki konfiguracji ────────────────────────────────────── */
.sync-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  counter-reset: sync-step;
}

.sync-step {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--stone);
  border-radius: var(--radius-lg);
  counter-increment: sync-step;
}

.sync-step::before {
  content: counter(sync-step);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.4rem;
  background: var(--bg-tint);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.sync-step h3 {
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.sync-step p {
  font-size: 0.9375rem;
  color: var(--ink-muted);
}

/* ── Wybór kraju i wyszukiwarka ────────────────────────────── */
.sync-select {
  position: relative;
  display: block;
}

.sync-select select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  cursor: pointer;
}

.sync-select-caret {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  display: grid;
  width: 1rem;
  height: 1rem;
  color: var(--ink-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.sync-search {
  position: relative;
  display: block;
}

.sync-search .input { padding-left: 2.4rem; }

.sync-search svg {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  width: 1rem;
  height: 1rem;
  color: var(--ink-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

/* ── Monogram: domyślny znak dostawcy i banku ──────────────────
   Nazwa zawsze w tekście obok; monogram nie udaje logo. */
.sync-mono {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--bg-tint);
  border: 1px solid var(--stone);
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  overflow: hidden;
}

.sync-mono svg {
  width: 1.15rem;
  height: 1.15rem;
}

.sync-mono img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.3rem;
  background: var(--surface);
}

/* ── Znak marki: logo dostawcy zamiast monogramu ──────────────
   Kafel jak w aplikacji (Ustawienia → Integracje). --tile: plik jest całym
   kaflem (biały znak na kolorze marki), strona tylko zaokrągla rogi.
   --icon: znak produktu bez zmian, na białym kaflu z obrysem. Kilka znaków
   (Asystenci AI) zachodzi na siebie; pierścień ma kolor tła kafla. */
.sync-mono--tile {
  background: none;
  border: 0;
}

.sync-mono--tile img {
  padding: 0;
  background: none;
  object-fit: cover;
}

.sync-mono--icon { background: var(--surface); }

.sync-mono--icon img { padding: 0.45rem; }

.sync-marks {
  display: inline-flex;
  flex: 0 0 auto;
}

.sync-marks .sync-mono + .sync-mono {
  margin-left: -0.6rem;
  box-shadow: 0 0 0 2px var(--surface);
  transition: box-shadow 0.3s ease;
}

.sync-chip .sync-marks .sync-mono + .sync-mono { margin-left: -0.5rem; }

a.sync-dest:hover .sync-marks .sync-mono + .sync-mono { box-shadow: 0 0 0 2px var(--bg); }

/* ── Kafel miejsca docelowego ──────────────────────────────── */
.sync-dest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.sync-dest {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--stone);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: transform 0.5s var(--ease-quint), background-color 0.3s ease;
}

a.sync-dest:hover {
  transform: translateY(-4px);
  background: var(--bg);
}

.sync-dest-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
}

.sync-dest-name {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
}

.sync-dest-sub {
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.sync-dest-status {
  flex: 0 0 auto;
  padding: 0.1rem 0.55rem;
  background: var(--status-blue-bg);
  color: var(--status-blue-text);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ── Kafel instytucji (bank) ───────────────────────────────── */
.sync-inst-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.sync-inst {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.75rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--stone);
  border-radius: var(--radius-md);
}

.sync-inst-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.sync-inst-name {
  overflow: hidden;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-inst-bic {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
}

.sync-coverage-bar {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.sync-empty {
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}

/* ── Rząd logo banków w sekcji „Znajdź swój bank" ─────────────
   Jeden link do listy banków. Każde logo w polu o stałym rozmiarze,
   skalowane do środka (object-fit: contain), nigdy rozciągnięte. Hover
   zmienia tło pól, nigdy obrys. */
.sync-bank-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 2.25rem;
  color: inherit;
  text-decoration: none;
}

.sync-bank-logo {
  display: block;
  height: 4.25rem;
  padding: 0.7rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--stone);
  border-radius: var(--radius-md);
  transition: background-color 0.3s ease;
}

.sync-bank-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

a.sync-bank-row:hover .sync-bank-logo { background: var(--bg); }

/* ── Stronicowanie ─────────────────────────────────────────── */
.sync-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 1.5rem;
}

.sync-pager-item {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.sync-pager-item:hover { background: var(--bg-tint); color: var(--ink); }

.sync-pager-item[aria-current="page"] {
  background: var(--ink);
  color: var(--cream-on-dark);
}

.sync-pager-item:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ── Para chipów w nagłówku strony miejsca docelowego ───────────
   Lewy: Twój bank (przewija do listy banków). Prawy: miejsce docelowe.
   Łącznik: kropkowana linia jak w „Jak to działa". */
.sync-chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.sync-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.9rem 0.45rem 0.45rem;
  background: var(--surface);
  border: 1px solid var(--stone);
  border-radius: var(--radius-sm);
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.3s ease;
}

.sync-chip .sync-mono {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
}

a.sync-chip:hover,
button.sync-chip:hover { background: var(--bg); }

.sync-chip-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.sync-chip-name { font-weight: 600; font-size: 0.9375rem; }
.sync-chip-sub { font-size: 0.75rem; color: var(--ink-muted); }

.sync-chip-link {
  width: 2.5rem;
  border-top: 2px dotted var(--stone);
}

/* ── Nota o znakach towarowych ─────────────────────────────── */
.sync-tm {
  max-width: 50rem;
  margin: 3rem auto 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--ink-muted);
  text-align: center;
}

/* ── Strony /sync i /sync/<miejsce>: nadtytuł, nagłówki sekcji,
   chipy w hero, przykłady pytań, link do przewodnika ──────────── */
.sync-eyebrow {
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.sync-section-lead {
  max-width: 40rem;
  text-align: center;
  color: var(--ink-muted);
}

.sync-hero-chips { margin-top: 2.25rem; }

.sync-hero-cta { margin-top: 2rem; }

.sync-hub-group + .sync-hub-group { margin-top: 2.25rem; }

.sync-hub-label {
  margin-bottom: 0.9rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.sync-ask {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  max-width: 48rem;
  margin-inline: auto;
}

.sync-ask li {
  padding: 0.7rem 1rem;
  background: var(--surface);
  border: 1px solid var(--stone);
  border-radius: var(--radius-lg);
  font-size: 0.9375rem;
}

.sync-guide-link {
  display: block;
  margin-top: 2rem;
  text-align: center;
  font-weight: 600;
}

.sync-narrow {
  max-width: 40rem;
  margin-inline: auto;
}

/* ── Responsywność ─────────────────────────────────────────── */
@media (max-width: 64rem) {
  .sync-inst-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sync-dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sync-bank-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .sync-dest-grid,
  .sync-coverage-bar,
  .sync-price,
  .sync-scope,
  .sync-steps { grid-template-columns: minmax(0, 1fr); }
  .sync-price-list { padding: 1.5rem 0 0; border-left: 0; border-top: 1px solid var(--stone-soft); }
  .sync-inst-grid { grid-template-columns: minmax(0, 1fr); }
  .sync-bank-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sync-seg {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sync-seg-item { flex: 1 0 auto; justify-content: center; padding-inline: 0.6rem; }
  .sync-chip-link { width: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sync-seg-item,
  .sync-dest,
  .sync-chip,
  .sync-pager-item,
  .sync-bank-logo,
  .sync-marks .sync-mono { transition: none; }
  a.sync-dest:hover,
  .sync-seg-item:active { transform: none; }
}