/* ============================================================
   BIG TUNE — landing page
   Built on the product's OWN tokens (styles.css): Plus Jakarta Sans,
   #FA2D48, the light grounds, the nine stage colors. The page should
   look like the thing it is selling, not like a magazine about it.
   ============================================================ */

:root{
  --lp-ground:#F5F5F7;
  --lp-surface:#FFFFFF;
  --lp-surface2:#F5F5F7;
  --lp-line:#E6E6EA;
  --lp-line2:#D8D8DE;
  --lp-ink:#16161A;
  --lp-ink2:#5E5E66;
  --lp-ink3:#8E8E96;
  --lp-accent:#FA2D48;

  /* the nine production stages, straight out of data.js */
  --st1:#94A3B8; --st2:#A78BFA; --st3:#38BDF8; --st4:#06B6D4; --st5:#FBBF24;
  --st6:#FB923C; --st7:#F472B6; --st8:#34D399; --st9:#10B981;

  --lp-sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
  --lp-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --lp-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.14);
  --lp-shadow-lift:0 2px 8px rgba(0,0,0,.06), 0 28px 64px -28px rgba(22,22,26,.34);

  --lp-r:18px; --lp-r-sm:12px;
  --lp-pad:20px;
  --lp-max:1120px;
  --lp-sec:84px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.lp-body{
  margin:0;
  background:var(--lp-ground);
  color:var(--lp-ink);
  font-family:var(--lp-sans);
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{margin:0; letter-spacing:-.035em; text-wrap:balance; font-weight:800; line-height:1.06}
p{margin:0}

.lp-wrap{ max-width:var(--lp-max); margin:0 auto; padding:0 var(--lp-pad) }

/* ---------------- nav ---------------- */
.lp-nav{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--lp-ground) 86%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.lp-nav.stuck{ border-bottom-color:var(--lp-line) }
.lp-nav-in{ display:flex; align-items:center; gap:12px; height:60px }
.lp-mark{ display:flex; align-items:center; gap:9px; text-decoration:none; font-weight:800; letter-spacing:-.03em; font-size:17px }
.lp-mark svg{ width:28px; height:28px; border-radius:8px; flex:0 0 28px }
.lp-chip{
  font-size:11px; font-weight:700; letter-spacing:.04em;
  padding:4px 9px; border-radius:999px;
  background:var(--lp-surface); border:1px solid var(--lp-line); color:var(--lp-ink2);
}
.lp-nav-sp{ flex:1 1 auto }
.lp-textlink{ font-size:14px; font-weight:600; color:var(--lp-ink2); text-decoration:none; padding:8px 10px }
.lp-textlink:hover{ color:var(--lp-ink) }

.lp-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 18px; border-radius:999px; border:0;
  background:var(--lp-accent); color:#fff;
  font:inherit; font-size:14px; font-weight:700; text-decoration:none;
  cursor:pointer; white-space:nowrap;
  transition:transform .14s ease, filter .18s ease;
}
.lp-btn:hover{ filter:brightness(1.06) }
.lp-btn:active{ transform:scale(.97) }
.lp-btn.ghost{
  background:var(--lp-surface); color:var(--lp-ink);
  border:1px solid var(--lp-line2);
}
.lp-btn.lg{ padding:14px 26px; font-size:15px }
.lp-btn:focus-visible,.lp-textlink:focus-visible{ outline:2px solid var(--lp-accent); outline-offset:3px }

/* ---------------- hero ---------------- */
.lp-hero{ padding:72px 0 0; text-align:center }
.lp-eyebrow{
  font-family:var(--lp-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--lp-ink3); margin-bottom:18px;
}
.lp-h1{ font-size:clamp(38px,6.4vw,70px) }
.lp-deck{
  margin:20px auto 0; max-width:50ch;
  font-size:clamp(16px,2vw,19px); line-height:1.5; color:var(--lp-ink2);
}
.lp-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px }
.lp-micro{ margin-top:16px; font-size:13px; color:var(--lp-ink3) }

/* the stage spectrum, as the product actually colours it */
.lp-stages{
  display:flex; gap:6px; justify-content:center; flex-wrap:wrap;
  margin:40px auto 0; max-width:760px;
}
.lp-stage{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:999px;
  background:var(--lp-surface); border:1px solid var(--lp-line);
  font-size:12px; font-weight:700; color:var(--lp-ink2);
}
.lp-stage i{ width:8px; height:8px; border-radius:50%; flex:0 0 8px }

/* ---------------- screenshot plates ---------------- */
.lp-plate{
  border-radius:var(--lp-r);
  background:var(--lp-surface);
  border:1px solid var(--lp-line);
  box-shadow:var(--lp-shadow-lift);
  overflow:hidden;
}
.lp-plate img{ width:100%; height:auto }
.lp-hero-plate{ margin-top:52px }
/* only the top of the app, so the hero does not run on forever */
.lp-hero-plate .lp-crop{ max-height:min(62vh,620px); overflow:hidden }

