/* ── karnety — style przeniesione z inline <style> w page-karnety.php (konwencja: CSS per strona) ── */
  /* ── Eyebrow (styl jak .sz-eyebrow na podstronach funkcji) ── */
  .kar-page .eyebrow { display: inline-block; margin-bottom: 14px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); }

  /* Globalny .btn-cta nie ogranicza svg — bez tego strzałka jest ogromna i łamie tekst */
  .kar-page .btn-cta { white-space: nowrap; }
  .kar-page .btn-cta svg { flex: 0 0 auto; width: 17px; height: 17px; }

  /* Hero: kanon .hero-std w main.css — bez lokalnych regul. */

  /* ── Screen / placeholder ─────────────────────────────── */
  .kar-shot { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-screen); border: 1px solid var(--border); }
  .kar-shot img { display: block; width: 100%; height: auto; }

  /* ── Trzy rodzaje karnetów (układ bento jak sekcja „Rozwiązanie") ── */
  .kar-types { max-width: 1120px; margin: 0 auto; padding: 88px 32px; }
  .kar-types-head { text-align: center; max-width: 34em; margin: 0 auto 44px; }
  .kar-types-head h2 { font-size: var(--fs-section, clamp(1.7rem, 2.7vw, 2.3rem)); color: var(--text); }
  .kar-tag { display: inline-block; margin-bottom: 10px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); }
  .kar-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .kar-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-strong); border-radius: var(--card-radius); overflow: hidden; box-shadow: 0 1px 2px rgba(17,17,17,0.04); }
  .kar-card-text { padding: 24px 24px 0; }
  .kar-card h3 { margin: 0 0 8px; font-family: var(--font-heading); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
  .kar-card-text p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }
  .kar-card-visual { margin-top: 20px; padding: 16px; background: var(--bg-subtle); border-top: 1px solid var(--border); flex: 1; display: flex; }
  .kar-card-visual .kar-shot { width: 100%; }
  /* Szeroka karta zakupu (tekst | wizualizacja) */
  .kar-wide { margin-top: 16px; display: grid; grid-template-columns: 1fr 1.15fr; background: #fff; border: 1px solid var(--border-strong); border-radius: var(--card-radius); overflow: hidden; box-shadow: 0 1px 2px rgba(17,17,17,0.04); }
  .kar-wide-text { padding: 28px; align-self: center; }
  .kar-wide-visual { padding: 16px; background: var(--bg-subtle); border-left: 1px solid var(--border); }

  /* Wspólne fakty pod trzema rodzajami — dwie białe karty (język kart strony) */
  .kar-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
  .kar-info-card { padding: 24px; border: 1px solid var(--border-strong); border-radius: var(--card-radius); background: #fff; box-shadow: 0 1px 2px rgba(17,17,17,0.04); }
  .kar-info-card .ico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9px; background: var(--brand-soft); margin-bottom: 16px; }
  .kar-info-card .ico svg { width: 20px; height: 20px; color: var(--brand); }
  .kar-info-card h4 { margin: 0 0 6px; font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--text); }
  .kar-info-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }

  /* Wiekszy odstęp przed final CTA (globalny ma tylko 24px top) */
  .kar-page .final-cta { padding-top: 88px; }


  @media (max-width: 900px) {
    .kar-types { padding: 64px 20px; }
    .kar-cards { grid-template-columns: 1fr; }
    .kar-wide { grid-template-columns: 1fr; }
    .kar-wide-visual { border-left: 0; border-top: 1px solid var(--border); }
    .kar-info-grid { grid-template-columns: 1fr; }
  }