/* ==========================================================================
   Lokips Downloads — single screen, no scroll.

   This page borrows the product's own UI language rather than inventing one:
   the app's light tokens (hue 260), Inter + JetBrains Mono, thin borders,
   restrained rounding, low shadows, and the X-style pill/feed patterns the
   application already uses. The right side renders the actual Lokips app shell
   so the page shows what the APK installs.

   Target canvas is 1440x900. The whole composition fits one viewport at every
   size; nothing scrolls.
   ========================================================================== */

/* ---------- Fonts (self-hosted, same families as the app) ---------------- */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/fonts/inter-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}

/* ---------- Tokens ------------------------------------------------------- */
/* The app's light ramp, hue 260. Neutrals carry a little chroma on that hue,
   so nothing here is pure greyscale. */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;

  --mat: oklch(0.955 0.008 260);          /* page behind the shell   #edf0f6 */
  --bg: oklch(0.99 0.005 260);            /* app --background       #fafcff */
  --surface: oklch(1 0 0);                /* app --card             #ffffff */
  --fg: oklch(0.15 0.02 260);             /* app --foreground       #070b14 */
  --fg-muted: oklch(0.45 0.03 260);       /* app --muted-foreground #4c5666 */
  --fg-subtle: oklch(0.58 0.025 260);     /*                        #727b8a */
  --muted: oklch(0.96 0.01 260);          /* app --muted            #eef2f9 */
  --accent: oklch(0.94 0.02 260);         /* app --accent           #e4ecf9 */
  --border: oklch(0.91 0.01 260);         /* app --border           #dde1e8 */
  --border-soft: oklch(0.94 0.008 260);

  --primary: oklch(0.55 0.18 260);        /* app --primary          #296cd8 */
  --primary-hover: oklch(0.5 0.18 260);
  --primary-fg: oklch(0.98 0.01 260);
  --primary-tint: oklch(0.95 0.03 260);

  --success: oklch(0.55 0.14 150);
  --success-tint: oklch(0.95 0.03 150);
  --like: oklch(0.62 0.22 5);             /* the feed's heart colour */

  --radius: 0.75rem;                       /* the app's base radius */
  --r-sm: calc(var(--radius) - 4px);
  --r-md: calc(var(--radius) - 2px);
  --r-lg: var(--radius);
  --r-xl: calc(var(--radius) + 4px);
  --r-2xl: calc(var(--radius) + 12px);

  --shadow-sm: 0 1px 2px oklch(0.15 0.02 260 / 0.06);
  --shadow-md: 0 6px 20px -8px oklch(0.15 0.02 260 / 0.14);
  --shadow-lg: 0 24px 60px -28px oklch(0.15 0.02 260 / 0.3);

  --pad-x: clamp(20px, 3.2vw, 48px);
}

/* ---------- Base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* The no-scroll promise, enforced on both elements so a fractional viewport
   height can never produce a scrollbar. */
html { height: 100%; overflow: hidden; -webkit-text-size-adjust: 100%; }

body {
  height: 100dvh;
  padding: clamp(8px, 1.2vmin, 16px);
  background: var(--mat);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

h1 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; padding: 0; }
.mono { font-family: var(--font-mono); }

::selection { background: var(--primary-tint); color: var(--primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-sm); }

/* Icons are drawn, never filled — matches the app's lucide set. */
.ic {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ic-sm { width: 13px; height: 13px; stroke-width: 2; }

/* ---------- Shell -------------------------------------------------------- */
.shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* ---------- Header ------------------------------------------------------- */
.topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
  height: clamp(56px, 7.6vh, 76px);
  padding-inline: var(--pad-x);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 50%;
  overflow: hidden; flex: none; background: var(--muted);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }
.brand-name { font-size: clamp(17px, 1.5vw, 21px); font-weight: 800; letter-spacing: -0.03em; }

