/* Base layout */
:root {
  --fg: #f2f2f2;
  --muted: #b9b9b9;
  --accent: #ffffff;
  --maxw: 980px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: #000;
  color: var(--fg);
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 4vh 4vw 2vh;
  text-align: center;
}

/* Brand */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.brand-logo {
  width: clamp(160px, 38vw, 360px);
  height: auto;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.06));
}

/* Headline */
.headline {
  font-size: clamp(20px, 3.2vw, 34px);
  font-weight: 700;
  margin: 3vh auto 1vh;
  line-height: 1.25;
}
.headline-sub {
  display: block;
  font-weight: 500;
  color: var(--muted);
  font-size: clamp(14px, 2.2vw, 18px);
  margin-top: 0.5rem;
}

.brand-tagline-container {
  text-align: center;
  margin-top: 0.5em;
}

.brand-tagline {
  font-size: 1.1rem;
  color: #fff; /* or whatever fits your header design */
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}


/* Store section */
.store {
  margin: 3vh auto 2vh;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: 1.2rem;
}

.store-btn { display: inline-block; text-decoration: none; }
.store-btn img {
  display: block;
  width: clamp(180px, 38vw, 340px);
  height: auto;
}

/* Emphasize Apple a little with a subtle glow on the badge image */
.app-store img { filter: drop-shadow(0 0 10px rgba(255,255,255,0.18)); }
.app-store img:hover { filter: drop-shadow(0 0 14px rgba(255,255,255,0.26)); }

.store-note {
  margin: -0.25rem 0 1.25rem;
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 720px;
}

/* Trailer link */
.trailer { margin: 1.5rem 0 0; }
.trailer-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.trailer-link:hover { border-bottom-color: rgba(255,255,255,0.5); }

/* Footer */
.footer {
  margin-top: auto;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.footer a { color: var(--accent); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* Wide screens: slightly tighten widths */
@media (min-width: 960px) {
  .store-btn img { width: clamp(220px, 24vw, 340px); }
}

@media (min-width: 1080px) {
  html > body.privacy-page, body.app-privacy-page {
    background: #ffffff !important;
    background-image: none !important;
  }
}


/* Override background for non-main pages */
body.privacy-page,
body.terms-page,
body.support-page,
body.app-privacy-page {
  background: #ffffff !important;
  background-image: none !important;
}

html > body.privacy-page, body.app-privacy-page {
  background: #ffffff !important;
  background-image: none !important;
}