/* Podstrony wanat.dev (branże, Brodnica, 404). Na tokenach z v3.css, uzupełnia blog/blog.css. */

/* nagłówek podstrony */
.lp-hero{max-width:720px;margin:0 auto}
.lp-hero .b-title{font-size:clamp(34px,5.4vw,60px)}
.lp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.lp-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:34px 0 0;background:var(--line-2);border:1px solid var(--line-2);border-radius:16px;overflow:hidden}
.lp-facts div{background:var(--bg);padding:16px 18px}
.lp-facts dt{font:500 11.5px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.lp-facts dd{font:600 17px/1.3 var(--display);letter-spacing:-.01em;margin-top:7px;color:var(--fg)}
@media (max-width:640px){.lp-facts{grid-template-columns:1fr}}

/* zrzut dema: ramka przeglądarki + telefon */
.lp-shot{position:relative;max-width:1000px;margin:52px auto 64px;padding-right:clamp(0px,6vw,64px)}
.lp-frame{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--bg-2);box-shadow:0 34px 70px -46px rgba(0,0,0,.5)}
.lp-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--bg)}
.lp-bar i{width:9px;height:9px;border-radius:50%;background:var(--bg-3)}
.lp-bar span{margin-left:10px;font:400 12px/1 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-frame img{display:block;width:100%;height:auto;aspect-ratio:1200/750}
.lp-phone{position:absolute;right:0;bottom:-34px;width:clamp(96px,20%,190px);border:5px solid #0a0a0a;border-radius:24px;overflow:hidden;background:#0a0a0a;box-shadow:0 24px 50px -24px rgba(0,0,0,.55)}
.lp-phone img{display:block;width:100%;height:auto;aspect-ratio:390/844}
.lp-shot figcaption{max-width:640px;margin-top:22px;font-size:14.5px;color:var(--muted);text-wrap:pretty}
@media (max-width:900px){.lp-shot:has(.lp-phone) figcaption{padding-right:calc(clamp(96px,20%,190px) + 16px)}}
.lp-shot figcaption a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--dim);text-underline-offset:3px}
@media (max-width:640px){.lp-phone{bottom:-22px;border-width:4px;border-radius:16px}}

/* karty z konkretami (2 kolumny) */
.lp-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.lp-card{border:1px solid var(--line-2);border-radius:16px;padding:20px 22px;background:var(--bg)}
.b-body .lp-card h3{margin:0 0 8px}
.b-body .lp-card p{font-size:15.5px;color:var(--soft)}
@media (max-width:640px){.lp-cards{grid-template-columns:1fr}}

/* cennik */
.lp-prices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.lp-plan{border:1px solid var(--line-2);border-radius:18px;padding:22px 24px}
.lp-plan.is-focus{background:var(--inv-bg);color:var(--inv-fg);border-color:var(--inv-bg)}
.lp-plan-name{font:500 12px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.lp-plan.is-focus .lp-plan-name{color:var(--dim)}
.b-body .lp-plan-price{font:650 34px/1.1 var(--display);letter-spacing:-.03em;margin-top:10px;color:inherit}
.lp-plan-price span{font:400 15px/1 var(--body);color:var(--muted)}
.b-body .lp-plan ul{list-style:none;margin:16px 0 0;gap:8px}
.b-body .lp-plan li{font-size:15px;padding-left:20px;position:relative}
.b-body .lp-plan.is-focus li{color:#e5e5e5}
.lp-plan li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:currentColor;opacity:.6}
@media (max-width:640px){.lp-prices{grid-template-columns:1fr}}

/* FAQ */
.lp-faq{margin-top:12px;border-top:1px solid var(--line)}
.lp-faq details{border-bottom:1px solid var(--line)}
.lp-faq summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;font:600 18px/1.35 var(--display);letter-spacing:-.015em}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";position:absolute;right:4px;top:15px;font:400 22px/1 var(--mono);color:var(--muted);transition:transform .2s var(--ease)}
.lp-faq details[open] summary::after{transform:rotate(45deg)}
.b-body .lp-faq details p{padding:0 0 20px;margin:0}
.lp-faq summary:focus-visible{outline:2px solid var(--fg);outline-offset:4px;border-radius:6px}

/* drobne */
.lp-list-check{list-style:none!important;margin-left:0!important}
.lp-list-check li{padding-left:26px;position:relative}
.lp-list-check li::before{content:"✓";position:absolute;left:0;top:0;font:500 15px/1.6 var(--mono);color:var(--ok)}
.lp-quote{border-left:2px solid var(--fg);padding:4px 0 4px 18px;margin-top:18px}
.b-body .lp-quote p{color:var(--fg)}

/* 404 */
.lp-404 .b-title{font-size:clamp(40px,7vw,84px)}
.lp-404-links{list-style:none;display:grid;margin-top:26px}
.lp-404-links a{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);font:500 18px/1.3 var(--display);letter-spacing:-.02em}
.lp-404-links a:hover{color:var(--soft)}