/* T14 uses the accepted landing surface: full-width dark canvas, pill header,
   generous hero and application cards. The shared blog stylesheet still owns
   the brand tokens, typeface, buttons and card primitives. */

body.bofu-landing-page{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  overflow-x:hidden;
}
.bofu-landing-page .tlo-film{
  position:fixed;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
}
.bofu-landing-page .tlo-zaslona{
  position:fixed;
  inset:0;
  z-index:-1;
  background:radial-gradient(120% 90% at 50% 0%,rgba(21,21,21,.55) 0%,rgba(21,21,21,.88) 60%,var(--tlo) 100%);
}
html.light .bofu-landing-page .tlo-film{display:none}
html.light .bofu-landing-page .tlo-zaslona{
  background:radial-gradient(120% 80% at 50% 0%,rgba(134,255,29,.06) 0%,rgba(255,255,255,0) 55%),var(--tlo);
}
@media(prefers-reduced-motion:reduce){.bofu-landing-page .tlo-film{display:none}}

.bofu-post{
  width:min(100%,1440px);
  margin:0 auto;
  padding:0 clamp(20px,5vw,72px);
}
.bofu-post .hero{
  max-width:1000px;
  padding:clamp(64px,9vh,112px) 0 0;
}
.bofu-post .hero h1{
  max-width:15ch;
  font-size:clamp(40px,5.4vw,76px);
  line-height:1.02;
}
.bofu-post .lede{max-width:62ch;font-size:20px}
.bofu-toc{
  display:grid;
  grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);
  gap:36px;
  align-items:center;
  margin-top:48px;
}
.bofu-toc-heading h2{margin:16px 0 8px;font-size:24px}
.bofu-toc-heading p{margin:0;color:var(--tekst-drugi);font-size:16px;line-height:1.55}
.bofu-toc ol{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 24px;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:page-map;
}
.bofu-toc li{counter-increment:page-map;display:flex;gap:10px;align-items:flex-start;color:var(--tekst-drugi);font-size:15px;line-height:1.4}
.bofu-toc li::before{content:counter(page-map,decimal-leading-zero);flex:none;color:var(--zielen);font-size:12px;font-weight:600;padding-top:2px}
.bofu-toc a{text-decoration:none}
.bofu-toc a:hover{color:var(--zielen)}
.bofu-hero-cta{margin:28px 0 0}
.bofu-hero-cta .karta{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,360px);
  gap:48px;
  align-items:center;
  border-color:color-mix(in srgb,var(--zielen-kafelka) 42%,var(--obrys-karty));
}
.bofu-hero-cta h2{margin:16px 0 10px;font-size:32px;line-height:1.1}
.bofu-hero-cta .opis{max-width:54ch;margin:0;font-size:17px;line-height:1.6}
.bofu-hero-cta .bofu-cta-stack{max-width:360px}
.bofu-post .tresc{max-width:none;margin-top:76px}
.bofu-post .tresc > p:not(.bofu-kicker),
.bofu-post .tresc > h2,
.bofu-post .tresc > .bofu-kicker{max-width:78ch}
.bofu-post .dalej{padding-top:96px}

.bofu-kicker{
  margin:44px 0 10px;
  color:var(--zielen);
  font-size:13px;
  font-weight:600;
  letter-spacing:.03em;
  line-height:1.35;
}
.kluczowe + .bofu-kicker{margin-top:44px}

.bofu-cta-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.bofu-cta-stack{
  display:grid;
  gap:10px;
}
.bofu-cta-row .przycisk{margin:0}

