/* ============================================================
   Devive - bf26.css
   Tylko /bf26/ (plan Black Friday). Przeniesione z <style> starej strony.
   Wlasne tokeny --bfx-*, zeby strona nie zalezala od nazw z base.css.
   ============================================================ */
/* Strona /bf26/ ma wlasne tokeny, bo zyje w dwoch skorach serwisu:
       starej (demo.devive.pl) i nowej (devive.pl). Nie dziedziczy wiec
       nazw zmiennych z zadnej z nich. */
    .bf-page {
        --bfx-blue: #F65016; --bfx-tx: #B5360A; --bfx-blue-deep: #C4231A; --bfx-blue-soft: #FFF1EB;
        --bfx-ink: #252019; --bfx-ink-soft: #2F2A22;
        --bfx-paper: #F7F7F4; --bfx-warm: #EEEDE6; --bfx-white: #FFFFFF;
        --bfx-tx: #252019; --bfx-mut: #5E584E; --bfx-line: rgba(23,23,23,0.10);
        --bfx-line-ink: rgba(255,255,255,0.14); --bfx-on-ink: #F8FAFC;
        --bfx-on-ink-mut: rgba(255,255,255,0.66);
        --bfx-ok: #047857; --bfx-warn: #B45309; --bfx-bad: #C1121F;
        --bfx-head: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
        --bfx-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
        --bfx-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-family: var(--bfx-body);
    }
    .bf-page .mono { font-family: var(--bfx-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
    .bf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .bf-page .container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
    .bf-page .section { padding: 64px 0; }
    .bf-page .bg-soft { background: var(--bfx-warm); }
    .bf-page .bg-white { background: var(--bfx-white); }

    /* HERO */
    .bf-crumb { display: flex; gap: 8px; font-size: 13px; color: var(--bfx-on-ink-mut); margin-bottom: 26px; }
    .bf-crumb a { color: var(--bfx-on-ink-mut); text-decoration: none; }
    .bf-crumb a:hover { color: #fff; }
    .bf-badge { display: inline-block; padding: 7px 15px; border: 1px solid rgba(255,255,255,0.22);
        border-radius: 999px; font-size: 13px; font-weight: 500; color: #BFDBFE; letter-spacing: 0.02em; }
    .bf-hero h1 { font-family: var(--bfx-head); font-weight: 500; font-size: 38px; line-height: 1.08;
        letter-spacing: -0.03em; color: #fff; margin: 22px 0 18px; }
    .bf-hero-lead { font-size: 17px; line-height: 1.6; color: var(--bfx-on-ink-mut); max-width: 44em; }
    .bf-countdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 32px 0 30px;
        max-width: 620px; }
    .bf-cd-item { border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid var(--bfx-line-ink);
        padding: 16px 14px; display: flex; flex-direction: column; gap: 4px; }
    .bf-cd-item b { font-size: 28px; line-height: 1; color: #fff; letter-spacing: -0.02em; }
    .bf-cd-item span { font-size: 12px; color: var(--bfx-on-ink-mut); line-height: 1.35; }
    .bf-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

    /* PASEK STEROWANIA */
    .bf-bar { position: sticky; top: var(--nav-h-s); z-index: 40; background: rgba(11,17,32,0.97);
        border-bottom: 1px solid var(--bfx-line-ink); }
    .bf-bar-inner { max-width: 1180px; margin: 0 auto; padding: 11px 20px; display: flex;
        flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
    .bf-bar-progress { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; min-width: 0; }
    .bf-bar-track { flex: 1 1 auto; height: 6px; background: rgba(255,255,255,0.14); overflow: hidden; }
    .bf-bar-fill { display: block; height: 100%; width: 0; background: var(--bfx-blue); transition: width 0.3s ease; }
    .bf-bar-count { font-size: 12px; color: var(--bfx-on-ink-mut); white-space: nowrap; font-weight: 500; }
    .bf-bar-count b { color: #fff; }
    .bf-bar-tools { display: flex; gap: 8px; flex-wrap: wrap; }
    .bf-tool { background: rgba(255,255,255,0.08); border: 1px solid var(--bfx-line-ink); color: #fff;
        font-family: var(--bfx-body); font-size: 12px; font-weight: 500; padding: 7px 13px; cursor: pointer;
        transition: 0.2s ease; }
    .bf-tool:hover { background: rgba(255,255,255,0.16); }
    .bf-tool[aria-pressed="true"] { background: var(--bfx-blue); border-color: var(--bfx-blue); }
    .bf-tool--warn:hover { background: var(--bfx-bad); border-color: var(--bfx-bad); }

    /* SCIEZKI */
    .bf-track-btns { display: grid; grid-template-columns: 1fr; gap: 12px; }
    .bf-track { text-align: left; background: var(--bfx-white); border: 1px solid var(--bfx-line);
        padding: 18px 20px; cursor: pointer; font-family: var(--bfx-body); transition: 0.2s ease;
        display: flex; flex-direction: column; gap: 5px; }
    .bf-track:hover { border-color: var(--bfx-blue); }
    .bf-track b { font-family: var(--bfx-head); font-size: 17px; font-weight: 500; color: var(--bfx-tx); }
    .bf-track span { font-size: 13px; color: var(--bfx-mut); line-height: 1.45; }
    .bf-track[aria-pressed="true"] { background: var(--bfx-ink); border-color: var(--bfx-ink); }
    .bf-track[aria-pressed="true"] b { color: #fff; }
    .bf-track[aria-pressed="true"] span { color: var(--bfx-on-ink-mut); }

    /* NAGLOWKI SEKCJI */
    .bf-sec-head { max-width: 46em; margin-bottom: 32px; }
    .bf-eyebrow { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
        text-transform: uppercase; color: var(--bfx-tx); margin-bottom: 12px; }
    .bf-eyebrow--ink { color: #93C5FD; }
    .bf-sec-head h2, .bf-phase-title { font-family: var(--bfx-head); font-weight: 500; font-size: 30px;
        line-height: 1.15; letter-spacing: -0.025em; color: var(--bfx-tx); margin: 0 0 14px; }
    .bf-sec-head--ink h2 { color: #fff; }
    .bf-sec-head p { font-size: 16px; line-height: 1.6; color: var(--bfx-mut); }
    .bf-sec-head--ink p { color: var(--bfx-on-ink-mut); }
    .bf-sec-head a, .bf-task-why a, .bf-src a { color: var(--bfx-tx); font-weight: 500; }
    .bf-sec-head--ink a { color: #93C5FD; }
    .bf-sub { font-family: var(--bfx-head); font-weight: 500; font-size: 22px; letter-spacing: -0.02em;
        color: var(--bfx-tx); margin: 40px 0 16px; }
    .bf-src { font-size: 13px; color: var(--bfx-mut); margin-top: 16px; line-height: 1.5; }

    /* FAZY */
    .bf-phase { padding: 64px 0; border-top: 1px solid var(--bfx-line); background: var(--bfx-paper); }
    .bf-phase:nth-of-type(even) { background: var(--bfx-white); }
    .bf-phase-head { max-width: 50em; margin-bottom: 26px; }
    .bf-phase-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
    .bf-phase-nr { font-size: 12px; letter-spacing: 0.06em; color: #fff; background: var(--bfx-tx);
        padding: 5px 11px; }
    .bf-phase-when { font-size: 13px; font-weight: 500; color: var(--bfx-tx); }
    .bf-phase-tag { font-size: 12px; color: var(--bfx-mut); border: 1px solid var(--bfx-line); padding: 4px 10px; }
    .bf-phase-lead { font-size: 16px; line-height: 1.6; color: var(--bfx-mut); }

    /* MIERNIK */
    .bf-meter { display: flex; align-items: center; gap: 12px; margin-top: 18px; max-width: 420px; }
    .bf-meter-track { flex: 1 1 auto; height: 6px; background: rgba(23,23,23,0.10); overflow: hidden; }
    .bf-meter--ink .bf-meter-track { background: rgba(255,255,255,0.16); }
    .bf-meter-fill { display: block; height: 100%; width: 0; background: var(--bfx-blue); transition: width 0.3s ease; }
    .bf-meter-count { font-size: 12px; color: var(--bfx-mut); white-space: nowrap; font-weight: 500; }
    .bf-meter--ink .bf-meter-count { color: var(--bfx-on-ink-mut); }

    /* ZADANIA */
    .bf-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px;
        background: var(--bfx-line); border: 1px solid var(--bfx-line); }
    .bf-tasks--ink { background: var(--bfx-line-ink); border-color: var(--bfx-line-ink); }
    .bf-task { background: var(--bfx-white); }
    .bf-tasks--ink .bf-task { background: var(--bfx-ink-soft); }
    .bf-task.is-hidden { display: none; }
    .bf-ck { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; cursor: pointer; }
    .bf-ck:hover { background: var(--bfx-blue-soft); }
    .bf-tasks--ink .bf-ck:hover { background: rgba(255,255,255,0.06); }
    .bf-box { position: absolute; opacity: 0; width: 1px; height: 1px; }
    .bf-tick { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; border: 2px solid rgba(23,23,23,0.22);
        background: #fff; position: relative; transition: 0.15s ease; }
    .bf-tasks--ink .bf-tick { border-color: rgba(255,255,255,0.32); background: transparent; }
    .bf-tick::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
        border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: 0.15s ease; }
    .bf-box:checked + .bf-tick { background: var(--bfx-blue); border-color: var(--bfx-blue); }
    .bf-box:checked + .bf-tick::after { transform: rotate(45deg) scale(1); }
    .bf-box:focus-visible + .bf-tick { outline: 3px solid var(--bfx-blue); outline-offset: 2px; }
    .bf-task-text { display: flex; flex-direction: column; gap: 5px; }
    .bf-task-title { font-family: var(--bfx-head); font-size: 16px; font-weight: 500; color: var(--bfx-tx);
        line-height: 1.35; }
    .bf-tasks--ink .bf-task-title { color: #fff; }
    .bf-task-why { font-size: 14px; line-height: 1.55; color: var(--bfx-mut); }
    .bf-tasks--ink .bf-task-why { color: var(--bfx-on-ink-mut); }
    .bf-box:checked ~ .bf-task-text .bf-task-title { text-decoration: line-through; opacity: 0.55; }
    .bf-box:checked ~ .bf-task-text .bf-task-why { opacity: 0.5; }

    /* NOTATKI */
    .bf-notes { margin-top: 18px; }
    .bf-notes-label { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
        text-transform: uppercase; color: var(--bfx-mut); margin-bottom: 8px; }
    .bf-notes-field { width: 100%; font-family: var(--bfx-body); font-size: 15px; line-height: 1.5;
        padding: 12px 14px; border: 1px solid var(--bfx-line); background: var(--bfx-white);
        color: var(--bfx-tx); resize: vertical; }
    .bf-notes-field:focus { outline: 2px solid var(--bfx-blue); outline-offset: 1px; }

    /* TABELE */
    .bf-table-wrap { overflow-x: auto; border: 1px solid var(--bfx-line); background: var(--bfx-white); }
    .bf-cal, .bf-tab { width: 100%; border-collapse: collapse; min-width: 760px; }
    .bf-cal th, .bf-tab th { text-align: left; font-family: var(--bfx-head); font-size: 13px; font-weight: 600;
        color: var(--bfx-tx); padding: 13px 14px; border-bottom: 2px solid var(--bfx-line);
        background: var(--bfx-warm); white-space: nowrap; }
    .bf-cal td, .bf-tab td { padding: 13px 14px; border-bottom: 1px solid var(--bfx-line); font-size: 14px;
        line-height: 1.5; color: var(--bfx-mut); vertical-align: top; }
    .bf-tab td b { color: var(--bfx-tx); }
    .bf-cal-check { width: 44px; }
    .bf-ck--bare { padding: 0; gap: 0; }
    .bf-ck--bare:hover { background: transparent; }
    .bf-cal-date { white-space: nowrap; }
    .bf-cal-date b { display: block; font-size: 14px; color: var(--bfx-tx); }
    .bf-cal-date span { font-size: 12px; color: var(--bfx-mut); }
    .bf-cal-who { font-weight: 500; color: var(--bfx-tx); min-width: 180px; }
    .bf-pill { display: inline-block; font-size: 12px; font-weight: 500; padding: 4px 10px;
        background: var(--bfx-blue-soft); color: var(--bfx-blue-deep); white-space: nowrap; }
    .bf-cal-row.is-key { background: #FBFCFF; }
    .bf-cal-row.is-key .bf-cal-date b { color: var(--bfx-tx); }
    .bf-cal-row.is-bf { background: var(--bfx-blue-soft); }
    .bf-cal-row.is-bf .bf-cal-date b { color: var(--bfx-blue-deep); }
    .bf-cal-row.is-quiet { background: var(--bfx-warm); }
    .bf-cal-row.is-quiet .bf-pill { background: rgba(23,23,23,0.07); color: var(--bfx-mut); }
    .bf-cal-row .bf-box:checked ~ .bf-tick { background: var(--bfx-ok); border-color: var(--bfx-ok); }
    .bf-flag { display: inline-block; font-size: 13px; font-weight: 500; white-space: nowrap; }
    .bf-flag--ok { color: var(--bfx-ok); }
    .bf-flag--warn { color: var(--bfx-warn); }
    .bf-flag--bad { color: var(--bfx-bad); }

    /* KARTY */
    .bf-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
    .bf-card { background: var(--bfx-white); border: 1px solid var(--bfx-line); padding: 24px 22px;
        display: flex; flex-direction: column; gap: 10px; }
    .bf-card-num { font-size: 13px; color: var(--bfx-tx); letter-spacing: 0.06em; }
    .bf-card-tag { font-size: 12px; font-weight: 500; color: var(--bfx-tx); letter-spacing: 0.04em; }
    .bf-card h3 { font-family: var(--bfx-head); font-size: 18px; font-weight: 500; letter-spacing: -0.015em;
        color: var(--bfx-tx); margin: 0; }
    .bf-card p { font-size: 14px; line-height: 1.6; color: var(--bfx-mut); margin: 0; }

    /* CALLOUT */
    .bf-callout { margin-top: 22px; padding: 22px 24px; border-radius: 10px;
        background: var(--bfx-blue-soft); }
    .bf-callout--bad { background: #FDF0EA; }
    .bf-callout h3 { font-family: var(--bfx-head); font-size: 18px; font-weight: 500; color: var(--bfx-tx);
        margin: 0 0 8px; }
    .bf-callout p { font-size: 14px; line-height: 1.6; color: var(--bfx-mut); margin: 0; }

    /* OD ZERA */
    .bf-zero { background: var(--bfx-ink); }

    /* BLEDY */
    .bf-errs { display: flex; flex-direction: column; gap: 1px; background: var(--bfx-line);
        border: 1px solid var(--bfx-line); }
    .bf-err { background: var(--bfx-white); padding: 22px 22px; display: flex; gap: 16px; align-items: flex-start; }
    .bf-err-num { flex: 0 0 auto; font-size: 13px; color: #fff; background: var(--bfx-ink); padding: 5px 9px; }
    .bf-err h3 { font-family: var(--bfx-head); font-size: 17px; font-weight: 500; color: var(--bfx-tx);
        margin: 0 0 7px; line-height: 1.3; }
    .bf-err p { font-size: 14px; line-height: 1.6; color: var(--bfx-mut); margin: 0; }

    /* FAQ */
    .bf-faq { display: flex; flex-direction: column; gap: 10px; }
    .bf-faq-item { border: 1px solid var(--bfx-line); background: var(--bfx-white); }
    .bf-faq-q { list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; position: relative;
        font-family: var(--bfx-head); font-size: 16px; font-weight: 500; color: var(--bfx-tx); line-height: 1.4; }
    .bf-faq-q::-webkit-details-marker { display: none; }
    .bf-faq-q::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px;
        border-right: 2px solid var(--bfx-blue); border-bottom: 2px solid var(--bfx-blue);
        transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease; }
    .bf-faq-item[open] .bf-faq-q::after { transform: translateY(-30%) rotate(225deg); }
    .bf-faq-q:hover { color: var(--bfx-blue); }
    .bf-faq-a { padding: 0 20px 20px; }
    .bf-faq-a p { font-size: 15px; line-height: 1.65; color: var(--bfx-mut); margin: 0; }

    /* CTA */
    .bf-page .cta-card { background: var(--bfx-ink); padding: 40px 28px; display: flex; flex-direction: column;
        align-items: flex-start; gap: 16px; }
    .bf-page .cta-label { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
        color: #93C5FD; }
    .bf-page .cta-card h2 { font-family: var(--bfx-head); font-weight: 500; font-size: 28px; line-height: 1.15;
        letter-spacing: -0.025em; color: #fff; margin: 0; max-width: 16em; }
    .bf-page .cta-card p { font-size: 16px; line-height: 1.6; color: var(--bfx-on-ink-mut); margin: 0; max-width: 40em; }
    .bf-page .cta-note { font-size: 13px; }

    /* DRUK */
    @media print {
        .bf-bar, .bf-hero-cta, .bf-track-btns, .site-header, .site-footer, .footer, .header { display: none; }
        .bf-page .section, .bf-phase { padding: 18px 0; }
        .bf-hero { background: #fff; color: #000; }
        .bf-hero h1, .bf-sec-head--ink h2 { color: #000; }
        .bf-zero, .bf-tasks--ink .bf-task { background: #fff; }
        .bf-tasks--ink .bf-task-title { color: #000; }
        .bf-tasks--ink .bf-task-why, .bf-hero-lead, .bf-sec-head--ink p { color: #333; }
        .bf-table-wrap { overflow: visible; }
    }

    @media (min-width: 700px) {
        .bf-page .container { padding: 0 32px; }
        .bf-hero h1 { font-size: 52px; }
        .bf-sec-head h2, .bf-phase-title { font-size: 38px; }
        .bf-cards { grid-template-columns: repeat(2, 1fr); }
        .bf-track-btns { grid-template-columns: repeat(2, 1fr); }
        .bf-page .cta-card { padding: 52px 44px; }
        .bf-page .cta-card h2 { font-size: 34px; }
    }
    @media (min-width: 1024px) {
        .bf-hero { padding: 72px 0 84px; }
        .bf-hero h1 { font-size: 62px; }
        .bf-page .section, .bf-phase { padding: 88px 0; }
        .bf-cards { grid-template-columns: repeat(3, 1fr); }
        .bf-track-btns { grid-template-columns: repeat(4, 1fr); }
        .bf-ck { padding: 18px 22px; }
    }

/* v3: odliczanie i przyciski siedza teraz we wspolnym .hero (partials/ui.php) */
.hero .bf-countdown{margin:32px 0 28px}
.hero .bf-hero-cta{margin-top:4px}

/* Skorka mailforge (26.09.2026): promien 6 px, bez pogrubien. */
.bf-page [class*="bf-"]{border-radius:6px}
.bf-page .bf-tick,.bf-page .bf-bar,.bf-page .bf-bar-fill,.bf-page .bf-meter,.bf-page .bf-meter-fill{border-radius:3px}
/* Hero BF26 stoi teraz na jasnym tle: liczniki jako ciemne karty */
.bf-countdown{display:grid;grid-template-columns:repeat(3,minmax(0,200px));gap:10px;margin-bottom:24px}
.bf-cd-item{background:var(--bfx-ink);border:0;border-radius:6px;padding:20px}
.bf-cd-item b{color:#fff;font-weight:400;font-size:32px}
.bf-cd-item span{color:#C4C4C4}
.bf-bar{top:0;background:rgba(28,28,28,.97)}
@media (max-width:809px){.bf-countdown{grid-template-columns:1fr 1fr 1fr}.bf-cd-item{padding:14px}.bf-cd-item b{font-size:22px}}

/* Spojnosc z home (27.09.2026). Musi stac tu, bo bf26.css laduje sie po content.css.
   Etykieta sekcji jak .eyebrow, hero na jasnym tle strony, wiec licznik w ciemnym tekscie. */
.bf-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;line-height:1.5;font-weight:400;letter-spacing:0;text-transform:none;color:var(--tx-2)}
.bf-eyebrow::before{content:"";flex:0 0 auto;width:25px;height:16px;background:linear-gradient(var(--orange),var(--orange)) 0 0/7px 7px no-repeat,linear-gradient(var(--orange-3),var(--orange-3)) 9px 9px/7px 7px no-repeat,linear-gradient(var(--orange),var(--orange)) 18px 0/7px 7px no-repeat}
.bf-cd-item{background:var(--card);border:0;border-radius:var(--r)}
.bf-cd-item b{color:var(--ink)}
.bf-cd-item span{color:var(--tx-2)}
.bf-phase-tag{border-radius:var(--r)}

.bf-eyebrow--ink{color:var(--on-ink-2)}