/* ==========================================================================
   OFERTA: LINK BUILDING (oferta/link-building.php)
   Ładowany przez $GRELL_PAGES['oferta/link-building.php']['extra_css'].

   Układ (siatki, odstępy, breakpointy sm/lg) = klasy utility Tailwinda w HTML.
   Tu tylko to, czego utility nie wyrażą czysto: tokeny kolorów, pasy tła
   z lokalnymi zmiennymi tekstu/linii, typografia sekcji, znaczniki list (SVG),
   oś kroków, FAQ <details>, pola formularza, sticky nawigacja kotwic.
   Wszystko pod klasą-korzeniem .lb. Bez selektorów po ID i bez !important.
   ========================================================================== */

.lb {
  --lb-surface: #ffffff;
  --lb-alt: #f1f4f8;
  --lb-steel: #e2e7ef;
  --lb-dark: #0b1121;
  --lb-line: #e6e7eb;
  --lb-line-dark: #2a3142;
  /* Kolory tekstu jak w reszcie serwisu: nagłówki = body (hsl 220 20% 15%),
     akapity = text-gray-600, etykiety = text-gray-500, na ciemnym = stopka (#d1d5db) */
  --lb-ink: hsl(220, 20%, 15%);
  --lb-body: #4b5563;
  --lb-muted: #6b7280;
  --lb-on-dark: #ffffff;
  --lb-on-dark-muted: #d1d5db;
  --lb-primary: hsl(var(--primary));
  --lb-primary-text: hsl(var(--primary-text));
  --lb-primary-on-dark: #ff7d93;
  --lb-anchors-h: 56px;

  /* Kolory przełączane przez pas (.lb-dark / .lb-alt / .lb-steel) */
  --t-strong: var(--lb-ink);
  --t-body: var(--lb-body);
  --t-muted: var(--lb-muted);
  --t-brand: var(--lb-primary-text);
  --t-arrow: var(--lb-primary);
  --ln: var(--lb-line);

  background: var(--lb-surface);
  color: var(--t-body);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* Na szarych pasach etykiety ciemniejsze (gray-600), żeby utrzymać kontrast 4.5:1 */
.lb-alt   { background: var(--lb-alt); --ln: #d5dae3; --t-muted: #4b5563; }
.lb-steel { background: var(--lb-steel); --ln: #c3cbd8; --t-muted: #4b5563; }
.lb-dark  {
  background: var(--lb-dark);
  --t-strong: var(--lb-on-dark);
  --t-body: var(--lb-on-dark-muted);
  --t-muted: var(--lb-on-dark-muted);
  --t-brand: var(--lb-primary-on-dark);
  --t-arrow: var(--lb-primary-on-dark);
  --ln: var(--lb-line-dark);
  color: var(--t-body);
}

.lb :focus-visible { outline: 2px solid var(--t-strong); outline-offset: 3px; border-radius: 2px; }

/* Cele kotwic: pod stałym nagłówkiem (--nav-height) i przyklejonym submenu */
.lb [id] { scroll-margin-top: calc(var(--nav-height) + var(--lb-anchors-h) + 1rem); }

/* ---------- kolory tekstu ---------- */
.lb-strong { color: var(--t-strong); }
.lb-muted  { color: var(--t-muted); }

/* ---------- typografia: skala jak na index.php / o-mnie.php ----------
   H1  = text-4xl md:text-5xl lg:text-6xl font-bold leading-tight (36/48/60, 700)
   H2  = text-4xl md:text-5xl font-bold (36/48, 700)
   H3  = text-xl font-bold (20, 700); większy wariant = text-2xl (24, jak na o-mnie)
   eyebrow = text-sm font-semibold uppercase tracking-wider text-primary-a11y
   etykiety = text-xs font-semibold uppercase tracking-wider text-gray-500
   lead = text-lg leading-relaxed text-gray-600 */
.lb-eyebrow { font: 600 14px/1.43 'Inter', system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--t-brand); }
.lb-h1 { font: 700 36px/1.25 'Outfit', 'Inter', system-ui, sans-serif; letter-spacing: -.025em; color: var(--t-strong); text-wrap: balance; }
/* Podtytuł hero (h2 pod h1): jedyny element w gradiencie marki + belka akcentu.
   Gradient przyciemniony względem --gradient-primary (kontrast >= 3:1 dla dużego tekstu). */
.lb-hero-sub { display: block; margin-top: 6px; padding-bottom: .06em; font: 700 24px/1.15 'Outfit', 'Inter', system-ui, sans-serif; letter-spacing: -.03em; text-wrap: balance;
  color: var(--lb-primary-text); background: linear-gradient(100deg, hsl(350 85% 45%) 0%, hsl(15 90% 45%) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lb-hero-sub::first-letter { text-transform: uppercase; } /* w HTML „dla” (zdanie H1), wizualnie „Dla” */
.lb-hero-sub::after { content: ""; display: block; width: 88px; height: 6px; margin-top: 18px; border-radius: 6px; background: var(--gradient-primary); transform-origin: left center; animation: lb-sub-bar .9s .25s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes lb-sub-bar { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .lb-hero-sub::after { animation: none; } }
.lb-h2 { font: 700 36px/1.11 'Outfit', 'Inter', system-ui, sans-serif; letter-spacing: -.025em; color: var(--t-strong); }
/* Druga linia: Outfit 600 (waga używana w serwisie), szara; bez cienkiej odmiany 400 */
.lb-h2 > span { display: block; font-weight: 600; color: var(--t-muted); }
.lb-h2 > span::before { content: "→ "; color: var(--t-arrow); }
.lb-h3 { font: 700 20px/1.4 'Outfit', 'Inter', system-ui, sans-serif; letter-spacing: -.025em; color: var(--t-strong); }
.lb-h3--lg { font-size: 24px; line-height: 1.33; }
.lb-lead { font-size: 18px; line-height: 1.625; color: var(--t-body); }
.lb-summary { font-size: 18px; line-height: 1.625; color: var(--t-strong); }
.lb-list-title { font: 600 12px/1.33 'Inter', system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--t-muted); }
.lb-num { font: 600 14px/1 'Inter', system-ui, sans-serif; letter-spacing: .05em; color: var(--t-brand); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .lb-h1 { font-size: 48px; line-height: 1; }
  .lb-hero-sub { margin-top: 8px; font-size: 34px; line-height: 1.1; }
  .lb-hero-sub::after { width: 112px; margin-top: 24px; }
  .lb-h2 { font-size: 48px; line-height: 1.05; }
}
@media (min-width: 1024px) {
  .lb-h1 { font-size: 60px; }
  .lb-hero-sub { font-size: 40px; }
}

/* ---------- nagłówek sekcji ---------- */
.lb-sec-head { border-bottom: 1px solid var(--ln); }
.lb-sec-idx { font: 600 14px/1 'Inter', system-ui, sans-serif; letter-spacing: .05em; color: var(--t-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-sec-idx b { color: var(--t-strong); font-weight: 600; }

/* ---------- linie ---------- */
.lb-rule-strong { border-top: 1px solid var(--t-strong); }
.lb-rule { border-color: var(--ln); }

/* ---------- przyciski (główny = .btn-primary z input.css) ---------- */
.lb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 32px; border-radius: 999px; font: 600 14px/1.43 'Inter', system-ui, sans-serif; text-decoration: none; border: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.lb-btn.btn-primary { color: #ffffff; }
.lb-btn-sm { min-height: 40px; font-size: 14px; }
.lb-btn-ghost { border-color: var(--t-strong); color: var(--t-strong); background: transparent; transition: background-color .2s, color .2s; }
.lb-btn-ghost:hover { background: var(--lb-ink); color: #ffffff; }
.lb-dark .lb-btn-ghost:hover { background: var(--lb-on-dark); color: var(--lb-ink); }

.lb-textlink { color: var(--t-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- okruszki (wygląd 1:1 z blogiem: text-xs text-gray-600, separator › gray-300, hover primary) ---------- */
.lb-crumbs { font-size: 12px; line-height: 16px; color: #4b5563; }
.lb-crumbs ol { gap: 6px; align-items: center; }
.lb-crumbs li + li::before { content: "›"; margin-right: 6px; color: #d1d5db; }
.lb-crumbs a { text-decoration: none; transition: color .15s; }
.lb-crumbs a:hover { color: hsl(var(--primary)); }
.lb-crumbs [aria-current="page"] { color: #6b7280; }

/* ---------- listy z ikonami (ptaszek = w zakresie, krzyżyk = poza) ---------- */
.lb-list li { position: relative; padding: 16px 0 16px 36px; border-top: 1px solid var(--ln); color: var(--t-strong); }
.lb-list li:last-child { border-bottom: 1px solid var(--ln); }
.lb-list li::before { content: ""; position: absolute; left: 0; top: 19px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23ffe3e8'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.4' fill='none' stroke='%23c4203e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.lb-list--minus li { color: var(--t-body); }
.lb-list--minus li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.5' fill='%23ffffff' stroke='%23c3cbd8'/%3E%3Cpath d='M7 7l6 6M13 7l-6 6' fill='none' stroke='%23535c6b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ---------- hero: pasek faktów ---------- */
.lb-facts > div + div { border-left: 1px solid var(--ln); }
.lb-facts dt { font: 600 12px/1.33 'Inter', system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--t-muted); }
.lb-facts dd { font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--t-strong); }

/* ---------- pas eksperta: cytat i statystyki ---------- */
.lb-quote { font: 500 clamp(22px, 2.6vw, 30px)/1.4 'Outfit', 'Inter', system-ui, sans-serif; letter-spacing: -.025em; color: var(--lb-on-dark); text-wrap: pretty; }
.lb-quote em { font-style: normal; color: var(--lb-primary-on-dark); }
/* Mniejszy wariant cytatu: rekomendacje w trzech kolumnach pod statystykami */
.lb-quote--sm { font-size: 20px; line-height: 1.45; }
.lb-stats > div + div { border-left: 1px solid var(--ln); }
.lb-stats dt { font: 800 40px/1 'Outfit', 'Inter', system-ui, sans-serif; letter-spacing: -.04em; color: var(--t-strong); }
.lb-stats dd { font-size: 14px; font-weight: 600; letter-spacing: .03em; color: var(--t-muted); }

/* ---------- sticky nawigacja kotwic (pod stałym nagłówkiem z-50) ---------- */
.lb-anchors { position: sticky; top: var(--nav-height); z-index: 40; background: var(--lb-surface); border-bottom: 1px solid var(--ln); }
.lb-anchors ul { scrollbar-width: none; }
.lb-anchors ul::-webkit-scrollbar { display: none; }
.lb-anchors ul a { display: block; padding: 18px 0; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--t-muted); white-space: nowrap; text-decoration: none; transition: color .2s, box-shadow .2s; }
/* Rezerwa szerokości pod pogrubienie aktywnej pozycji (bez skakania paska) */
.lb-anchors ul a::after { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }
/* Hover i aktywna sekcja jak w spisie treści wpisów (.toc-link / .toc-active) */
.lb-anchors ul a:hover { color: hsl(350, 80%, 60%); }
.lb-anchors ul a.is-active { color: hsl(350, 80%, 60%); font-weight: 600; box-shadow: inset 0 -2px 0 hsl(350, 80%, 60%); }

/* ---------- cena ---------- */
.lb-price { font: 800 clamp(56px, 8vw, 96px)/1 'Outfit', 'Inter', system-ui, sans-serif; letter-spacing: -.04em; color: var(--t-strong); }
.lb-price small { font: 600 18px/1 'Inter', system-ui, sans-serif; letter-spacing: 0; color: var(--t-muted); margin-left: 8px; }
.lb-spec > div { border-bottom: 1px solid var(--ln); }
.lb-spec > div:first-child { border-top: 1px solid var(--t-strong); }

/* ---------- FAQ ---------- */
.lb-faq details { border-bottom: 1px solid var(--ln); }
.lb-faq details:first-child { border-top: 1px solid var(--t-strong); }
.lb-faq summary { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding: 24px 0; cursor: pointer; list-style: none; font: 600 16px/1.5 'Inter', system-ui, sans-serif; color: var(--t-strong); }
.lb-faq summary::-webkit-details-marker { display: none; }
.lb-faq summary::after { content: "+"; font: 400 24px/1 'Inter', system-ui, sans-serif; color: var(--t-brand); flex: none; }
.lb-faq details[open] summary::after { content: "\2212"; }
.lb-faq details p { padding: 0 48px 24px 0; max-width: 64ch; }
@media (min-width: 1024px) {
  .lb-ask { position: sticky; top: calc(var(--nav-height) + var(--lb-anchors-h) + 24px); }
}

/* ---------- kontakt: oś kroków ---------- */
.lb-next li { position: relative; padding: 0 0 24px 36px; }
.lb-next li:last-child { padding-bottom: 0; }
.lb-next li::before { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--lb-primary); background: var(--lb-surface); }
.lb-next li::after { content: ""; position: absolute; left: 6px; top: 23px; bottom: -2px; width: 1px; background: var(--t-muted); opacity: .45; }
.lb-next li:last-child::after { display: none; }

/* ---------- formularz ---------- */
.lb-field label { display: block; font-size: 14px; font-weight: 600; color: var(--t-strong); margin-bottom: 8px; }
.lb-field label i { font-style: normal; font-weight: 400; color: var(--t-muted); }
.lb-field input, .lb-field textarea { display: block; width: 100%; font: 400 16px/1.4 'Inter', system-ui, sans-serif; color: var(--t-strong); background: var(--lb-surface); border: 1px solid #7b8496; border-radius: 6px; padding: 14px; }
.lb-field textarea { min-height: 128px; resize: vertical; }
.lb-field input:focus, .lb-field textarea:focus { outline: 2px solid var(--t-strong); outline-offset: 1px; border-color: var(--t-strong); }
.lb-field input[aria-invalid="true"], .lb-field textarea[aria-invalid="true"] { border-color: var(--lb-primary-text); }
.lb-hint { margin-top: 8px; font-size: 12px; color: var(--t-muted); }
/* Bez "display": widoczność przełącza klasa .hidden (jak na index.php) */
.lb-error { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--lb-primary-text); }
.lb-consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--t-strong); flex: none; }
.lb-consent a { text-decoration: underline; text-underline-offset: 3px; }
.lb-alert { padding: 14px 16px; border-radius: 6px; font-size: 16px; }
.lb-alert--success { background: #e7f6ec; color: #14532d; border: 1px solid #9fd8b2; }
.lb-alert--error { background: #fdecef; color: #8a1029; border: 1px solid #f2b3bf; }
.lb-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lb-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.5); border-top-color: #ffffff; border-radius: 50%; animation: lb-spin .8s linear infinite; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
.lb-submit[disabled] { opacity: .7; cursor: wait; }

/* ---------- tablet (< lg 1024px): fakty i statystyki 2×2 ---------- */
@media (max-width: 1023px) {
  .lb-facts > div:nth-child(3), .lb-stats > div:nth-child(3) { border-left: 0; }
  .lb-facts > div:nth-child(n+3), .lb-stats > div:nth-child(n+3) { border-top: 1px solid var(--ln); }
}

/* ---------- telefon (< sm 640px) ---------- */
@media (max-width: 639px) {
  .lb-hero-mark { position: absolute; top: 20px; right: -4px; width: 104px; margin: 0; }
  .lb-hero-eyebrow { min-height: 84px; display: flex; align-items: flex-end; padding-right: 116px; }
  .lb-facts > div, .lb-facts > div + div { border-left: 0; border-top: 1px solid var(--ln); }
  .lb-facts > div:first-child { border-top: 0; }
  .lb-facts dd { font-size: 16px; }
  .lb-stats dt { font-size: 32px; }
  .lb-faq details p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-spinner { animation: none; }
}

/* ==========================================================================
   v2 (2026-10-04): przywrócenie smukłości po wdrożeniu pełnych treści.
   DOPISAĆ NA KOŃCU css/oferta-link-building-inline.css (kolejność ma znaczenie:
   te reguły nadpisują wcześniejsze o tej samej specyficzności).
   ========================================================================== */

/* ---------- typografia: lżejsze wagi, mniejsze H2 ---------- */
.lb { line-height: 1.6; }
.lb-h2 { font-weight: 600; font-size: 30px; line-height: 1.15; }
.lb-h2 > span { font-weight: 400; }
.lb-h3 { font-weight: 700; font-size: 18px; line-height: 1.4; letter-spacing: -.01em; }
.lb-h3--lg { font-size: 22px; line-height: 1.3; }
/* mniejszy H2 w wąskiej kolumnie (sekcja kontaktu) */
.lb-h2--sm { font-size: 28px; }
.lb-summary { line-height: 1.55; }
.lb-quote { font-weight: 400; }
.lb-quote--sm { font-size: 17px; line-height: 1.5; letter-spacing: -.01em; }
.lb-stats dt { font-weight: 600; letter-spacing: -.02em; }
.lb-stats dd { font-weight: 400; letter-spacing: 0; }
.lb-price { font-weight: 600; letter-spacing: -.035em; }
.lb-facts dd { font-weight: 500; }
@media (min-width: 768px) {
  .lb-h2 { font-size: 36px; line-height: 1.12; }
  .lb-h2--sm { font-size: 30px; }
}
@media (min-width: 1024px) {
  .lb-h2 { font-size: 42px; }
  .lb-h2--sm { font-size: 32px; line-height: 1.15; }
}

/* ---------- szerokość łamu ---------- */
.lb-measure { max-width: 64ch; }

/* ---------- listy: gęstsze wiersze, mniejszy tekst ---------- */
.lb-list li { padding: 12px 0 12px 32px; font-size: 16px; line-height: 1.55; }
.lb-list li::before { top: 14px; width: 18px; height: 18px; }
/* lista w dwóch kolumnach na całą szerokość (sekcja Diagnoza) */
@media (min-width: 1024px) {
  .lb-list--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
  .lb-list--2 li:nth-last-child(2) { border-bottom: 1px solid var(--ln); }
}

/* ---------- wiersze nazwa–opis (Źródła) i siatka typów serwisów ---------- */
.lb-rows p, .lb-seg p, .lb-case > p:not(.lb-figure) { font-size: 16px; line-height: 1.6; }

/* ---------- dopisek pod sekcją: jedna linia + mniejszy odstęp ---------- */
.lb-note { border-top: 1px solid var(--ln); padding-top: 32px; }
.lb-note p:not(.lb-list-title) { font-size: 16px; line-height: 1.6; }
/* wariant bez linii: gdy blok powyżej sam kończy się linią (lista, wiersze) */
.lb-note--plain { border-top: 0; padding-top: 0; }

/* ---------- pas eksperta: zwinięte bio ---------- */
.lb-more summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font: 600 14px/1.43 'Inter', system-ui, sans-serif; color: var(--t-strong); padding: 8px 0; }
.lb-more summary::-webkit-details-marker { display: none; }
.lb-more summary::before { content: "+"; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--t-strong); border-radius: 50%; font: 400 16px/1 'Inter', system-ui, sans-serif; }
.lb-more[open] summary::before { content: "\2212"; }
.lb-more summary:hover { color: var(--t-brand); }
.lb-more-body { margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--ln); font-size: 16px; line-height: 1.6; }

/* ---------- proces: akordeon ---------- */
.lb-acc details { border-bottom: 1px solid var(--ln); }
.lb-acc details:first-child { border-top: 1px solid var(--t-strong); }
.lb-acc summary { display: grid; grid-template-columns: 40px 1fr 24px; column-gap: 8px; align-items: baseline; padding: 20px 0; cursor: pointer; list-style: none; }
.lb-acc summary::-webkit-details-marker { display: none; }
.lb-acc summary::after { content: "+"; font: 400 24px/1 'Inter', system-ui, sans-serif; color: var(--t-brand); text-align: right; }
.lb-acc details[open] summary::after { content: "\2212"; }
.lb-acc summary:hover .lb-h3 { color: var(--t-brand); }
.lb-acc-body { padding: 0 32px 24px 48px; font-size: 16px; line-height: 1.6; }
.lb-acc-body p + p { margin-top: 12px; }

/* ---------- case studies: liczba nad opisem ---------- */
.lb-figure { font: 600 clamp(44px, 5vw, 60px)/1 'Outfit', 'Inter', system-ui, sans-serif; letter-spacing: -.03em; color: var(--t-strong); font-variant-numeric: tabular-nums; }
.lb-figure small { display: block; margin-top: 8px; font: 500 14px/1.4 'Inter', system-ui, sans-serif; letter-spacing: 0; color: var(--t-muted); }

/* ---------- telefon ---------- */
@media (max-width: 639px) {
  .lb-acc summary { grid-template-columns: 32px 1fr 20px; }
  .lb-acc-body { padding: 0 0 20px 40px; }
}

/* ---------- odstępy między sekcjami (2026-10-04): mniejsze, jasne pasy ciaśniej niż ciemne ----------
   Nadpisuje py-16 / sm:py-[72px] / lg:py-28 z HTML (.lb > section ma wyższą specyficzność niż utility). */
.lb > section:not(.lb-hero) { padding-top: 48px; padding-bottom: 48px; }
.lb > section.lb-dark { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 640px) {
  .lb > section:not(.lb-hero) { padding-top: 56px; padding-bottom: 56px; }
  .lb > section.lb-dark { padding-top: 64px; padding-bottom: 64px; }
}
@media (min-width: 1024px) {
  .lb > section:not(.lb-hero) { padding-top: 72px; padding-bottom: 72px; }
  .lb > section.lb-dark { padding-top: 88px; padding-bottom: 88px; }
}

/* ---------- pas eksperta: ikona +/− rysowana w CSS (znak z fontu nie był wyśrodkowany w kółku
   i przy rozwijaniu podmieniał się na glif o innej szerokości) ---------- */
.lb-more summary::before {
  content: ""; display: block; flex: none; box-sizing: border-box; width: 24px; height: 24px;
  border: 1px solid var(--t-strong); border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat;
}
.lb-more[open] summary::before { content: ""; background-size: 10px 2px, 0 0; }

/* ---------- przycisk obrysowy w wierszu etykiety (rekomendacje, przykłady):
   na telefonie wiersz jest kolumną flex, bez tego przycisk rozciągałby się na całą szerokość.
   Rozmiar jak pozostałe przyciski (konwencja serwisu: 40 px, px-8, 14 px/600, obrys 2 px). ---------- */
@media (max-width: 639px) {
  .lb-btn--fit { align-self: flex-start; }
  .lb-btn { padding: 0 20px; } /* najdłuższe etykiety (ok. 280 px tekstu) mieszczą się od 360 px szerokości */
}

/* ---------- przycisk wysyłki formularza: rozmiar jak pozostałe przyciski (40 px, 14 px/600) ---------- */

/* ---------- reCAPTCHA: ukryty znaczek, jak na stronie głównej (index-inline.css).
   Wymagana informacja o reCAPTCHA jest w tekście pod formularzem. Badge leży poza .lb (dokleja go Google do body). ---------- */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* ---------- przyciski: wysokość jak w reszcie serwisu (nagłówek, index: py-2.5 + text-sm = 40 px) ----------
   Było 48 px. Warianty zostają: --fit 32 px, wysyłka formularza 48 px. */
.lb-btn { min-height: 40px; }

/* ---------- H2: druga linia po strzałce w przygaszonym kolorze marki (wino), ta sama rodzina co strzałka ----------
   Kontrast: ~6.5:1 na białym i szarym, ~7:1 na granacie. */
.lb-h2 > span { color: #b3203f; }
.lb-dark .lb-h2 > span { color: #ff8fa3; }

/* ---------- pływający awatar (global-inline.css) schowany przy sekcji kontaktu ----------
   Klasę is-near-form ustawia skrypt w oferta/link-building.php. Ten plik ładuje się po global-inline.css,
   więc przy tej samej specyficzności wygrywa z .site-cta.is-visible .site-cta-avatar. */
.site-cta.is-near-form .site-cta-avatar { opacity: 0; pointer-events: none; transform: scale(.85) translateY(8px); }

/* ---------- przycisk pod blokiem (rekomendacje, przykłady): na dole, do prawej ---------- */
.lb-btn-row { display: flex; justify-content: flex-end; margin-top: 32px; }
/* Wariant z CTA do formularza (pod przykładami): CTA po lewej, link do poradnika po prawej; na telefonie jedno pod drugim. */
.lb-btn-row--split { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }

/* ---------- zdjęcie w pasie „Kto odpowiada za kampanię” ----------
   Telefon: kadr 96x120 obok imienia i przycisku; od 640px zdjęcie nad podpisem (160px, desktop 200px). */
.lb-author { display: flex; align-items: center; gap: 20px; }
.lb-portrait { display: block; width: 96px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; outline: 1px solid rgba(255,255,255,.08); outline-offset: -1px; }
.lb-author-meta > p { margin-top: 0; }
.lb-author-meta > .lb-btn { margin-top: 12px; }
/* Długa etykieta („Zobacz moje doświadczenie w praktyce”) nie mieści się w kolumnie 240px ani obok kadru na telefonie: łamie się zamiast wchodzić na sąsiednią kolumnę */
.lb-author-meta > .lb-btn { white-space: normal; text-align: center; max-width: 100%; padding: 8px 20px; }
@media (min-width: 640px) {
  .lb-author { display: block; }
  .lb-portrait { width: 160px; }
  .lb-author-meta > p { margin-top: 16px; }
  .lb-author-meta > .lb-btn { margin-top: 24px; }
}
/* margin-top 11px = odstęp od góry linii cytatu (30px/42px, Outfit) do góry wersalików: zdjęcie startuje równo z tekstem */
@media (min-width: 1024px) { .lb-portrait { width: 200px; margin-top: 11px; } }

/* ---------- boks „Szybkie pytanie” przy FAQ: link LinkedIn z ikoną (ikona jak .author-socials na blogu) ---------- */
.lb-ask-social { display: inline-flex; align-items: center; gap: 10px; }
.lb-ask-social svg { flex: none; width: 20px; height: 20px; color: #0a66c2; }

/* ==========================================================================
   v3 (2026-10-05): spójność i rytm. DOPISAĆ NA KOŃCU oferta-link-building-inline.css.
   ========================================================================== */

/* ---------- H2: druga linia po strzałce w kolorze wina (decyzja Przemka), waga 400 ----------
   Kontrast: ok. 6.5:1 na białym i szarym, ok. 7:1 na granacie. */
.lb-h2 > span { color: #b3203f; }
.lb-dark .lb-h2 > span { color: #ff8fa3; }

/* ---------- Diagnoza: dopisek jako jedno duże zdanie na całą szerokość ---------- */
.lb-statement { border-top: 1px solid var(--t-strong); padding-top: 32px; }
.lb-statement > .lb-h3 { font: 500 clamp(24px, 2.7vw, 34px)/1.22 'Outfit', 'Inter', system-ui, sans-serif; letter-spacing: -.02em; max-width: 22ch; text-wrap: balance; }
.lb-statement p { font-size: 16px; line-height: 1.6; }

/* ---------- Zakres: notki pod listami w jednej linii (desktop), DOM bez zmian ---------- */
@media (min-width: 1024px) {
  .lb-cols-rows { row-gap: 0; }
  .lb-cols-rows > div { display: contents; }
  .lb-cols-rows > div:first-child > * { grid-column: 1; }
  .lb-cols-rows > div:last-child > * { grid-column: 2; }
  .lb-cols-rows > div > :nth-child(1) { grid-row: 1; }
  .lb-cols-rows > div > :nth-child(2) { grid-row: 2; align-self: start; }
  .lb-cols-rows > div > :nth-child(3) { grid-row: 3; }
}

/* ---------- Źródła: obserwacje jako panel z liczbami ---------- */
.lb-panel { background: var(--lb-alt); border-radius: 12px; padding: 24px 20px; --ln: #d5dae3; --t-muted: #4b5563; }
.lb-panel p:not(.lb-figure) { font-size: 16px; line-height: 1.6; }
.lb-alt .lb-panel { background: var(--lb-surface); } /* panel w szarej sekcji: białe tło (np. „Linkowanie nie działa w oderwaniu…” w 05) */
.lb-data { display: grid; gap: 24px; margin-top: 24px; }
.lb-data > div { border-top: 1px solid var(--t-strong); padding-top: 16px; }
.lb-data .lb-figure small { max-width: 30ch; }
@media (min-width: 640px) { .lb-panel { padding: 40px; } .lb-data { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (min-width: 1024px) { .lb-panel { padding: 48px; } }
.lb-data .lb-figure { white-space: nowrap; font-size: clamp(34px, 3.4vw, 44px); }
.lb-data .lb-figure small { white-space: normal; }
.lb-panel p.lb-data-note { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ln); font-size: 13px; line-height: 1.5; color: var(--t-muted); }
.lb-fn { font-weight: 700; color: var(--lb-primary-text); }
.lb-figure .lb-fn { font-size: .5em; vertical-align: super; line-height: 0; margin-left: 2px; }
.lb-rec-role { margin-top: 12px; font: 500 13px/1.4 'Inter', system-ui, sans-serif; letter-spacing: .02em; color: var(--t-muted); }

/* ---------- hero na telefonie: ilustracja ukryta (przy 104 px detale się zlewają), etykieta bez rezerwy miejsca ---------- */
@media (max-width: 639px) {
  .lb-hero-mark { display: none; }
  .lb-hero-eyebrow { min-height: 0; display: block; padding-right: 0; }
}

/* ---------- 01 korzyści: lista 3 korzyści (lewa) + karta AI z logotypami (prawa) ---------- */
.lb-gain { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1024px) { .lb-gain { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: stretch; } }
.lb-gain-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid #d5dae3; color: hsl(var(--primary)); }
.lb-gain-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; padding: 20px 0; border-top: 1px solid var(--ln); }
.lb-gain-list li:first-child { border-top-color: var(--t-strong); }
.lb-gain-list li:last-child { border-bottom: 1px solid var(--ln); }
.lb-gain-list p { margin-top: 2px; font-size: 16px; line-height: 1.5; color: var(--t-body); }
.lb-gain-ai { display: flex; flex-direction: column; padding: 24px 20px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px -12px rgba(17, 24, 39, .12); }
@media (min-width: 640px) { .lb-gain-ai { padding: 28px; } }
.lb-gain-ai .lb-gain-ico { background: hsl(350 80% 60% / .08); border-color: transparent; }
.lb-gain-ai h3 { margin-top: 16px; }
.lb-gain-ai > p { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--t-body); }
@media (min-width: 1024px) { .lb-gain-list { display: grid; grid-auto-rows: 1fr; } }
/* logotypy: równa siatka 4×2 (bez osieroconych pigułek), kafel = logo + nazwa */
.lb-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: auto; padding-top: 20px; }
.lb-chips li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 10px; background: var(--lb-alt); font: 600 12px/16px 'Inter', system-ui, sans-serif; color: var(--t-strong); text-align: center; }
.lb-chips img { flex: none; width: 22px; height: 22px; }