/* ─────────────────────────────────────────────────────────────
   BeatBytes.

   Type is system-ui — SF on a Mac or iPhone, the face the app itself
   uses. On the devices that matter, the page is set in the product's
   own typeface.

   Every --bloom-* was extracted from that section's screenshot by
   dominant-chroma clustering (quantise, then weight frequency by
   saturation^2.2). A flat average drowns an accent in black and white;
   this finds the colour a person actually sees. Where the extractor
   found no confident hue, the section is left NEUTRAL rather than
   given an invented one.
   ───────────────────────────────────────────────────────────── */
:root {
  --ground:   #0B0B0D;   /* Color.bb.bg */
  --raised:   #141416;
  --surface:  #1C1C1E;   /* Color.bb.surface */
  --ink:      #F2F2F4;
  --ink-2:    #9A9AA0;
  --ink-3: #8A8A8F;
  --hairline: rgba(255,255,255,.07);
  --edge:     rgba(255,255,255,.14);

  /* The app's primary CTA is Color.bb.onLight: white fill, black label. */
  --cta:      #F2F2F4;
  --cta-ink:  #0B0B0D;
  /* Color.bb.accent — the actual logo blue from the app's design system, not a
     tint of it. 5.59:1 on the ground. The only brand colour on the page. */
  --brand:    #2E86FF;

  --bloom-red:   #AE2826;  /* Midnight Marauders sleeve,  hue 1.3  sat .78 */
  --bloom-amber: #996044;  /* the music video frame,      hue 20   sat .42 */
  --bloom-pink:  #F43BCD;  /* Liked Songs generated cover, hue 313 sat .76 */
  /* Search and the artist page returned NO confident hue — both are mostly
     dark chrome — so those sections carry neutral light, not an invented one. */

  --maxw: 1080px;
  --sans: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--sans);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.06; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(34px, 4.2vw, 54px); }
h2 { font-size: clamp(27px, 3.1vw, 40px); }

.lede { color: var(--ink-2); font-size: 17px; max-width: 46ch; margin: 18px 0 0; }
.lede b { color: var(--ink); font-weight: 400; }

.label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 16px;
}

.section { position: relative; padding: clamp(88px, 9vw, 132px) 24px; overflow: hidden; }
.wrap { max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 1; }

/* Depth is light, never shadow. Pulled well back — the page reads
   near-black and the colour lives mostly inside the screenshots. */
.bloom {
  position: absolute; inset: -12% -8%; pointer-events: none; z-index: 0;
  opacity: var(--o, .30);
  background: radial-gradient(46% 42% at var(--bx,70%) var(--by,44%), var(--c) 0%, transparent 72%);
  filter: blur(10px);
}

.navbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11,11,13,.72); backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; max-width: var(--maxw); margin: 0 auto;
}
.wordmark { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -0.025em; }
/* The app icon's glyph, lifted off its azure gradient and rendered pure white —
   the page is monochrome chrome, so the mark is too. Source of truth is
   AppIcon-1024.png; regenerate from there if the icon ever changes. */
.wordmark img { display: block; height: 26px; width: auto; }
.wordmark i { color: var(--brand); font-weight: 700; font-style: normal; }

.cta {
  display: inline-flex; align-items: center;
  background: var(--cta); color: var(--cta-ink);
  font-weight: 550; font-size: 15px;
  border: 0; border-radius: 999px; padding: 11px 20px;
  text-decoration: none; cursor: pointer; transition: opacity .16s ease;
}
.cta:hover { opacity: .86; }
.cta.big { font-size: 16px; padding: 13px 24px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.note { color: var(--ink-3); font-size: 13px; margin: 14px 0 0; }

.device { display: block; width: auto; height: auto; max-width: 100%; border-radius: 22px;
          border: 1px solid var(--hairline); border-top-color: var(--edge); }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* 1 · hero — wide, central, bleeding off the bottom */
/* Centred lockup: the shot is a narrow phone rather than a full-width
   desktop window, so left-aligned copy over it reads lopsided. */
.hero { padding-top: clamp(40px, 6vw, 76px); padding-bottom: 0; text-align: center; }
.hero h1 { max-width: 16ch; margin: 0 auto; }
.hero .lede { margin-left: auto; margin-right: auto; }
/* A phone must stay phone-sized. Linear can run its shot 880px wide because
   theirs is a desktop window; upscaling a 402pt phone UI to that width just
   looks zoomed. Natural width, centred, bleeding off the bottom. */
.hero-shot { margin: clamp(40px, 5vw, 64px) auto 0; max-width: 340px; position: relative; }
.hero-shot img { display: block; width: 100%; height: auto; border-radius: 22px 22px 0 0;
                 border: 1px solid var(--hairline); border-top-color: var(--edge); border-bottom: 0; }

/* 2 · the thesis */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 40px); margin-top: 44px; }
.pair figure { margin: 0; position: relative; isolation: isolate; }
.pair figure::before {
  content: ""; position: absolute; inset: -14% -18% -4%; z-index: -1;
  background: radial-gradient(54% 48% at 50% 46%, var(--c) 0%, transparent 74%);
  opacity: .46; filter: blur(14px);
}
.pair img { width: 100%; height: auto; }
.pair figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: .09em; color: var(--ink-3); margin-top: 14px; }
.swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; }

