/* Od makiety do gotowej aplikacji — dwa przyciski, jeden widok (kolory MBFlow: slate / paper / gold) */
.comparison .compare-tabs{display:inline-flex;flex-wrap:wrap;gap:0;border:1px solid #14202C;margin-bottom:18px}
.comparison .compare-tabs button{appearance:none;border:0;border-radius:0;background:#FAF7F2;color:#14202C;padding:13px 24px;font:500 .875rem/1.4 Inter,Arial,sans-serif;letter-spacing:.01em;cursor:pointer;box-shadow:inset 0 -3px 0 transparent;transition:background .2s,color .2s,box-shadow .2s}
.comparison .compare-tabs button+button{border-left:1px solid #14202C}
.comparison .compare-tabs button:hover{background:#E7E2DA}
.comparison .compare-tabs button[aria-pressed="true"]{background:#14202C;color:#FAF7F2;box-shadow:inset 0 -3px 0 #F2B705}
.comparison .compare-tabs button:focus-visible{outline:3px solid #4E6A62;outline-offset:3px}
.compare-view{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid #ddd6cc;background:#FAF7F2}
.compare-view .compare-img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;opacity:0;transition:opacity .35s ease}
.compare-view[data-widok="makieta"] .compare-img[data-widok="makieta"],
.compare-view[data-widok="system"] .compare-img[data-widok="system"]{opacity:1}
.compare-links{display:flex;justify-content:flex-end;padding-top:12px;font-size:.8125rem;color:#4E6A62}.compare-links a{text-decoration:underline;text-underline-offset:4px}
@media(prefers-reduced-motion:reduce){.compare-view .compare-img{transition:none}}
@media(max-width:760px){.comparison .compare-tabs{display:flex}.comparison .compare-tabs button{flex:1;padding:11px 10px;font-size:.8125rem}}