/* Laki — marketing + legal pages.
   No build step and no external requests: no CDN, no web fonts, no analytics.
   The privacy page claims we send nothing anywhere; the site should honour that
   too, and it means the page opens fast on mobile data. */

:root {
  --indigo: #4F46E5;
  --indigo-soft: #7C6CF5;
  --violet: #8B5CF6;
  --gold: #F6B73C;
  --paid: #16A34A;
  --due: #E9A23B;
  --danger: #DC2626;
  --ink: #1B1B3A;
  --ink2: #4A4A6A;
  --ink3: #85859E;
  --line: #E6E6F2;
  --surface: #FFFFFF;
  --surface2: #F4F4FB;
  --bg: #F7F7FC;
  --radius: 18px;
  --max: 1080px;
  --prose: 720px;
  --shadow: 0 10px 30px rgba(31, 31, 80, .08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F3F3FB;
    --ink2: #C2C2D8;
    --ink3: #8F8FA8;
    --line: #2A2A44;
    --surface: #161629;
    --surface2: #1E1E36;
    --bg: #0D0D1A;
    --danger: #F87171;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--indigo); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
@media (prefers-color-scheme: dark) { a { color: var(--indigo-soft); } }

:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: 10px;
  border: 1px solid var(--line);
}
.skip:focus { left: 12px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.prose { max-width: var(--prose); }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header.site .wrap { display: flex; align-items: center; gap: 14px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.3px; color: inherit; text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 9px; display: block; }
header.site nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
header.site nav a {
  padding: 8px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600;
  color: var(--ink2); text-decoration: none;
}
header.site nav a:hover { background: var(--surface2); color: var(--ink); }
@media (max-width: 620px) { .hide-sm { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; padding: 64px 0 40px; overflow: hidden; }
#bg-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: .55;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 48px; } }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 99px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 13px; font-weight: 700; color: var(--ink2); margin-bottom: 18px;
}
.pill .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--paid); }