/* With the primary nav removed, the header CTA sits flush right. */
.topbar .btn-outline { margin-left: auto; }

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background-color 0.14s ease, border-color 0.14s ease,
              color 0.14s ease, box-shadow 0.14s ease;
}
.btn-primary {
  background: var(--primary); color: var(--primary-fg);
  box-shadow: 0 8px 20px -10px var(--primary);
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-outline {
  background: var(--surface); color: var(--primary);
  border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
}
.btn-outline:hover { background: var(--primary-tint); }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-lg .ic { width: 19px; height: 19px; }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }

/* ---------- Hero --------------------------------------------------------- */
.hero {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  padding-left: var(--pad-x);
  /* No right padding: the app surface is cropped by the shell edge, which is
     what keeps it feeling built-in rather than pasted on. */
  padding-right: 0;
}

/* ---------- Left: the ask ------------------------------------------------ */
.pitch { padding-block: clamp(16px, 2.4vh, 32px); }

.pitch h1 {
  font-size: clamp(34px, min(4.1vw, 6.6vh), 62px);
}
.pitch h1 .hl { color: var(--primary); }

.sub {
  margin-top: clamp(12px, 1.7vh, 18px);
  max-width: 44ch;
  font-size: clamp(14px, 1.05vw, 16.5px);
  color: var(--fg-muted);
}

/* Three supporting points — compact, icon-led, no marketing tone. */
.points {
  margin-top: clamp(16px, 2.4vh, 28px);
  display: grid;
  gap: clamp(10px, 1.5vh, 16px);
}
.points li { display: flex; align-items: flex-start; gap: 13px; }
.pt-ic {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: var(--r-md);
  background: var(--primary-tint);
  color: var(--primary);
}
.pt-txt { display: block; font-size: 13.5px; color: var(--fg-muted); line-height: 1.45; }
.pt-txt strong {
  display: block; margin-bottom: 1px;
  font-size: 14.5px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em;
}

.cta-row {
  margin-top: clamp(18px, 2.8vh, 32px);
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
}
.build-chip {
  padding: 9px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--muted);
  font-size: 12.5px;
  color: var(--fg-muted);
  white-space: nowrap;
}

.fineprint {
  display: flex; align-items: center; gap: 7px;
  margin-top: clamp(10px, 1.6vh, 16px);
  font-size: 11.5px;
  color: var(--fg-subtle);
}

/* ---------- Right: the product ------------------------------------------- */
.showcase {
  position: relative;
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* The app surface bleeds past the right edge and is clipped by the shell. */
.app {
  position: relative;
  width: calc(100% + 40px);
  height: min(92%, 660px);
  display: grid;
  grid-template-columns: clamp(150px, 13vw, 210px) minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl) 0 0 var(--r-2xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  user-select: none;
}

/* Left rail — the app's own pill navigation. */
.app-rail {
  padding: 18px 12px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.rail-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 10px 16px;
  font-size: 15px; font-weight: 800; letter-spacing: -0.02em;
}
.rail-logo {
  width: 26px; height: 26px; border-radius: 50%;
  overflow: hidden; flex: none; background: var(--muted);
}
.rail-logo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }

.rail-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}
.rail-item .ic { width: 19px; height: 19px; color: var(--fg-muted); }
.rail-item.is-active { background: var(--accent); font-weight: 700; }
.rail-item.is-active .ic { color: var(--fg); }

.rail-cta {
  margin-top: 12px;
  padding: 10px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 14px; font-weight: 700; text-align: center;
}

/* Feed column */
.app-feed { display: flex; flex-direction: column; min-width: 0; background: var(--surface); }

.feed-top {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.feed-tabs { display: flex; align-items: center; gap: 8px; }
/* The app's active tab is a solid blue pill. */
.tab {
  padding: 7px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--fg-muted);
}
.tab.is-active { background: var(--primary); color: var(--primary-fg); }