.bofu-table-wrap{
  max-width:none;
  margin:26px 0;
  overflow:visible;
  border:1px solid var(--obrys-karty);
  border-radius:var(--promien-karty);
  background:var(--tlo-karty);
  box-shadow:var(--cien-karty);
}
.tresc table.bofu-comparison{
  display:table;
  width:100%;
  max-width:none;
  min-width:0;
  table-layout:fixed;
  margin:0;
  border:0;
}
.bofu-comparison th,.bofu-comparison td{overflow-wrap:anywhere}
.bofu-comparison caption{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.bofu-comparison .bofu-lumy-cell{
  border-left:1px solid color-mix(in srgb,var(--zielen-kafelka) 42%,transparent);
  background:color-mix(in srgb,var(--zielen-kafelka) 12%,transparent);
  color:var(--tekst);
}
.bofu-comparison thead .bofu-lumy-cell{
  border-left-color:transparent;
  background:var(--zielen);
  color:#151515;
  font-weight:600;
}
.bofu-check{color:var(--zielen);font-weight:600}

.bofu-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.bofu-choice-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.bofu-choice-card p{margin:0}
.bofu-choice-card-lumy{
  border-color:color-mix(in srgb,var(--zielen-kafelka) 58%,var(--obrys-karty));
  background:linear-gradient(color-mix(in srgb,var(--zielen-kafelka) 16%,#282828),#1d1d1d);
}

.bofu-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.bofu-steps .karta,
.bofu-proof-grid .karta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.bofu-steps .kafelek{min-width:34px;justify-content:center}
.bofu-steps h5,
.bofu-proof-grid h5{margin:14px 0 0}
.bofu-steps p,
.bofu-proof-grid p{margin:10px 0 0}

.bofu-proof-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.bofu-proof-pending{
  margin-top:18px;
  padding:16px 18px;
  border:1px dashed var(--tekst-slaby);
  border-radius:var(--promien-karty-form);
  color:var(--tekst-slaby);
  font-size:14px;
}
.bofu-proof-pending span{
  display:block;
  margin-bottom:4px;
  color:var(--tekst-slaby);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
}

.bofu-faq-list{border-top:1px solid var(--obrys-karty)}
.bofu-faq{border-bottom:1px solid var(--obrys-karty)}
.bofu-faq summary{
  padding:20px 0;
  cursor:pointer;
  list-style:none;
  color:var(--tekst);
  font-family:inherit;
  font-size:20px;
  font-weight:600;
  line-height:1.25;
}
.bofu-faq summary::-webkit-details-marker{display:none}
.bofu-faq summary::after{
  float:right;
  color:var(--zielen);
  content:'+';
  font-size:24px;
  font-weight:400;
}
.bofu-faq[open] summary::after{content:'−'}
.bofu-faq p{max-width:64ch;margin:0;padding:0 32px 20px 0}

.bofu-final-cta{margin-top:44px}
.bofu-final-cta .karta{text-align:center}
.bofu-final-cta .bofu-kicker{margin-top:0}
.bofu-final-cta h2{margin:0 0 12px}
.bofu-final-cta .opis{max-width:58ch;margin-right:auto;margin-left:auto}
.bofu-final-cta .bofu-cta-row{justify-content:center}
.bofu-final-cta .zgoda{margin-bottom:0}

.bofu-related-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.bofu-related-grid .karta{transition:border-color .15s ease}
.bofu-related-grid .karta:hover{border-color:color-mix(in srgb,var(--zielen) 45%,transparent)}
.bofu-related-grid h5{margin-top:12px}

@media(max-width:1000px){
  .bofu-proof-grid,
  .bofu-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:900px){
  .bofu-toc,
  .bofu-hero-cta .karta{grid-template-columns:1fr}
  .bofu-hero-cta .bofu-cta-stack{max-width:none}
  .bofu-choice-grid,
  .bofu-steps{grid-template-columns:1fr}
}

@media(max-width:560px){
  .bofu-post .hero{padding-top:48px}
  .bofu-post .hero h1{font-size:clamp(36px,10vw,52px)}
  .bofu-post .lede{font-size:18px}
  .bofu-toc{gap:24px;padding:20px}
  .bofu-toc ol{grid-template-columns:1fr}
  .bofu-hero-cta .karta{padding:20px}
  .bofu-hero-cta h2{font-size:26px}
  .bofu-cta-row{flex-direction:column;align-items:stretch}
  .bofu-cta-row .przycisk{width:100%}
  .bofu-proof-grid,
  .bofu-related-grid{grid-template-columns:1fr}
  .bofu-faq summary{font-size:18px}
}

@media(max-width:720px){
  .bofu-table-wrap{
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .tresc table.bofu-comparison{display:block}
  .bofu-comparison thead{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .bofu-comparison tbody{display:grid;gap:12px}
  .bofu-comparison tr{
    display:block;
    padding:16px;
    border:1px solid var(--obrys-karty);
    border-radius:var(--promien-karty);
    background:var(--tlo-karty);
    box-shadow:var(--cien-karty);
  }
  .bofu-comparison th[scope="row"]{
    display:block;
    padding:0 0 8px;
    border:0;
    font-size:16px;
  }
  .bofu-comparison td{
    display:grid;
    grid-template-columns:minmax(92px,.42fr) minmax(0,1fr);
    gap:12px;
    padding:10px 0 0;
    border:0;
    border-top:1px solid var(--obrys-karty);
    font-size:14px;
    line-height:1.5;
  }
  .bofu-comparison td::before{color:var(--tekst-slaby);font-size:12px;font-weight:600}
  .bofu-comparison td:nth-of-type(1)::before{content:"ChatGPT / Claude"}
  .bofu-comparison td:nth-of-type(2)::before{content:"Claude Code"}
  .bofu-comparison td:nth-of-type(3)::before{content:"Lumy"}
  .bofu-comparison .bofu-lumy-cell{border-left:0;background:transparent}
  .bofu-comparison td.bofu-lumy-cell{color:var(--tekst)}
}