h1 {
  font-size: clamp(32px, 6.4vw, 52px); line-height: 1.08;
  letter-spacing: -1.2px; margin: 0 0 14px; font-weight: 800;
}
.lead { font-size: clamp(17px, 2.2vw, 19.5px); color: var(--ink2); margin: 0 0 26px; }
.lead strong { color: var(--ink); }

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 13px; font-weight: 700; font-size: 15px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  min-height: 46px;
}
.btn-primary { background: linear-gradient(135deg, var(--indigo), var(--violet)); color: #fff; box-shadow: 0 8px 22px rgba(79, 70, 229, .32); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface2); }
.micro { font-size: 13.5px; color: var(--ink3); margin-top: 14px; }

/* phone frame, CSS only */
.phone-stage { display: flex; justify-content: center; perspective: 1400px; }
.phone {
  width: min(292px, 78vw); border-radius: 34px; padding: 9px;
  background: linear-gradient(160deg, #2A2A47, #12121F);
  box-shadow: 0 26px 60px rgba(31, 31, 80, .3), 0 2px 0 rgba(255, 255, 255, .12) inset;
  transform: rotateY(-11deg) rotateX(4deg);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.phone:hover { transform: rotateY(-4deg) rotateX(1deg) translateY(-5px); }
@media (prefers-reduced-motion: reduce) { .phone, .phone:hover { transform: none; transition: none; } }
.phone .screen { border-radius: 26px; overflow: hidden; background: #000; aspect-ratio: 1080 / 2400; }
.phone .screen img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- sections ---------- */
section { padding: 56px 0; }
section.tint { background: var(--surface2); border-block: 1px solid var(--line); }
.eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--indigo); margin: 0 0 10px; }
h2 { font-size: clamp(24px, 3.6vw, 33px); line-height: 1.18; letter-spacing: -.6px; margin: 0 0 12px; font-weight: 800; }
h3 { font-size: 17px; margin: 0 0 6px; font-weight: 700; }
p { color: var(--ink2); margin: 0 0 12px; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.card .ico {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  font-size: 20px; margin-bottom: 12px; background: var(--surface2);
}
.card p { font-size: 14.5px; margin: 0; }

/* screenshot gallery — a plain scroll-snap strip, no JS needed to work */
/* Tight on purpose: a narrow gap and narrow cards mean five or six screens are
   visible at once, so the strip reads as "here is the whole app" rather than as
   two big pictures you have to scroll past. */
.shots {
  display: flex; gap: 9px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 20px 14px; margin: 0 -20px; -webkit-overflow-scrolling: touch;
}
.shots::-webkit-scrollbar { height: 6px; }
.shots::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.shot { scroll-snap-align: center; flex: 0 0 auto; width: 132px; }
/* Phone screens are 1080x2400; shown full-height they'd make this strip taller
   than the viewport and push the captions off screen. Crop to the top, which is
   the part that actually identifies each screen. */
.shot img {
  width: 100%; height: 232px; object-fit: cover; object-position: top center;
  border-radius: 12px; border: 1px solid var(--line);
  box-shadow: var(--shadow); display: block; background: var(--surface);
}
.shot figcaption { font-size: 12px; color: var(--ink2); margin-top: 6px; text-align: center; font-weight: 600; }

/* pricing */
.tiers { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .tiers { grid-template-columns: 1fr 1fr; } }
.tier { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.tier.featured { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
.tier .price { font-size: 30px; font-weight: 800; letter-spacing: -.8px; margin: 6px 0 2px; }
.tier .price small { font-size: 14px; font-weight: 600; color: var(--ink3); letter-spacing: 0; }
.tier ul { list-style: none; padding: 0; margin: 14px 0 0; }
.tier li { padding-left: 26px; position: relative; margin-bottom: 9px; font-size: 14.5px; color: var(--ink2); }
.tier li::before { content: "✓"; position: absolute; left: 0; color: var(--paid); font-weight: 800; }
.tier li.no::before { content: "○"; color: var(--ink3); }

/* faq */
details {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 18px; margin-bottom: 10px;
}
details[open] { border-color: color-mix(in srgb, var(--indigo) 40%, var(--line)); }
summary { cursor: pointer; font-weight: 700; font-size: 15.5px; list-style: none; display: flex; gap: 10px; align-items: flex-start; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "＋"; color: var(--indigo); font-weight: 800; flex: 0 0 auto; }
details[open] summary::before { content: "－"; }
details p { margin: 10px 0 0; font-size: 14.5px; }

.note {
  background: color-mix(in srgb, var(--paid) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--paid) 32%, transparent);
  border-radius: var(--radius); padding: 18px;
}
.note strong { color: var(--paid); }

.placeholder {
  background: color-mix(in srgb, var(--gold) 14%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--gold) 62%, transparent);
  border-radius: 12px; padding: 13px 16px; margin: 18px 0; font-size: 14px; color: var(--ink2);
}
.placeholder code { background: color-mix(in srgb, var(--ink) 8%, transparent); padding: 1px 5px; border-radius: 5px; }

/* legal pages */
.legal h2 { font-size: 21px; margin: 32px 0 8px; }
.legal h3 { font-size: 16.5px; margin: 20px 0 6px; }
.legal li { color: var(--ink2); margin-bottom: 6px; }
.updated { color: var(--ink3); font-size: 14px; }
table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14.5px; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink2); }
th { color: var(--ink); font-weight: 700; }
.scroll-x { overflow-x: auto; }

footer.site { border-top: 1px solid var(--line); background: var(--surface); padding: 28px 0; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
footer.site .muted { color: var(--ink3); font-size: 14px; }
footer.site nav { margin-left: auto; display: flex; gap: 18px; }
footer.site nav a { font-size: 14px; font-weight: 600; }

img { max-width: 100%; }

/* ---------- forms (tester signup) ---------- */
form label {
  display: block;          /* labels were sitting inline and wrapping into each other */
  margin-bottom: 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
form input[type="text"],
form input[type="tel"],
form input[type="email"],
form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  /* 16px minimum stops iOS zooming the page when a field is focused */
  font-size: 16px;
}
form textarea { resize: vertical; min-height: 84px; }
form input:focus, form textarea:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .18);
}
form input::placeholder, form textarea::placeholder { color: var(--ink3); }
/* Helper text under a field: .micro alone is inline, so its margin collapses and
   it runs into the input above it. */
form label .micro {
  display: block; margin-top: 6px; font-weight: 400; font-size: 13px; line-height: 1.45;
}

/* ---------- numbered steps (install page) ---------- */
/* An install guide read one-handed, standing in a shop. The number has to be
   findable again after you look away at your phone's Play Store and back. */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 22px 0 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 22px 52px;
  border-left: 2px solid var(--line);
  margin-left: 15px;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: -16px; top: -2px;
  width: 32px; height: 32px; border-radius: 99px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  color: #fff; font-weight: 800; font-size: 15px; line-height: 1;
}
.steps > li strong { display: block; font-size: 16.5px; margin-bottom: 2px; }
.steps > li p { margin: 0; font-size: 14.5px; color: var(--ink2); }
.steps > li p + p { margin-top: 8px; }

/* The one instruction people will not believe until they read it twice. */
.warn {
  background: color-mix(in srgb, var(--gold) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: var(--radius); padding: 18px;
}
.warn strong { color: color-mix(in srgb, var(--gold) 72%, var(--ink)); }