/* satoapps LP kit: download links (badges, QR, dialog, sticky button).
   Override the look from the site CSS with: --lp-accent, --lp-accent-ink, --lp-ink, --lp-line, --lp-bg, --lp-radius.
   "PC" = a hover-capable fine pointer without html[data-os] (data-os is set by the inline script in <head>). */
:root {
  --lp-accent: #2d5be0;
  --lp-accent-ink: #fff;
  --lp-ink: #22111a;
  --lp-line: rgba(34, 17, 26, 0.18);
  --lp-bg: #fff;
  --lp-radius: 999px;
  --lp-badge-h: 44px;
}

html[data-os] { --lp-badge-h: 52px; }

.lp-dl { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 0 12px; }
.lp-center .lp-dl, .lp-dl.lp-center { align-items: center; text-align: center; }

.lp-mobile { display: flex; flex-direction: column; align-items: inherit; gap: 10px; }
.lp-badges { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.lp-center .lp-badges, .lp-center .lp-mobile { justify-content: center; }
.lp-badge { display: inline-block; line-height: 0; border-radius: 8px; }
.lp-badge img { height: var(--lp-badge-h); width: auto; max-width: none; display: block; }

.lp-other, .lp-android-note { margin: 0; font-size: 14px; color: inherit; }
.lp-btn-store { font-weight: 600; font-size: 12px; margin-left: 8px; opacity: 0.85; }
.lp-mid .lp-mobile { flex-direction: row; flex-wrap: wrap; }

.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  border-radius: var(--lp-radius); font: inherit; font-weight: 800; font-size: 16px; line-height: 1.3; text-decoration: none; cursor: pointer;
  background: var(--lp-accent); color: var(--lp-accent-ink); border: 2px solid var(--lp-ink);
}
.lp-btn:focus-visible, .lp-badge:focus-visible, .lp-other:focus-visible, .lp-sticky-link:focus-visible, .lp-dialog-close:focus-visible { outline: 3px solid var(--lp-accent); outline-offset: 2px; }

.lp-mid { margin: 20px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lp-mid p { margin: 0; font-weight: 700; }
.lp-mid-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-center.lp-mid, .lp-mid.lp-center { align-items: center; text-align: center; }

/* Per-OS: the big badge/button of the other store goes away; the small link to it appears. */
html[data-os="ios"] .lp-play, html[data-os="android"] .lp-ios { display: none; }
.lp-other-ios, .lp-other-play, .lp-android-note { display: none; }
html[data-os="ios"] .lp-other-play, html[data-os="android"] .lp-other-ios { display: inline; }
html[data-os="android"] .lp-android-note { display: block; }
html[data-os="android"] .lp-mid.lp-no-play { display: none; }
html[data-os="android"] .lp-mobile.lp-no-play .lp-badges { display: none; }

/* QR block (last download section) */
.lp-qr-block { display: none; align-items: flex-start; gap: 16px; text-align: left; }
.lp-qr { display: block; flex: none; width: fit-content; line-height: 0; background: #fff; border: 1px solid var(--lp-line); border-radius: 8px; overflow: hidden; }
.lp-qr svg { display: block; width: 128px; height: 128px; }
.lp-qr--160 svg { width: 160px; height: 160px; }
.lp-qr-side { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; max-width: 280px; }
.lp-qr-hint { margin: 0; font-size: 14px; }
.lp-qr-open { display: none; }
.lp-qr-block .lp-badges { justify-content: flex-start; }

@media (hover: hover) and (pointer: fine) {
  html:not([data-os]) .lp-qr-block { display: flex; }
  html:not([data-os]) .lp-has-qr .lp-mobile { display: none; }
  html:not([data-os]) .lp-qr-open { display: inline-flex; }
  html.lp-js:not([data-os]) .lp-has-dialog .lp-mobile { display: none; }
}

/* Dialog */
.lp-dialog { max-width: min(92vw, 420px); width: 100%; border: 2px solid var(--lp-ink); border-radius: 24px; padding: 28px 24px 24px; background: var(--lp-bg); color: var(--lp-ink); text-align: center; position: relative; }
.lp-dialog::backdrop { background: rgba(34, 17, 26, 0.55); }
.lp-dialog h2 { margin: 0 0 8px; font-size: 20px; }
.lp-dialog p { margin: 0 0 16px; font-size: 14px; }
.lp-dialog .lp-qr { margin: 0 auto 16px; }
.lp-dialog .lp-badges { justify-content: center; }
.lp-dialog form { margin: 0; }
.lp-dialog-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }

/* Sticky button (phones only; the script toggles .is-on) */
.lp-sticky { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--lp-bg); border-top: 1px solid var(--lp-line); box-shadow: 0 -6px 20px rgba(34, 17, 26, 0.1); visibility: hidden; transform: translateY(110%); transition: transform 0.2s ease, visibility 0.2s; }
.lp-sticky.is-on { visibility: visible; transform: none; }
.lp-sticky-spacer { display: none; height: calc(76px + env(safe-area-inset-bottom)); }
html[data-os="ios"] .lp-sticky, html[data-os="android"] .lp-sticky.lp-has-play { display: block; }
html[data-os="ios"] .lp-sticky-spacer, html[data-os="android"] .lp-sticky-spacer.lp-has-play { display: block; }
.lp-sticky-link { display: flex; align-items: center; gap: 12px; max-width: 560px; margin: 0 auto; color: inherit; text-decoration: none; }
.lp-sticky-link img { width: 48px; height: 48px; border-radius: 11px; flex: none; }
.lp-sticky-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.lp-sticky-text b { font-size: 15px; }
.lp-sticky-text small { font-size: 12px; opacity: 0.7; }
.lp-sticky-cta { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--lp-radius); background: var(--lp-accent); color: var(--lp-accent-ink); font-weight: 800; font-size: 15px; }

.lp-trademark { display: inline; }

@media (prefers-reduced-motion: reduce) { .lp-sticky { transition: none; } }