/* Pitch Riders front page for visitors. Dark record-shop look; the app itself keeps its own themes. */
:root{--bg:#0b0b0c;--card:#151517;--line:#2a2a2e;--ink:#f2efe8;--muted:#9a978f;--neon:#c6ff00;--amber:#e2a33b}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.lp{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--neon)}
.lp-top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;max-width:1100px;margin:0 auto}
.lp-logo{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-size:14px}
.lp-dot{width:12px;height:12px;border-radius:50%;background:var(--neon);box-shadow:0 0 12px var(--neon)}
.lp-toplink{color:var(--ink);text-decoration:none;border:1px solid var(--line);padding:6px 14px;border-radius:999px;font-size:14px}
.lp-toplink:hover{border-color:var(--neon);color:var(--neon)}

.lp-hero{max-width:1100px;margin:0 auto;padding:24px 20px 48px;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.lp-kicker{margin:0 0 8px;color:var(--amber);text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:700}
.lp h1{margin:0 0 16px;font-size:clamp(44px,8vw,84px);line-height:.95;font-weight:900;letter-spacing:-.03em}
.lp h1 span{color:var(--neon)}
.lp-lead{margin:0 0 20px;color:#cfccc4;font-size:18px;max-width:34em}
.lp-genres{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-wrap:wrap;gap:8px}
.lp-genres li{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--muted)}
.lp-cta{display:inline-block;background:var(--neon);color:#000;text-decoration:none;font-weight:800;padding:14px 26px;border-radius:999px;font-size:17px}
.lp-cta:hover{filter:brightness(1.1)}

/* the turntable */
.lp-deck{position:relative;aspect-ratio:1;max-width:420px;width:100%;justify-self:center;background:#18181b;border-radius:18px;border:1px solid var(--line);box-shadow:0 30px 60px #000a}
.lp-record{position:absolute;inset:8%;border-radius:50%;
  background:repeating-radial-gradient(circle,#111 0 2px,#1c1c1f 2px 4px);box-shadow:inset 0 0 0 2px #000,0 8px 30px #000;
  animation:spin 3.6s linear infinite}
.lp-record::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,#fff0 0 40deg,#ffffff14 60deg,#fff0 80deg,#fff0 220deg,#ffffff10 240deg,#fff0 260deg)}
.lp-labelc{position:absolute;inset:34%;border-radius:50%;background:var(--neon);color:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1}
.lp-labelc b{font-size:clamp(14px,3vw,22px);letter-spacing:.15em}
.lp-labelc small{font-size:10px}
.lp-labelc::after{content:"";width:8px;height:8px;border-radius:50%;background:#18181b;margin-top:4px}
.lp-arm{position:absolute;top:8%;right:8%;width:4%;height:52%;background:linear-gradient(#ccc,#888);border-radius:6px;transform-origin:50% 4%;transform:rotate(24deg);box-shadow:0 4px 10px #000}
.lp-arm::before{content:"";position:absolute;top:-6%;left:-90%;width:280%;aspect-ratio:1;border-radius:50%;background:#2b2b30;border:2px solid #444}
.lp-arm::after{content:"";position:absolute;bottom:-4%;left:-40%;width:180%;height:9%;background:#ddd;border-radius:3px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lp-record{animation:none}html{scroll-behavior:auto}}

.lp-grid{max-width:1100px;margin:0 auto;padding:0 20px 56px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lp-grid article{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.lp-grid article span{font-size:26px}
.lp-grid h2{margin:8px 0 6px;font-size:18px}
.lp-grid p{margin:0;color:var(--muted);font-size:15px}

.lp-login{max-width:520px;margin:0 auto 56px;padding:28px 22px;background:var(--card);border:1px solid var(--line);border-radius:18px;text-align:center}
.lp-login h2{margin:0 0 6px;font-size:28px}
.lp-free{margin:0 0 20px;color:var(--muted)}
.lp-google{display:block;background:var(--neon);color:#000;text-decoration:none;font-weight:800;padding:14px;border-radius:999px;font-size:17px}
.lp-google:hover{filter:brightness(1.1)}
.lp-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:20px 0 12px}
.lp-or::before,.lp-or::after{content:"";flex:1;height:1px;background:var(--line)}
.lp-mail{display:flex;gap:8px}
.lp-mail input{flex:1;min-width:0;background:#0b0b0c;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:12px 16px;font:inherit}
.lp-mail input:focus{outline:none;border-color:var(--neon)}
.lp-mail button{background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:12px 16px;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.lp-mail button:hover{border-color:var(--neon);color:var(--neon)}
.lp-small{margin:14px 0 0;color:var(--muted);font-size:13px}
.lp-notice{background:#c6ff0014;border:1px solid var(--neon);border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:14px}

.lp-foot{max-width:1100px;margin:0 auto;padding:20px 20px 36px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px}
.lp-foot a{color:var(--muted);text-decoration:none}
.lp-foot a:hover{color:var(--neon)}
.lp-foot a:first-child{color:var(--amber);margin-right:auto}

@media (max-width:820px){
  .lp-hero{grid-template-columns:1fr;padding-top:8px}
  .lp-deck{max-width:300px;order:-1}
  .lp-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .lp-top{padding:12px 16px}
  .lp-hero,.lp-grid,.lp-foot{padding-left:16px;padding-right:16px}
  .lp-deck{max-width:220px}
  .lp-lead{font-size:16px}
  .lp-grid{grid-template-columns:1fr;gap:10px}
  .lp-grid article{display:grid;grid-template-columns:34px 1fr;column-gap:12px;padding:14px 16px}
  .lp-grid article span{grid-row:span 2;font-size:24px}
  .lp-grid h2{margin:0 0 2px;font-size:16px}
  .lp-grid p{font-size:14px}
  .lp-login{margin:0 16px 40px}
  .lp-mail{flex-direction:column}
  .lp-foot a:first-child{width:100%}
}