/* leyr.stream: product site and get.leyr.stream install page.
   One accent (Leyr green, the mark's colour) on neutral surfaces. Every
   other colour on the page comes from screenshots, never from the chrome.
   Colours are defined once here as custom properties; rules use var(). */

@font-face {
  font-family: "Inter Variable";
  src: url("/brand/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* Leyr green, shared with web/public/icons/leyr-mark.svg. */
  --accent: #1db954;
  --accent-hi: #2ee06a;
  --accent-ink: #2ee06a;
  --on-accent: #04110a;
  --accent-soft: rgb(29 185 84 / 0.12);
  --accent-line: rgb(29 185 84 / 0.35);
  --glow: rgb(29 185 84 / 0.16);

  --bg: #0a0a0b;
  --bg-2: #0e0f10;
  --surface: #131416;
  --surface-2: #191a1d;
  --line: rgb(255 255 255 / 0.07);
  --line-2: rgb(255 255 255 / 0.12);
  --fg: #ededef;
  --fg-2: #a3a3ab;
  --fg-3: #6e6e78;
  --shadow: 0 30px 80px -30px rgb(0 0 0 / 0.8);
  --frame-bar: #1a1b1e;

  --sans: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --r: 12px;
  --r-lg: 18px;
  --wrap: 1160px;
  --gutter: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --accent: #169443; --accent-hi: #1db954; --accent-ink: #127a37; --on-accent: #ffffff;
    --accent-soft: rgb(22 148 67 / 0.10); --accent-line: rgb(22 148 67 / 0.35); --glow: rgb(29 185 84 / 0.12);
    --bg: #fafafa; --bg-2: #f3f3f4; --surface: #ffffff; --surface-2: #f6f6f7;
    --line: rgb(10 10 11 / 0.08); --line-2: rgb(10 10 11 / 0.14);
    --fg: #0d0d0f; --fg-2: #4b4b55; --fg-3: #7a7a85;
    --shadow: 0 30px 70px -36px rgb(10 10 11 / 0.35);
    --frame-bar: #ececee;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --accent: #169443; --accent-hi: #1db954; --accent-ink: #127a37; --on-accent: #ffffff;
  --accent-soft: rgb(22 148 67 / 0.10); --accent-line: rgb(22 148 67 / 0.35); --glow: rgb(29 185 84 / 0.12);
  --bg: #fafafa; --bg-2: #f3f3f4; --surface: #ffffff; --surface-2: #f6f6f7;
  --line: rgb(10 10 11 / 0.08); --line-2: rgb(10 10 11 / 0.14);
  --fg: #0d0d0f; --fg-2: #4b4b55; --fg-3: #7a7a85;
  --shadow: 0 30px 70px -36px rgb(10 10 11 / 0.35);
  --frame-bar: #ececee;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.6 var(--sans); letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .3s var(--ease);
}
.top.scrolled { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; gap: 12px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo .mark { width: 28px; height: 28px; }
.logo .word { height: 16px; width: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a:not(.btn) { text-decoration: none; color: var(--fg-2); font-size: 14.5px; font-weight: 500; padding: 10px 12px; border-radius: 8px; transition: color .2s; }
.nav a:not(.btn):hover { color: var(--fg); }
.nav .hide-sm { display: none; }
@media (min-width: 760px) { .nav .hide-sm { display: inline-block; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 10px;
  font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--fg);
  transition: transform .2s var(--ease), background-color .2s, border-color .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); border-color: var(--fg-3); }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--on-accent); box-shadow: 0 8px 24px -10px var(--accent); }
.btn.primary:hover { background: var(--accent-hi); }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn svg { width: 16px; height: 16px; }

/* ---------- Type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--accent-ink); margin: 0 0 16px; }
.pill { padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--fg-2); font-weight: 500; }
.pill b { color: var(--accent-ink); font-weight: 600; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
h1, h2, h3 { margin: 0; font-weight: 680; letter-spacing: -0.035em; }
h1 { font-size: clamp(40px, 7vw, 76px); line-height: 1.02; }
h2 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.06; margin-bottom: 16px; }
h3 { font-size: 17px; letter-spacing: -0.015em; font-weight: 640; margin-bottom: 6px; }
.lede { font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--fg-2); }
.accent { color: var(--accent-ink); }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: 72px; padding-bottom: 24px; text-align: center; }
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 640px; z-index: -1; pointer-events: none;
  /* The ellipse fades out inside the box, so no edge ever shows. */
  background: radial-gradient(42% 46% at 50% 46%, var(--glow), transparent 72%);
}
.dots { width: min(280px, 60vw); margin: 0 auto 28px; }
.dots circle { transition: fill .4s var(--ease), stroke-opacity .4s var(--ease); }
.hero h1 { max-width: 15ch; margin: 0 auto 20px; }
.hero .lede { max-width: 38rem; margin: 0 auto 32px; }
.cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: 13.5px; color: var(--fg-3); }

/* Product frame */
.stage { position: relative; max-width: 1080px; margin: 64px auto 0; }
.frame { border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.frame .bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--frame-bar); border-bottom: 1px solid var(--line); }
.frame .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.frame .bar span { margin-left: 10px; font-size: 12px; color: var(--fg-3); }
.phone {
  position: absolute; right: -20px; bottom: -48px; width: 23%; min-width: 150px;
  border-radius: 30px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line-2); box-shadow: var(--shadow), 0 0 0 6px var(--bg);
}
@media (max-width: 720px) { .phone { display: none; } }

