@font-face { font-family: "Valley Sans"; src: url("/fonts/ValleySans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/Manrope-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/Manrope-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/Figtree-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --gray-950: #09080c;
  --gray-600: #504d60;
  --gray-400: #9f9caf;
  --gray-200: #e3e2e9;
  --white: #ffffff;
  --heading: "Valley Sans", "Manrope", system-ui, sans-serif;
  --body: "Manrope", system-ui, sans-serif;
  --eyebrow: "Figtree", system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--gray-950); color: var(--white); font-family: var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--gray-200); outline-offset: 4px; border-radius: 4px; }

/* Footer, shared by every page */
.footer { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px 20px; width: 100%; }
.socials { display: flex; gap: 24px; align-items: center; justify-content: center; }
.socials img { display: block; }
.socials a { transition: opacity 0.2s; }
.socials a:hover { opacity: 0.75; }
.links { display: flex; gap: 20px; justify-content: center; font-weight: 600; font-size: 16px; line-height: 1.25; }
.links a { color: var(--gray-400); text-decoration: none; }
.links a:hover { color: var(--gray-200); }
.copyright { margin: 0; font-family: var(--eyebrow); font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-600); text-align: center; }

.badges { display: flex; gap: 20px; align-items: center; justify-content: center; }
.badge img { height: 60px; width: auto; }
a.badge { transition: opacity 0.2s; }
a.badge:hover { opacity: 0.85; }

/* Home */
.screen { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.scene { position: absolute; inset: 0; }
.scene-media { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.character { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 860px; }
.character img { width: 100%; height: auto; max-width: none; }
.overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(9, 8, 12, 0) 33.17%, rgba(9, 8, 12, 0.9) 66.35%, var(--gray-950) 100%); }
.content { position: relative; flex: 1; display: flex; flex-direction: column; }
.hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 16px; padding: 40px 0; }
.logo-stacked { width: 168px; height: 93px; }
.tagline { display: flex; flex-direction: column; gap: 8px; padding: 16px; text-align: center; width: 100%; }
.tagline h1 { margin: 0; font-family: var(--heading); font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: -0.02em; }
.tagline p { margin: 0; font-size: 32px; line-height: 1.5; color: var(--gray-200); }

@media (max-width: 1023px) {
  .character { width: 620px; }
  .tagline h1 { font-size: 40px; }
  .tagline p { font-size: 20px; }
}

@media (max-width: 599px) {
  /* Hero sits below a top padding so the character stays visible; the badges
     stay above the fold (293px = hero content below the padding) and the
     footer can fall below it. */
  .hero { flex: none; justify-content: flex-start; padding: 320px 20px 20px; padding-top: max(120px, min(320px, calc(100vh - 293px))); padding-top: max(120px, min(320px, calc(100svh - 293px))); }
  .tagline h1 { font-size: 24px; }
  .tagline p { font-size: 16px; }
}

/* Legal pages */
.legal-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.legal { flex: 1; width: 100%; max-width: 960px; padding: 80px 40px; display: flex; flex-direction: column; gap: 40px; }
.logo-horizontal img { width: 200px; height: 34px; }
.prose { font-size: 16px; line-height: 1.5; overflow-wrap: break-word; }
.prose h1 { margin: 0 0 20px; font-family: var(--heading); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
.prose h2 { margin: 40px 0 12px; font-family: var(--heading); font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; }
.prose p, .prose ul { margin: 0 0 16px; }
.prose ul { padding-left: 20px; }
.prose li + li { margin-top: 8px; }
.prose a { color: var(--white); text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid #24222d; }
.prose th { color: var(--gray-400); font-weight: 600; }

@media (max-width: 599px) {
  .legal { padding: 48px 20px; gap: 32px; }
  .prose h1 { font-size: 32px; }
  .prose table, .prose thead, .prose tbody, .prose tr, .prose th, .prose td { display: block; }
  .prose thead { display: none; }
  .prose tr { padding: 12px 0; border-bottom: 1px solid #24222d; }
  .prose td { border: 0; padding: 2px 0; }
  .prose td:first-child { font-weight: 600; }
}