/* ==========================================================================
   Lanelo product page only (/apps/lanelo/). Loaded after site.css and
   built from its tokens, so every theme works; no other page links it.
   Device bezels stay dark on every theme, the way the hardware looks.
   ========================================================================== */

/* the soft glows behind the devices reach past the viewport: clip them (clip, not hidden: no scroll container) */
#main { overflow-x: clip; }

/* ---------- device frames ---------- */
.ln-phone, .ln-tv { position: relative; margin: 0; }
.ln-phone {
  --r: 40px;
  padding: 9px; border-radius: var(--r);
  background: linear-gradient(150deg, #4b4e58, #1c1d23 36%, #0b0c0f);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 0 0 4px #050506,
              0 50px 90px -36px var(--shadow-2), 0 24px 40px -28px var(--shadow);
}
.ln-phone img { width: 100%; border-radius: calc(var(--r) - 8px); background: #0b0b0f; }
/* punch-hole camera */
.ln-phone::after {
  content: ""; position: absolute; top: 19px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: #040405; box-shadow: inset 0 0 0 2px #17181c;
}
.ln-phone--land::after { top: 50%; left: 19px; margin: -5px 0 0; }
.ln-phone--sm { --r: 30px; padding: 7px; }
.ln-phone--sm::after { top: 15px; width: 8px; height: 8px; margin-left: -4px; }

.ln-tv {
  padding: 8px; border-radius: 14px;
  background: linear-gradient(180deg, #2a2b31, #0d0e11);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 0 0 1px rgba(0, 0, 0, 0.35),
              0 60px 110px -50px var(--shadow-2);
}
.ln-tv img { width: 100%; border-radius: 6px; background: #0b0b0f; }
/* stand */
.ln-tv--stand::after {
  content: ""; position: absolute; left: 50%; bottom: -22px; width: 26%; height: 16px; translate: -50% 0;
  background: linear-gradient(180deg, #1d1e23, #0a0b0d); border-radius: 0 0 8px 8px;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
}
.ln-tv--sm { padding: 5px; border-radius: 10px; }
.ln-tv--sm img { border-radius: 5px; }

/* a frame cut from the player, so the subtitle reads at page size */
.ln-cinema {
  position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: #0b0b0f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 50px 90px -40px var(--shadow-2), 0 24px 40px -30px var(--shadow);
}
.ln-cinema img { width: 100%; }
.ln-cinema::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }

/* ---------- hero stage: a landscape player with the library in front ---------- */
.ln-stage { position: relative; isolation: isolate; width: 100%; max-width: 580px; margin-inline: auto; aspect-ratio: 580 / 520; }
.ln-stage::before {
  content: ""; position: absolute; inset: -4% -12% -8% -8%; z-index: -1;
  background: radial-gradient(60% 54% at 58% 34%, color-mix(in srgb, var(--app) 52%, transparent), color-mix(in srgb, var(--app) 20%, transparent) 60%, transparent),
              radial-gradient(46% 44% at 14% 84%, color-mix(in srgb, #ff8f4a 40%, transparent), transparent),
              radial-gradient(40% 40% at 92% 92%, color-mix(in srgb, #4a7bd8 34%, transparent), transparent);
  filter: blur(36px); animation: breathe 7s ease-in-out infinite;
}
.ln-stage .ln-phone--land { position: absolute; width: 96%; right: 0; top: 0; }
.ln-stage .ln-phone--sm { position: absolute; z-index: 2; width: 32%; left: 1%; bottom: 0; animation: float 8s ease-in-out infinite; }
.ln-badge {
  position: absolute; z-index: 3; right: 3%; bottom: 13%;
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--text); background: var(--nav-bg);
  border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 34px -18px var(--shadow-2);
}
.ln-badge svg { width: 15px; height: 15px; color: var(--app-ink); }

/* CTA note under the hero buttons */
.ln-note { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; font-size: 14px; color: var(--muted); }
.ln-note span { display: inline-flex; align-items: center; gap: 7px; }
.ln-note svg { width: 15px; height: 15px; color: var(--app-ink); }
.ln-note b { color: var(--text); font-weight: 600; }

/* format marquee: app accent instead of gold */
.ln-marquee li::before { background: var(--app); box-shadow: 0 0 12px var(--app); }

/* ---------- numbers strip ---------- */
.ln-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ln-stat {
  position: relative; padding: 26px 24px; border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--glass-2), var(--glass)); box-shadow: var(--card-shadow); overflow: hidden;
}
.ln-stat::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--app), transparent 75%); opacity: 0.85; }
.ln-stat b { display: block; font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.ln-stat span { display: block; margin-top: 10px; font-size: 14px; color: var(--text-2); }

/* ---------- showcase rows (real captures beside copy) ---------- */
.ln-row + .ln-row { margin-top: clamp(72px, 10vw, 128px); }
.ln-shot { position: relative; isolation: isolate; margin-inline: auto; }
.ln-shot::before {
  content: ""; position: absolute; inset: -6% -24%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--app) 44%, transparent) 40%, color-mix(in srgb, var(--app) 22%, transparent) 70%, transparent);
  filter: blur(30px);
}
.ln-shot--port { max-width: 300px; }
.ln-shot--land { max-width: 580px; }
.ln-shot--land::before, .ln-shot--cinema::before { inset: -18% -8%; }
.ln-shot--cinema { max-width: 540px; }
.ln-row h2, .ln-plan h3, .section__head h2, .band h2 { text-wrap: balance; }
.ln-row h2 { font-size: clamp(28px, 3.6vw, 42px); margin-top: 14px; }
.ln-row .split p { margin-top: 16px; }

