/* Location Alerts — shared site style: bright blue, calm, corner logo */
:root {
  --bg: #e9f3fb;
  --fg: #17323d;
  --muted: #55707f;
  --accent: #0e7d72;
  --link: #1668c7;
  --card: #ffffff;
  --shadow: 0 2px 10px rgba(23, 50, 61, .07);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.65;
  font-size: 1.15rem;
}
/* Big app logo pinned behind the content, top-right corner */
.bg-logo {
  position: fixed;
  top: -70px;
  right: -70px;
  width: min(65vmin, 520px);
  opacity: .13;
  transform: rotate(8deg);
  border-radius: 22%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
/* Language selector */
.lang-sel {
  position: fixed;
  top: .8rem;
  left: .8rem;
  z-index: 2;
  background: var(--card);
  color: var(--fg);
  border: 1px solid rgba(23, 50, 61, .15);
  border-radius: 10px;
  padding: .35rem .5rem;
  font: inherit;
  font-size: .9rem;
  box-shadow: var(--shadow);
}
main, footer {
  position: relative;
  z-index: 1;
  max-width: 740px;
  margin: 0 auto;
  padding: 3.6rem 1.25rem 1.5rem;
}
footer { padding-top: 1rem; padding-bottom: 2.5rem; color: var(--muted); font-size: .9rem; }
h1 { font-size: 2rem; line-height: 1.25; margin: 0 0 .4rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .8rem; }
p { margin: .7rem 0; }
a { color: var(--link); }
code { background: var(--card); border-radius: 5px; padding: .05rem .35rem; }
.tagline { font-size: 1.2rem; color: var(--muted); margin: 0 0 1.8rem; }
.card {
  background: var(--card);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow);
}
/* Hand-drawn V check bullets */
ul.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
ul.checks li {
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: .8rem 1rem .8rem 2.9rem;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
ul.checks li:hover {
  transform: scale(1.5);
  transform-origin: left center;
  z-index: 10;
  box-shadow: 0 20px 50px rgba(23, 50, 61, .3);
}
/* RTL: check bullet moves to the right edge, text pads on the right,
   hover growth anchors on the right. */
[dir="rtl"] ul.checks li { padding: .8rem 2.9rem .8rem 1rem; }
[dir="rtl"] ul.checks li:hover { transform-origin: right center; }
[dir="rtl"] ul.checks li::before { left: auto; right: .9rem; }
ul.checks li::before {
  content: "";
  position: absolute;
  left: .9rem;
  top: .95rem;
  width: 1.35rem;
  height: 1.25rem;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 24"><path d="M3 14 C5.5 14.6 8.4 17.8 9.8 21 C12 13.5 17.5 6.2 24 3" fill="none" stroke="%230e7d72" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}
ul.checks li strong { display: block; }
ul.checks li span { color: var(--muted); font-size: .95rem; }
ol { padding-left: 1.4rem; }
.examples {
  border-inline-start: 3px solid var(--accent);
  padding: .2rem 1rem;
  margin: .5rem 0;
}
.examples p {
  margin: .5rem 0;
  font-style: italic;
  color: var(--muted);
  transition: transform .18s ease;
  transform-origin: left center;
}
.examples p:hover { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  ul.checks li, .examples p { transition: none; }
  ul.checks li:hover, .examples p:hover { transform: none; }
}
footer { border-top: 1px solid rgba(23, 50, 61, .1); }

/* Media strip — screenshots + video, scattered like loose photos (Play Store
   style: screenshots lead, the tap-to-play video tile closes the strip).
   Centered inside <main>'s column: the strip never exceeds the page width,
   so the side arrows genuinely scroll hidden content into view. */
.gallery-wrap {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}
.gallery {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  overflow-x: auto;
  /* Extra top/bottom padding: overflow-x:auto forces overflow-y to also
     clip (CSS spec quirk when one axis is 'visible' and the other isn't),
     so a scaled-up hover image needs real room reserved here or it gets
     cut off instead of visibly growing. The 480px video tile is the
     tallest flex line item, so a 2x scale of the 380px shots (760px,
     190px growth each side vs 240px half-line already available) fits
     with this as a comfort margin, not a strict requirement. */
  padding: 2.2rem .2rem;
  scroll-snap-type: x proximity;
}
.gallery img.shot {
  height: 380px;
  width: auto;
  border-radius: 12px;
  box-shadow: var(--shadow);
  scroll-snap-align: start;
  flex: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gallery img.shot:nth-child(2) { transform: rotate(-4deg); }
.gallery img.shot:nth-child(3) { transform: rotate(3deg); }
.gallery img.shot:nth-child(4) { transform: rotate(-3deg); }
.gallery img.shot:nth-child(5) { transform: rotate(4deg); }
/* In-place 2x scale — position stays static so the cursor never leaves the
   element mid-hover (position:fixed here would instantly un-hover itself). */
.gallery img.shot:hover {
  /* Modest zoom: the strip lives inside the 740px column now, so a 2x
     blow-up would clip against the scroller. */
  transform: scale(1.35);
  z-index: 50;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.gallery .video-tile, .gallery .video-item {
  aspect-ratio: 1 / 1;
  height: 480px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #000;
  position: relative;
  scroll-snap-align: start;
  flex: none;
  cursor: pointer;
}
.gallery .video-tile img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.gallery .video-item { border: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.play-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
@media (prefers-reduced-motion: reduce) {
  .gallery img.shot { transition: none; }
  .gallery img.shot:hover { transform: none; }
}

/* ── Free & Premium tiers ─────────────────────────────────────────────── */
.tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 640px) { .tiers { grid-template-columns: 1fr; } }
.tier h3 { margin: 0 0 .1rem; font-size: 1.2rem; }
.tier-price { margin: 0 0 .6rem; color: var(--muted); font-size: .95rem; }
.tier ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.tier ul li {
  /* Logical padding: the bullet's side flips automatically with dir, no
     separate [dir="rtl"] override needed. */
  padding-inline-start: 1.5rem;
  position: relative;
  font-size: .98rem;
}
.tier ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .35rem;
  width: 1rem;
  height: .95rem;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 24"><path d="M3 14 C5.5 14.6 8.4 17.8 9.8 21 C12 13.5 17.5 6.2 24 3" fill="none" stroke="%230e7d72" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}
.tier-premium { border: 2px solid var(--accent); }
.tier-note {
  margin: .8rem 0 0;
  font-size: .92rem;
  color: var(--muted);
  background: var(--bg);
  border-radius: 10px;
  padding: .6rem .8rem;
}