/* SongBits holding page.
   Values are taken directly from the SongBits frontend (client/frontend, branch beta-aws):
   theme/theme.tsx, HomePage.styled.tsx, Footer.style.tsx, index.css. */

@font-face { font-family: 'HKGrotesk-Black';   src: url(/assets/fonts/HKGrotesk-Black.woff2) format('woff2');   font-display: swap; }
@font-face { font-family: 'HKGrotesk-Bold';    src: url(/assets/fonts/HKGrotesk-Bold.woff2) format('woff2');    font-display: swap; }
@font-face { font-family: 'HKGrotesk-Regular'; src: url(/assets/fonts/HKGrotesk-Regular.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'HKGrotesk-Light';   src: url(/assets/fonts/HKGrotesk-Light.woff2) format('woff2');   font-display: swap; }

:root {
  --black: #000000;
  --yellow: #FFD600;
  --white: #FFFFFF;
  --gray: #9B9B9B;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--black);
  color: var(--white);
  font-family: 'HKGrotesk-Regular', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ---------- Header (logo only, centred, as on the live site) ---------- */
.header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: center;
  padding-top: 40px;
}
.header a { display: block; line-height: 0; }
.header img { width: 46px; height: 40px; }

/* ---------- Home hero ---------- */
.home { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.bg { position: fixed; inset: 0; z-index: 0; background: #000 url(/assets/img/poster.jpg) center / cover no-repeat; }
.bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #000000, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
@media (prefers-reduced-motion: reduce) { .bg video { display: none; } }

.hero {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 150px 30px 140px 52px;
}
.headline {
  margin: 0;
  font-family: 'HKGrotesk-Black', sans-serif; font-weight: 900;
  font-size: 65px; line-height: 55px; letter-spacing: -0.05em;
  max-width: 800px;
}
.headline .accent { color: var(--yellow); }
.sub {
  margin: 30px 0 0;
  font-family: 'HKGrotesk-Light', sans-serif; font-weight: 200;
  font-size: 20px; line-height: 24px; letter-spacing: -0.02em;
}
.sub span { display: block; }

@media (max-width: 420px) {
  .headline { font-size: 52px; line-height: 46px; }
}
@media (min-width: 768px) {
  .hero { padding: 115px 100px 150px 202px; }
  .headline { font-size: 100px; line-height: 80px; max-width: 820px; }
  .sub { font-size: 24px; margin-top: 34px; }
  .sub span { display: inline; }
}
@media (min-width: 1920px) {
  .headline { font-size: 120px; line-height: 100px; max-width: 960px; }
}

/* ---------- Footer (fixed black bar, as on the live site) ---------- */
.footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  background: var(--black);
  padding: 14px 15px 30px;
  display: flex; align-items: center;
}
.footer .logo { display: block; line-height: 0; }
.footer .logo img { width: 40px; height: 27px; }
.copyright {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 5px;
  padding: 0 10px; text-align: center;
  font-family: 'HKGrotesk-Regular', sans-serif; font-size: 7px; line-height: 9px;
}
.copyright a { text-decoration: none; }
.copyright a:hover { text-decoration: underline; }
.copyright .reg { flex-basis: 100%; color: var(--gray); }
@media (min-width: 768px) {
  .footer { height: 100px; padding: 20px 90px; }
  .footer .logo img { width: 50px; height: 44px; }
  .copyright { font-size: 9px; line-height: 11px; }
}

/* ---------- Legal pages (layout from PageLayout / Legal.tsx) ---------- */
.legal { position: relative; min-height: 100vh; padding: 130px 20px 60px; }
.legal-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr; row-gap: 24px; }
.legal h1 {
  margin: 0 0 16px;
  font-family: 'HKGrotesk-Black', sans-serif; font-weight: 900;
  font-size: 40px; line-height: 44px; letter-spacing: -0.05em;
  color: var(--yellow); text-transform: lowercase;
}
.quick h2 {
  margin: 0 0 20px;
  font-family: 'HKGrotesk-Black', sans-serif; font-weight: 900;
  font-size: 24px; letter-spacing: -0.05em; color: var(--yellow);
}
.quick a {
  display: block; margin: 0 0 24px 20px;
  font-family: 'HKGrotesk-Regular', sans-serif; font-size: 18px; text-decoration: none;
}
.quick a:hover, .quick a[aria-current] { color: var(--yellow); }
.legal-body { color: var(--white); min-width: 0; overflow-wrap: anywhere; }
.legal-foot { margin-top: 60px; font-size: 12px; color: var(--gray); }
.legal-foot a { color: var(--white); }
@media (min-width: 768px) {
  .legal { padding: 115px 40px 80px; }
  .legal h1 { font-size: 46px; line-height: 50px; }
  .legal-grid { grid-template-columns: minmax(0, 490px) 260px; justify-content: center; column-gap: 46px; }
  .legal-grid h1 { grid-column: 1 / -1; }
  .quick { padding-top: 6px; }
}
@media (max-width: 767px) { .legal h1 { order: -2; } .quick { order: -1; } .quick h2 { font-size: 20px; } .quick a { margin-bottom: 14px; font-size: 16px; } }

/* The original legal stylesheet carries print-page margins from its Word source; neutralise them here. */
.legal-body .terms, .legal-body .privacy-policy { margin: 0 !important; }
.legal-body img { max-width: 100%; height: auto; }
.legal-body table { max-width: 100%; }