/* Pro marker, used in headings, lists, cards and the plan cards */
.ln-pro {
  display: inline-flex; align-items: center; padding: 3px 8px 2px; margin-left: 8px; border-radius: 6px; vertical-align: 2px;
  font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.4;
  color: var(--gold-ink); background: linear-gradient(135deg, var(--gold-2), var(--gold) 60%, var(--gold-3));
}
.split li .ln-pro { margin-left: 6px; }
.feature h3 .ln-pro { font-size: 10px; vertical-align: 1px; }

/* ---------- Android TV ---------- */
.ln-tvstage { position: relative; isolation: isolate; max-width: 920px; margin: 0 auto; padding-bottom: 22px; }
.ln-tvstage::before {
  content: ""; position: absolute; inset: 4% -6% 0; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--app) 40%, transparent) 30%, color-mix(in srgb, var(--app) 16%, transparent) 70%, transparent);
  filter: blur(40px); animation: breathe 8s ease-in-out infinite;
}
.ln-tvgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(56px, 7vw, 84px); }
.ln-tvgrid figure { margin: 0; }
.ln-tvgrid figcaption { margin-top: 14px; font-size: 14px; color: var(--text-2); text-align: center; }
.ln-tvpoints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(40px, 5vw, 56px); }

/* ---------- Lanelo and Lanelo Pro side by side ---------- */
.ln-plans { display: grid; grid-template-columns: 1fr 1.08fr; gap: 20px; align-items: stretch; }
.ln-plan {
  position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3.4vw, 38px); border-radius: 24px;
  border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--surface), var(--bg-2)); box-shadow: var(--card-shadow); overflow: hidden; isolation: isolate;
}
.ln-plan--pro { border-color: color-mix(in srgb, var(--gold) 55%, var(--line-2)); box-shadow: 0 40px 90px -46px color-mix(in srgb, var(--gold) 60%, transparent), var(--card-shadow); }
.ln-plan--pro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(560px 300px at 100% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%); }
.ln-plan__head { display: flex; align-items: center; gap: 14px; }
.ln-plan__head img { width: 52px; height: 52px; border-radius: 15px; box-shadow: 0 12px 26px -12px var(--app), 0 0 0 1px var(--line); }
.ln-plan h3 { font-size: 24px; }
.ln-plan h3 .ln-pro { font-size: 12px; }
.ln-plan__sub { margin-top: 4px; font-size: 14.5px; color: var(--text-2); }
.ln-plan ul { margin-top: 24px; display: grid; gap: 12px; }
.ln-plan li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--text-2); }
.ln-plan li svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--app-ink); }
.ln-plan--pro li svg { color: var(--gold-text); }
.ln-plan li b { color: var(--text); font-weight: 600; }
.ln-plan__foot { margin-top: auto; padding-top: 28px; }
.ln-plan__foot p { font-size: 14px; color: var(--muted); }

/* credits and trademarks */
.ln-credits { max-width: 860px; margin-inline: auto; text-align: center; font-size: 13px; color: var(--muted); }
.ln-credits p + p { margin-top: 8px; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .ln-stats { grid-template-columns: 1fr 1fr; }
  .ln-tvpoints { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .ln-stage { max-width: 480px; margin-top: 8px; }
  .ln-plans { grid-template-columns: 1fr; }
  .ln-shot--land { max-width: 520px; }
}
@media (max-width: 640px) {
  .ln-phone { --r: 30px; padding: 7px; }
  .ln-phone::after { top: 15px; width: 8px; height: 8px; margin-left: -4px; }
  .ln-phone--land::after { top: 50%; left: 15px; margin: -4px 0 0; }
  .ln-phone--sm { --r: 22px; padding: 5px; }
  .ln-phone--sm::after { top: 11px; width: 6px; height: 6px; margin-left: -3px; }
  .ln-badge { right: 0; bottom: 6%; font-size: 12px; padding: 7px 12px; }
  .ln-stat { padding: 20px 18px; }
  .ln-shot--port { max-width: 260px; }
  .ln-tvgrid { grid-template-columns: 1fr; gap: 28px; }
  .ln-tv { padding: 5px; border-radius: 10px; }
  .ln-tv img { border-radius: 5px; }
}