/* ---------------- feature sections ---------------- */
.lp-sec{ padding-top:var(--lp-sec) }
.lp-grid{
  display:grid; gap:36px; align-items:center;
  grid-template-columns:1fr;
}
.lp-copy{ max-width:46ch }
.lp-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--lp-ink2); margin-bottom:14px;
}
.lp-kicker i{ width:9px; height:9px; border-radius:50%; flex:0 0 9px }
.lp-h2{ font-size:clamp(26px,3.6vw,38px) }
.lp-body-t{ margin-top:14px; font-size:16px; color:var(--lp-ink2); line-height:1.6 }
.lp-points{ margin:20px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px }
.lp-points li{
  position:relative; padding-left:22px; font-size:15px; color:var(--lp-ink2);
}
.lp-points li::before{
  content:""; position:absolute; left:0; top:8px;
  width:7px; height:7px; border-radius:50%; background:var(--lp-accent);
}
.lp-points b{ color:var(--lp-ink); font-weight:700 }

/* ---------------- what's next ---------------- */
.lp-next{ margin-top:var(--lp-sec) }
.lp-next-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:26px }
.lp-next-row{
  display:flex; align-items:center; gap:14px;
  padding:18px 20px; border-radius:var(--lp-r-sm);
  background:var(--lp-surface); border:1px solid var(--lp-line);
}
.lp-next-row b{ font-size:15px; font-weight:700 }
.lp-next-row span{ font-size:14px; color:var(--lp-ink2) }
.lp-tag{
  margin-left:auto; flex:0 0 auto;
  font-family:var(--lp-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
  background:var(--lp-surface2); color:var(--lp-ink3); border:1px solid var(--lp-line);
}

/* ---------------- sign up ---------------- */
.lp-close{ padding:var(--lp-sec) 0 0; text-align:center }
.lp-form{
  margin:30px auto 0; max-width:420px; text-align:left;
  background:var(--lp-surface); border:1px solid var(--lp-line);
  border-radius:var(--lp-r); padding:24px;
  box-shadow:var(--lp-shadow);
}
.lp-field{ margin-bottom:14px }
.lp-field label{
  display:block; font-size:12px; font-weight:700; letter-spacing:.03em;
  color:var(--lp-ink2); margin-bottom:6px;
}
.lp-field input,.lp-field select{
  width:100%; padding:11px 13px; border-radius:var(--lp-r-sm);
  border:1px solid var(--lp-line2); background:var(--lp-surface);
  font:inherit; font-size:15px; color:var(--lp-ink);
}
.lp-field input:focus,.lp-field select:focus{
  outline:0; border-color:var(--lp-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--lp-accent) 18%, transparent);
}
.lp-form .lp-btn{ width:100%; margin-top:4px }
.lp-form-note{ margin-top:12px; font-size:13px; color:var(--lp-ink3); text-align:center }
.lp-signin{ margin-top:14px; font-size:14px; color:var(--lp-ink2); text-align:center }
.lp-signin a{ color:var(--lp-accent); font-weight:700; text-decoration:none }
.lp-form-ok{ margin-top:12px; font-size:14px; color:#13A36B; text-align:center }
.lp-form-error{ margin-top:12px; font-size:14px; color:var(--lp-accent); text-align:center }

.lp-footer{
  margin-top:var(--lp-sec); padding:28px 0 40px;
  border-top:1px solid var(--lp-line);
  font-size:13px; color:var(--lp-ink3);
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
}
.lp-footer .sp{ flex:1 1 auto }

/* ---------------- ≥880px ---------------- */
@media (min-width:880px){
  :root{ --lp-pad:32px; --lp-sec:116px }
  .lp-hero{ padding-top:96px }
  .lp-grid{ grid-template-columns:5fr 7fr; gap:56px }
  .lp-grid.flip .lp-copy{ order:2 }
  .lp-grid.flip .lp-plate{ order:1 }
  .lp-next-grid{ grid-template-columns:1fr 1fr }
}
@media (min-width:1180px){
  :root{ --lp-pad:40px }
}

/* a wide plate must never make the body scroll sideways */
@media (max-width:879px){
  .lp-plate{ border-radius:var(--lp-r-sm) }
  .lp-hero-plate .lp-crop{ max-height:none }
}

@media (prefers-reduced-motion: reduce){
  .lp-btn,.lp-nav{ transition:none }
}

/* The app is a light product. The landing page commits to that too, and
   paints its own ground so it never borrows the host's theme. */