.feed-tools { display: flex; align-items: center; gap: 14px; color: var(--fg-muted); }
.bell { position: relative; display: block; }
.bell .dot {
  position: absolute; top: -5px; right: -6px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px;
  background: oklch(0.6 0.2 25); color: #fff;
  font-family: var(--font-mono); font-size: 9px; font-style: normal;
  display: grid; place-items: center;
}

.composer {
  flex: none;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.composer-ph { font-size: 14.5px; color: var(--fg-subtle); }

/* Avatars: flat colour circles with an initial, as the app renders them. */
.av {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  color: #fff; font-size: 13px; font-weight: 700;
}
.av-p { background: oklch(0.45 0.15 280); }
.av-a { background: oklch(0.4 0.16 285); }
.av-e { background: oklch(0.32 0.05 250); }
.av-c { background: oklch(0.55 0.16 285); }

.post {
  display: flex; gap: 11px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.post.is-alt { background: var(--bg); }
.post-body { min-width: 0; flex: 1; }
.post-head {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 14px; letter-spacing: -0.01em;
}
.post-head strong { font-weight: 700; }
.handle { color: var(--fg-subtle); font-size: 13px; white-space: nowrap; }
.post-text { margin-top: 3px; font-size: 13.5px; line-height: 1.45; }
.tagged { color: var(--primary); }

.post-acts {
  display: flex; align-items: center; gap: 22px;
  margin-top: 10px;
  color: var(--fg-subtle);
  font-family: var(--font-mono); font-size: 11.5px;
}
.post-acts span { display: inline-flex; align-items: center; gap: 6px; }
.post-acts .ic { width: 15px; height: 15px; }
.post-acts .liked { color: var(--like); }
.post-acts .liked .ic { fill: var(--like); stroke: var(--like); }
.post-acts .act-end { margin-left: auto; }

/* Build details, overlapping the app surface — the technical metadata lives
   here rather than in a card of its own, so it fills the composition. */
.buildcard {
  position: absolute;
  left: clamp(-28px, -2vw, -12px);
  bottom: clamp(10px, 4vh, 46px);
  width: clamp(220px, 21vw, 286px);
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.buildcard-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-subtle);
}
.chip-stable {
  padding: 3px 9px; border-radius: 999px;
  background: var(--success-tint); color: var(--success);
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
}
.buildcard-file {
  margin-top: 9px;
  font-size: 13px; color: var(--fg);
  overflow-wrap: anywhere;
}
.buildcard-rows {
  margin-top: 11px; padding-top: 11px;
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px;
}
.buildcard-rows .wide { grid-column: 1 / -1; }
.buildcard-rows dt { font-size: 10.5px; color: var(--fg-subtle); }
.buildcard-rows dd { margin-top: 2px; font-size: 11.5px; overflow-wrap: anywhere; }

/* ---------- Bottom dock -------------------------------------------------- */
.dock {
  flex: none;
  display: flex; align-items: stretch; gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(12px, 1.8vh, 20px) var(--pad-x);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.webapp {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 14px;
}
.webapp-ic {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border-radius: var(--r-lg);
  background: var(--primary-tint); color: var(--primary);
}
.webapp-ic .ic { width: 21px; height: 21px; }
.webapp-txt { min-width: 0; flex: 1; }
.webapp-txt strong {
  display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
}
.webapp-txt span { font-size: 13px; color: var(--fg-muted); }

/* Availability: the live platform reads normally, the two pending ones are
   visibly inert — no border, muted fill, dimmed text, no affordance. */
.status {
  flex: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.stat {
  min-width: clamp(112px, 11vw, 158px);
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: var(--muted);
}
.stat-name {
  display: block;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--fg-subtle);
}
.stat-state {
  display: block; margin-top: 1px;
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-subtle);
}
.stat.is-live {
  background: var(--surface);
  border-color: color-mix(in oklab, var(--success) 32%, var(--border));
}
.stat.is-live .stat-name { color: var(--fg); }
.stat.is-live .stat-state { color: var(--success); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Laptop — tighten the product surface before the layout stacks. */
@media (max-width: 1180px) {
  .app { grid-template-columns: clamp(120px, 14vw, 160px) minmax(0, 1fr); }
  .rail-item span, .rail-brand span:last-child { font-size: 13px; }
  .buildcard { width: clamp(200px, 24vw, 240px); }
}

/* Tablet — the product visual steps back, the ask takes the full width. */
@media (max-width: 940px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    padding-right: var(--pad-x);
    gap: clamp(14px, 2vh, 22px);
  }
  .pitch { padding-block: clamp(14px, 2.2vh, 26px); }
  .sub { max-width: none; }
  /* The app surface is dropped rather than shrunk to an unreadable size. The
     build data has nothing to overlap now, so it returns to the flow as a
     normal card beneath the call to action. */
  .showcase { display: block; height: auto; }
  .app { display: none; }
  .buildcard {
    position: static;
    width: 100%;
    max-width: 460px;
    box-shadow: none;
  }
}

/* Phone — everything stacks and compresses to hold one screen. */
@media (max-width: 620px) {
  body { padding: 8px; }
  .shell { border-radius: var(--r-xl); }
  .topbar { height: 56px; gap: 10px; padding-inline: 16px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-name { font-size: 17px; }

  /* The header CTA is a supporting action here, not a headline. It loses the
     globe, the word "Open", and its desktop padding so the brand still leads. */
  .topbar .btn-outline {
    margin-left: auto;
    padding: 8px 13px;
    font-size: 12.5px;
    gap: 6px;
  }
  .topbar .btn-outline > .ic:first-child { display: none; }
  .wide-only { display: none; }

  .pitch h1 { font-size: clamp(28px, 8vw, 40px); }
  .sub { font-size: 13.5px; }
  .points { gap: 9px; }
  .pt-ic { width: 30px; height: 30px; }
  .pt-ic .ic { width: 15px; height: 15px; }
  .pt-txt { font-size: 12.5px; }
  .pt-txt strong { font-size: 13.5px; }

  .cta-row { gap: 10px; }
  .cta-row .btn { flex: 1 1 100%; }
  .btn-lg { padding: 14px 20px; font-size: 15px; }
  /* Stretched into a full-width pill the chip read as an empty bar. On one
     column it works better as plain centred metadata under the button. */
  .build-chip {
    flex: none;
    align-self: center;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px;
  }
  .fineprint { display: none; }

  .buildcard { padding: 13px 15px; }
  .buildcard-rows { gap: 7px 10px; }

  .dock { flex-direction: column; gap: 12px; padding: 12px 16px; }
  .webapp { gap: 11px; }
  .webapp-ic { width: 34px; height: 34px; }
  .webapp-ic .ic { width: 17px; height: 17px; }
  .webapp-txt span { display: none; }
  .webapp-txt strong { font-size: 13.5px; white-space: nowrap; }
  .webapp .btn-sm { padding: 8px 13px; font-size: 12.5px; }

  .status { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stat { min-width: 0; padding: 7px 10px; }
  .stat-name { font-size: 11.5px; }
  .stat-state { font-size: 9.5px; }
}

/* Very short viewports: drop the supporting points before anything clips. */
@media (max-height: 620px) and (min-width: 621px) {
  .points { display: none; }
}
@media (max-height: 560px) and (max-width: 620px) {
  .points li:nth-child(n + 2) { display: none; }
  .buildcard-rows { display: none; }
}

/* The no-scroll lock is a property of the desktop composition. On a phone, or
   on a viewport too short to hold the content honestly, clipping would be worse
   than scrolling — so the page reverts to normal document flow. At the common
   phone sizes it still fits one screen; this only engages below that. */
@media (max-width: 620px), (max-height: 600px) {
  html { height: auto; overflow: visible; }
  body { height: auto; min-height: 100dvh; overflow: visible; }
  .shell { height: auto; min-height: calc(100dvh - 16px); }
  .hero { align-content: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}