/* Web Webové Hlídky – úvod, dokumentace a 404 podle návrhu (Landing page.dc.html, mobil podle M LP). */
body { margin: 0; background: #08090A; color: #F2F3F5; font-family: 'Geist', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
button { color: inherit; font-family: inherit; }
a { color: #BE96F6; text-decoration: none; }
a:hover { color: #D8BFFB; text-decoration: underline; }
a.btn-primary, a.btn-ghost, a.lp-cta, a.lp-logo, a.lp-nav-cta { text-decoration: none !important; }
a.btn-primary:hover { color: #FFFFFF; }
a.btn-ghost:hover { color: #F2F3F5; }
.btn-primary:hover { background: #9F63E9 !important; }
.btn-ghost:hover { background: #16181B !important; }
:focus-visible { outline: 2px solid #BE96F6; outline-offset: 2px; border-radius: 4px; }
@keyframes fresh { 0% { opacity: 1 } 50% { opacity: .35 } 100% { opacity: 1 } }

.lp-skip { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 8px 12px; border-radius: 8px; background: #16181B; color: #F2F3F5; }
.lp-skip:focus { left: 16px; }

/* Přepínač měsíčně / ročně */
.lp-toggle button { padding: 7px 14px; border: 0; border-radius: 6px; background: transparent; font-size: 13px; color: #A8AEB7; cursor: pointer; }
.lp-toggle button[aria-checked="true"] { background: #1D2024; color: #F2F3F5; font-weight: 500; }

/* Hero graf se po načtení jednou „odehraje“ – se zapnutým omezením animací je statický */
.lp-hero [style*="align-items: flex-end"] > div { transform-origin: bottom; animation: lp-grow .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes lp-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .lp-hero [style*="align-items: flex-end"] > div { animation: none; }
  html { scroll-behavior: auto; }
}
html { scroll-behavior: smooth; }
section, [id] { scroll-margin-top: 16px; }

.lp-menu { display: none; margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; font: 18px/1 'Geist Mono', ui-monospace, monospace; color: #A8AEB7; cursor: pointer; }
.lp-mobile-menu { position: fixed; top: 57px; left: 0; right: 0; z-index: 40; display: flex; flex-direction: column; gap: 2px; padding: 12px 20px 20px; background: #08090A; border-bottom: 1px solid #16181B; }
.lp-mobile-menu[hidden] { display: none; }
.lp-mobile-menu a { padding: 12px 0; font-size: 16px; color: #F2F3F5; }
.lp-mobile-menu .lp-mobile-cta { margin-top: 10px; display: flex; align-items: center; justify-content: center; height: 50px; border-radius: 10px; background: #832CED; color: #FFFFFF; font-weight: 500; }


/* ── Mobil (M LP) ──────────────────────────────────────────────── */
@media (max-width: 720px) {
  .lp-wrap { padding: 0 20px !important; }
  .lp-nav { min-height: 56px !important; padding: 8px 0 !important; flex-wrap: nowrap !important; }
  .lp-nav .lp-nav-link, .lp-nav .lp-nav-cta, .lp-nav > span { display: none !important; }
  .lp-menu { display: inline-flex; align-items: center; justify-content: center; }
  .lp-hero { padding-top: 28px !important; gap: 24px !important; }
  .lp-h1 { font-size: 31px !important; line-height: 1.1 !important; letter-spacing: -0.026em !important; margin-bottom: 14px !important; }
  .lp-hero p { font-size: 16px !important; }
  .lp-hero a.lp-cta { width: 100%; height: 50px !important; border-radius: 10px !important; font-size: 15px !important; }
  .lp-hero a.lp-cta + a.lp-cta { margin-top: 0; }
  .lp-section { padding-top: 56px !important; }
  .lp-section h2 { font-size: 26px !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; }
  .lp-section p { font-size: 15px !important; }
  .lp-toggle { width: 100%; }
  .lp-toggle button { flex: 1; height: 38px; }
  #cenik > div:first-child { flex-direction: column; align-items: stretch !important; }
  #lp-plans a { height: 44px !important; font-size: 14px !important; }
  .lp-final { padding: 40px 0 !important; }
  .lp-final h2 { font-size: 24px !important; }
  .lp-final a.lp-cta { width: 100%; height: 50px !important; border-radius: 10px !important; }
  .lp-footer { padding-bottom: 140px !important; }
}

/* Hero na mobilu: tlačítka pod sebou, místo detailu korelace souhrn (M LP) */
.lp-hero-summary { display: none; }
@media (max-width: 720px) {
  .lp-hero-actions { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
  .lp-hero-corr, .lp-hero-legend { display: none !important; }
  .lp-hero-summary { display: block; }
}

/* Dokumentace a 404 (PODSTRÁNKY, M LP dokumentace + 404) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-doc-select { display: none; }
.lp-doc-select select { height: 36px; padding: 0 12px; border: 1px solid #33373E; border-radius: 8px; background: #08090A; color: #A8AEB7; font: 13px 'Geist', system-ui; }
.lp-doc-menu a:hover { background: #16181B; color: #F2F3F5 !important; text-decoration: none !important; }
.lp-doc-menu a[aria-current="true"] { background: #2A1352; color: #D8BFFB !important; font-weight: 500; }
@media (max-width: 720px) {
  .lp-doc { padding-top: 16px !important; }
  .lp-doc-menu, .lp-doc-sub { display: none !important; }
  .lp-doc-select { display: block; }
  .lp-404 { padding: 24px 20px !important; }
  .lp-404-actions { flex-direction: column; }
  .lp-404-actions a { height: 48px !important; border-radius: 10px !important; font-size: 15px !important; }
}

/* Skutečné obrazovky z aplikace */
.lp-shot { margin: 0; border: 1px solid #24272C; border-radius: 16px; background: #101113; padding: 10px; }
.lp-shot img { display: block; width: 100%; height: auto; border-radius: 8px; }
.lp-shot figcaption { padding: 12px 6px 4px; font-size: 13px; line-height: 1.5; color: #A8AEB7; }
.lp-shot-note { margin-top: 12px; font-size: 12px; color: #7E858E; }

/* Srovnání se Sentry */
.lp-compare-wrap { border: 1px solid #24272C; border-radius: 16px; background: #101113; overflow-x: auto; }
.lp-compare { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.lp-compare th, .lp-compare td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #16181B; }
.lp-compare thead th { font-size: 12px; font-weight: 500; color: #7E858E; background: #16181B; }
.lp-compare tbody th { font-weight: 500; color: #F2F3F5; width: 30%; }
.lp-compare td { color: #A8AEB7; width: 35%; }
.lp-compare tr:last-child > * { border-bottom: 0; }
.lp-compare .ano { color: #6FD3A2; }
.lp-compare .ne { color: #7E858E; }
.lp-compare-note { margin-top: 12px; font-size: 12px; line-height: 1.5; color: #7E858E; }
@media (max-width: 720px) {
  /* Na mobilu: název řádku přes celou šířku, pod ním obě hodnoty vedle sebe */
  .lp-compare { font-size: 13px; }
  .lp-compare tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #16181B; }
  .lp-compare thead th:first-child { display: none; }
  .lp-compare th, .lp-compare td { width: auto !important; padding: 8px 12px; border-bottom: 0; }
  .lp-compare tbody th { grid-column: 1 / -1; padding-top: 12px; }
  .lp-compare tbody td { padding-bottom: 12px; }
}

/* Lightbox pro screenshoty */
.lp-shot-link { display: block; position: relative; border-radius: 8px; cursor: zoom-in; }
.lp-shot-link::after { content: "⤢"; position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(8, 9, 10, .75); color: #F2F3F5; font-size: 16px; opacity: 0; transition: opacity .15s; }
.lp-shot-link:hover::after, .lp-shot-link:focus-visible::after { opacity: 1; }
.lp-lightbox { max-width: none; max-height: none; width: 100vw; height: 100vh; margin: 0; padding: 0; border: 0; background: rgba(8, 9, 10, .92); }
.lp-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lp-lightbox::backdrop { background: transparent; }
.lp-lightbox figure { margin: 0; max-width: min(1600px, 96vw); cursor: zoom-out; }
.lp-lightbox img { display: block; max-width: 100%; max-height: 86vh; width: auto; height: auto; margin: 0 auto; border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.lp-lightbox figcaption { margin-top: 12px; text-align: center; font-size: 14px; line-height: 1.5; color: #A8AEB7; }
.lp-lightbox-close { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border: 1px solid #33373E; border-radius: 10px; background: #16181B; color: #F2F3F5; font-size: 22px; line-height: 1; cursor: pointer; }
.lp-lightbox-close:hover { background: #1D2024; }

/* Ukázka seznamu chyb na mobilu: bez cesty k souboru a grafu, ať je vidět zpráva */
@media (max-width: 720px) {
  #chyby span[style*="text-overflow: ellipsis; flex: 0 0 auto"],
  #chyby span[style*="height: 14px; flex: 0 0 auto"] { display: none !important; }
}

/* Kód se nezalamuje – dlouhé řádky (DSN) se posouvají vodorovně (návrh Landing page) */
[data-sdk-code] > div { white-space: pre; }