/* FAQ: grafika i sposób rozwijania jak na stronie głównej v13. */
:root{--r-soft:16px}
.faq-list{margin-top:36px;display:grid;gap:2px;max-width:820px}
.faq-item{border:1px solid var(--line);border-radius:4px;background:#fff;padding:0}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 22px;font-family:var(--display);font-weight:700;font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--muted);flex:0 0 auto}
.faq-item[open] summary::after{content:"–"}
.faq-item[open] summary{border-bottom:1px solid var(--line)}
.faq-item .faq-a{padding:4px 22px 20px;font-size:14.5px;color:#4a4a42;line-height:1.6}
.faq-item .faq-a a{color:var(--mint-ink);font-weight:600}
.faq-list{gap:12px}
.faq-item{border:1px solid var(--line);border-radius:var(--r-soft);background:#fff;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.faq-item:hover{border-color:rgba(6,107,57,.32);box-shadow:0 8px 22px -14px rgba(14,14,14,.28)}
.faq-item[open]{border-color:rgba(6,107,57,.42);box-shadow:0 12px 30px -18px rgba(6,107,57,.4)}
.faq-item summary{padding:20px 24px;border-radius:var(--r-soft);transition:color .2s}
.faq-item summary:hover{color:var(--mint-ink)}
.faq-item summary:focus-visible{outline:2px solid var(--mint-ink);outline-offset:-2px}
.faq-item[open] summary{border-bottom:0}
.faq-item summary::after,.faq-item[open] summary::after{content:"";flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(var(--mint-ink),var(--mint-ink)) center/12px 2px no-repeat,
             linear-gradient(var(--mint-ink),var(--mint-ink)) center/2px 12px no-repeat,
             rgba(32,255,148,.16);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .25s}
.faq-item[open]:not(.closing) summary::after{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 24px 22px;overflow:hidden}
@media(max-width:560px){
  .faq-item summary{padding:16px 18px}
  .faq-item .faq-a{padding:0 18px 18px}
  .faq-item summary::after{flex-basis:26px;width:26px;height:26px}
}
@media(max-width:560px){.faq-item summary{font-size:15px}}
@media(prefers-reduced-motion:reduce){.faq-item,.faq-item summary,.faq-item summary::after{transition:none}}
