/* Dubplay pre-launch — docs/PRELAUNCH.md.
   A static page, so the design system's tokens are copied here by value
   (app/globals.css is the source; docs/DESIGN-SYSTEM.md the rules). Light-only,
   like the real landing (LANDING-DISCOVERY-SPEC §0): ink on paper, square,
   one face, headings at 500, emphasis is ink not weight. */

:root {
  --font: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  --bg: #ffffff;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --text: #18181b;
  --text-muted: #52525b;
  --text-subtle: #71717a;
  --text-faint: #a1a1aa;
  --ink: #0a0a0a;
  --on-ink: #fafafa;
  --gutter: 20px;
  --measure: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font), ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { font-weight: 500; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Prose emphasis is ink, not weight (DESIGN-SYSTEM § Typography). */
p b, p strong, li b, li strong { font-weight: inherit; color: var(--text); }

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  padding-bottom: 26px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand svg { width: 22px; height: 21px; display: block; }
.top nav a {
  font-size: 14px;
  color: var(--text-muted);
}
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.top nav a[aria-current="page"] { text-decoration: none; font-weight: 500; }

/* ── Eyebrow / kicker ───────────────────────────────────────────────────── */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding-top: clamp(48px, 9vh, 96px); }
.hero .eyebrow { margin-bottom: 28px; }
.hero h1 {
  font-size: clamp(38px, 5.4vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 14em;
  padding-bottom: 0.09em; /* room for descenders under a tight leading */
}
.hero .lede {
  margin-top: 26px;
  max-width: 46ch;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ── The now-playing pillars ────────────────────────────────────────────── */
.pillars {
  position: relative;
  height: 64px;
  margin: clamp(48px, 8vh, 80px) 0;
  display: flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
}
.pillars i {
  display: block;
  flex: 0 0 2px;
  width: 2px;
  min-height: 2px;
  animation-timing-function: cubic-bezier(0.18, 0.85, 0.32, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.pillars .v0 { animation-name: eq-0; }
.pillars .v1 { animation-name: eq-1; }
.pillars .v2 { animation-name: eq-2; }
.pillars .v3 { animation-name: eq-3; }
.pillars .v4 { animation-name: eq-4; }
.pillars .v5 { animation-name: eq-5; }

/* Six shared ten-stop sequences (app/globals.css yg-eq-*): a pillar lands
   somewhere new roughly every fifth of a second, snapping up, easing off. */
@keyframes eq-0 { 0%{height:calc(var(--amp)*18%)}10%{height:calc(var(--amp)*72%)}20%{height:calc(var(--amp)*34%)}30%{height:calc(var(--amp)*90%)}40%{height:calc(var(--amp)*26%)}50%{height:calc(var(--amp)*55%)}60%{height:calc(var(--amp)*12%)}70%{height:calc(var(--amp)*68%)}80%{height:calc(var(--amp)*40%)}90%{height:calc(var(--amp)*22%)}100%{height:calc(var(--amp)*18%)} }
@keyframes eq-1 { 0%{height:calc(var(--amp)*62%)}10%{height:calc(var(--amp)*20%)}20%{height:calc(var(--amp)*84%)}30%{height:calc(var(--amp)*30%)}40%{height:calc(var(--amp)*48%)}50%{height:calc(var(--amp)*14%)}60%{height:calc(var(--amp)*76%)}70%{height:calc(var(--amp)*38%)}80%{height:calc(var(--amp)*58%)}90%{height:calc(var(--amp)*26%)}100%{height:calc(var(--amp)*62%)} }
@keyframes eq-2 { 0%{height:calc(var(--amp)*30%)}10%{height:calc(var(--amp)*88%)}20%{height:calc(var(--amp)*16%)}30%{height:calc(var(--amp)*52%)}40%{height:calc(var(--amp)*74%)}50%{height:calc(var(--amp)*24%)}60%{height:calc(var(--amp)*44%)}70%{height:calc(var(--amp)*96%)}80%{height:calc(var(--amp)*20%)}90%{height:calc(var(--amp)*60%)}100%{height:calc(var(--amp)*30%)} }
@keyframes eq-3 { 0%{height:calc(var(--amp)*46%)}10%{height:calc(var(--amp)*12%)}20%{height:calc(var(--amp)*66%)}30%{height:calc(var(--amp)*28%)}40%{height:calc(var(--amp)*92%)}50%{height:calc(var(--amp)*36%)}60%{height:calc(var(--amp)*18%)}70%{height:calc(var(--amp)*58%)}80%{height:calc(var(--amp)*80%)}90%{height:calc(var(--amp)*32%)}100%{height:calc(var(--amp)*46%)} }
@keyframes eq-4 { 0%{height:calc(var(--amp)*24%)}10%{height:calc(var(--amp)*58%)}20%{height:calc(var(--amp)*40%)}30%{height:calc(var(--amp)*16%)}40%{height:calc(var(--amp)*70%)}50%{height:calc(var(--amp)*100%)}60%{height:calc(var(--amp)*30%)}70%{height:calc(var(--amp)*46%)}80%{height:calc(var(--amp)*14%)}90%{height:calc(var(--amp)*64%)}100%{height:calc(var(--amp)*24%)} }
@keyframes eq-5 { 0%{height:calc(var(--amp)*80%)}10%{height:calc(var(--amp)*34%)}20%{height:calc(var(--amp)*22%)}30%{height:calc(var(--amp)*62%)}40%{height:calc(var(--amp)*18%)}50%{height:calc(var(--amp)*86%)}60%{height:calc(var(--amp)*42%)}70%{height:calc(var(--amp)*24%)}80%{height:calc(var(--amp)*54%)}90%{height:calc(var(--amp)*36%)}100%{height:calc(var(--amp)*80%)} }

@media (prefers-reduced-motion: reduce) {
  /* Held at a height rather than removed: it still reads as playing. */
  .pillars i { animation: none !important; }
}

/* ── The four blocks ────────────────────────────────────────────────────── */
.blocks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}
.blocks > div { border-top: 1px solid var(--border); padding-top: 18px; }
.blocks h2 {
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 12px;
}
.blocks p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-muted);
  text-wrap: pretty;
}
@media (max-width: 1023px) { .blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 639px)  { .blocks { grid-template-columns: 1fr; gap: 28px; } }

/* ── Cue (the landing's arrow line) ─────────────────────────────────────── */
.cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.cue:hover { opacity: 0.7; }
.cue .arrow { display: inline-block; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .cue .arrow { animation: none; } }

/* ── Artists line ───────────────────────────────────────────────────────── */
.artists {
  margin-top: clamp(56px, 9vh, 96px);
  border-top: 1px solid var(--border);
  padding-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 48px;
  align-items: end;
}
.artists p { max-width: 62ch; font-size: 15px; line-height: 1.62; color: var(--text-muted); text-wrap: pretty; }
.artists .eyebrow { margin-bottom: 12px; }
.artists .eyebrow::after { display: none; }
@media (max-width: 639px) { .artists { grid-template-columns: 1fr; } }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot {
  margin-top: auto;
  padding-top: clamp(56px, 9vh, 96px);
}
.foot .wrap {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  padding-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 13px;
  color: var(--text-subtle);
}
.foot a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq-head { padding-top: clamp(40px, 7vh, 72px); }
.faq-head .eyebrow { margin-bottom: 24px; }
.faq-head h1 {
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  padding-bottom: 0.09em;
}
.faq-head .lede { margin-top: 20px; max-width: 52ch; font-size: 17px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }

.toc {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
  color: var(--text-muted);
}
.toc a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.faq { margin-top: clamp(40px, 6vh, 64px); }
/* Each section is its own two-column grid, so a sticky title is constrained
   to ITS section (pushed away as the section leaves) and the section keeps
   a real box for the table-of-contents anchors to scroll to. It was one big
   grid with `display: contents` sections: no box, so the links did nothing,
   and every title stuck to the same spot and stacked. */
.faq section {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 0 64px;
  border-top: 1px solid var(--border);
  margin-bottom: clamp(40px, 7vh, 72px);
  scroll-margin-top: 20px;
}
.faq section > h2 {
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-top: 20px;
  position: sticky;
  top: 20px;
  align-self: start;
}
.faq section > ol {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.faq li { padding: 22px 0 26px; border-bottom: 1px solid var(--border); max-width: 66ch; }
.faq li:last-child { border-bottom: 0; }
.faq h3 { font-size: 15px; color: var(--text-subtle); font-weight: 500; letter-spacing: -0.005em; }
.faq .one { margin-top: 6px; font-size: 20px; line-height: 1.32; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.faq .long { margin-top: 12px; font-size: 15px; line-height: 1.62; color: var(--text-muted); text-wrap: pretty; }
.faq .long + .long { margin-top: 10px; }
@media (max-width: 767px) {
  .faq section { grid-template-columns: 1fr; gap: 0; margin-bottom: 44px; }
  .faq section > h2 { position: static; padding-top: 18px; margin-bottom: 4px; }
  .faq li { padding: 18px 0 20px; }
}
}