/* 4 · lights out — no hue sampled; NEUTRAL light only */
.lights-out { border-top: 1px solid var(--hairline); }
.lights-out .wrap { display: grid; grid-template-columns: 1fr .78fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.lights-out .shot { position: relative; isolation: isolate; }
.lights-out .shot::before {
  content: ""; position: absolute; inset: -30% -25%; z-index: -1;
  background: radial-gradient(50% 46% at 55% 50%, rgba(255,255,255,.075) 0%, transparent 74%);
  filter: blur(16px);
}
.lights-out img { width: 100%; height: auto; border-radius: 16px; }

/* 5 · close */
.close { border-top: 1px solid var(--hairline); text-align: center; }
.close-mark { display: block; height: 54px; width: auto; margin: 0 auto 26px; opacity: .92; }
.close h2 { max-width: 18ch; margin: 0 auto; }
.close .lede { margin: 18px auto 0; }
.signup { display: flex; gap: 8px; justify-content: center; margin: 30px 0 0; flex-wrap: wrap; }
.signup input { background: var(--surface); border: 1px solid var(--hairline); color: var(--ink);
                border-radius: 999px; padding: 12px 18px; font: inherit; font-size: 15px; min-width: 260px; }
.signup input::placeholder { color: var(--ink-3); }

footer { border-top: 1px solid var(--hairline); padding: 32px 24px 48px; color: var(--ink-3); font-size: 13px; }
footer .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--ink-2); text-decoration: none; margin-left: 20px; }
footer a:hover { color: var(--ink); }

@media (max-width: 860px) {
  .lights-out .wrap { grid-template-columns: 1fr; gap: 36px; }
  .pair { grid-template-columns: 1fr; gap: 36px; }
  .hero h1 { max-width: none; }
}


/* ── document pages (privacy / support / terms) ─────────── */
.doc { max-width: 720px; margin: 0 auto; padding: clamp(56px,7vw,88px) 24px clamp(72px,9vw,120px); }
.doc h1 { font-size: clamp(30px,3.6vw,44px); font-weight: 600; letter-spacing: -.025em; margin: 0 0 10px; }
.doc .updated { color: var(--ink-3); font-size: 13px; font-family: var(--mono); margin: 0 0 40px; }
.doc h2 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; margin: 40px 0 12px; }
.doc p, .doc li { color: var(--ink-2); font-size: 16px; line-height: 1.68; margin: 0 0 14px; }
.doc strong { color: var(--ink); font-weight: 500; }
.doc ul { margin: 0 0 14px; padding-left: 20px; }
.doc li { margin-bottom: 8px; }
.doc a { color: var(--brand); text-decoration: none; }
.doc a:hover { text-decoration: underline; }
.doc .callout {
  background: var(--raised); border: 1px solid var(--hairline); border-top-color: var(--edge);
  border-radius: 14px; padding: 18px 20px; margin: 0 0 32px;
}
.doc .callout p:last-child { margin-bottom: 0; }
.doc code { font-family: var(--mono); font-size: .88em; color: var(--ink); }
.backlink { display: inline-block; margin-top: 40px; color: var(--ink-2); text-decoration: none; font-size: 15px; }
.backlink:hover { color: var(--ink); }