/* Now playing chip on the hero frame */
.np {
  position: absolute; left: 24px; bottom: -22px; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line-2); box-shadow: var(--shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 13px; text-align: left;
}
.np .art { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--bg-2)); }
.np b { display: block; font-weight: 600; }
.np span { color: var(--fg-2); }
.eq { display: flex; gap: 2px; align-items: flex-end; height: 14px; margin-left: 6px; }
.eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--accent); transform-origin: bottom; transform: scaleY(.4); }
.playing .eq i { animation: eq 1.1s var(--ease) infinite alternate; }
.playing .eq i:nth-child(2) { animation-duration: .8s; }
.playing .eq i:nth-child(3) { animation-duration: 1.3s; }
.playing .eq i:nth-child(4) { animation-duration: .95s; }
@keyframes eq { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }
@media (max-width: 560px) { .np { display: none; } }

/* ---------- Sections ---------- */
section { padding: 112px 0; }
.sec-head { max-width: 46rem; margin-bottom: 56px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head p { margin: 0; }
.rule { border-top: 1px solid var(--line); }

/* Works-with strip */
.with { padding: 96px 0 0; text-align: center; }
.with p { font-size: 13.5px; color: var(--fg-3); margin: 0 0 18px; }
.with ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
.with li { font-weight: 600; font-size: 15px; color: var(--fg-2); letter-spacing: -0.01em; }

/* Feature rows */
.row { display: grid; gap: 36px; align-items: center; grid-template-columns: 1fr; }
.row + .row { margin-top: 112px; }
@media (min-width: 900px) {
  .row { grid-template-columns: 5fr 7fr; gap: 64px; }
  .row.flip { grid-template-columns: 7fr 5fr; }
  .row.flip > .copy { order: 2; }
}
.copy p { margin: 0 0 22px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 30px; color: var(--fg-2); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231db954' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Card grid */
.grid { display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--surface); padding: 28px; min-width: 0; transition: background-color .25s; }
.card:hover { background: var(--surface-2); }
.card p { margin: 0; color: var(--fg-2); font-size: 15px; }
.ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 18px; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line); }
.ic svg { width: 18px; height: 18px; }

/* Gallery */
.gallery { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 56px; }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery figure { margin: 0; }
.gallery figcaption { margin-top: 12px; font-size: 14px; color: var(--fg-2); }

/* Demo band */
.demo-band { display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr; padding: 48px; border-radius: 24px; border: 1px solid var(--line-2); background: radial-gradient(70% 90% at 0% 0%, var(--glow), transparent 60%), var(--surface); }
@media (min-width: 900px) { .demo-band { grid-template-columns: 5fr 7fr; } }
@media (max-width: 560px) { .demo-band { padding: 28px 20px; } }
.demo-band .frame { box-shadow: none; }
.demo-band a.frame { display: block; text-decoration: none; transition: transform .3s var(--ease), border-color .3s; }
.demo-band a.frame:hover { transform: translateY(-3px); border-color: var(--accent-line); }

/* Self-host specs */
.specs { display: grid; gap: 40px 32px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .specs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .specs { grid-template-columns: repeat(4, 1fr); } }
.spec { border-top: 1px solid var(--line-2); padding-top: 20px; }
.spec b { display: block; font-size: 15px; font-weight: 640; margin-bottom: 6px; letter-spacing: -0.01em; }
.spec span { color: var(--fg-2); font-size: 15px; }

/* Closing */
.closing { text-align: center; }
.closing h2 { max-width: 16ch; margin-left: auto; margin-right: auto; }
.closing p { max-width: 34rem; margin: 0 auto 32px; }

footer { padding: 32px 0 calc(32px + env(safe-area-inset-bottom)); color: var(--fg-3); font-size: 14px; border-top: 1px solid var(--line); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
footer .logo .word { height: 13px; }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; }
footer a { text-decoration: none; }
footer a:hover { color: var(--fg); }

/* ---------- Install page ---------- */
.doc { max-width: 780px; }
.doc .hero { text-align: left; padding-bottom: 8px; }
.doc .hero::before { display: none; }
.doc .hero h1 { margin-left: 0; font-size: clamp(38px, 6vw, 60px); }
.doc .hero .lede { margin-left: 0; margin-bottom: 0; }
.doc section { padding: 56px 0 0; }
.doc section:last-of-type { padding-bottom: 96px; }
.doc h2 { font-size: clamp(24px, 3.4vw, 32px); }
.note { border: 1px solid var(--line-2); border-left: 3px solid var(--accent); background: var(--surface); border-radius: var(--r); padding: 16px 18px; color: var(--fg-2); margin: 28px 0 0; }
.note b { color: var(--fg); }
.req { display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 640px) { .req { grid-template-columns: 1fr 1fr; } }
.req > div { background: var(--surface); padding: 24px; min-width: 0; }
.req ul { margin: 10px 0 0; padding-left: 18px; color: var(--fg-2); }
.req li { margin: 4px 0; }
.steps { counter-reset: step; display: grid; }
.step { position: relative; padding: 0 0 36px 52px; min-width: 0; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font: 600 14px var(--sans);
  background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line);
}
.step::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 6px; width: 1px; background: var(--line-2); }
.step:last-child::after { display: none; }
.step p { margin: 0 0 10px; color: var(--fg-2); }
pre {
  margin: 12px 0 0; padding: 18px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line-2);
  font: 13.5px/1.65 var(--mono); color: var(--fg); overflow-x: auto; white-space: pre;
}
pre .c { color: var(--fg-3); }
code { font-family: var(--mono); font-size: .9em; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); color: var(--fg); }
pre code { padding: 0; border: 0; background: none; }

/* ---------- Motion ----------
   Quiet by design: content fades up once as it enters, the hero wordmark
   lights dot by dot once, and the equalizer moves only while in view. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.hero-in { animation: rise .8s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}