/* ═══════════════════════════════════════════════════════════════
   LEGAL.CSS — shared light-touch redesign layer for faq.html,
   privacy.html, terms.html. These three pages are plain text/legal
   content with an identical structure (sub-hero + body copy), so one
   shared file is used instead of duplicating it three times — unlike
   the unique-layout pages elsewhere, which each get their own file.
   Brings them into the same visual language: Big Shoulders Display
   type, orange accent, black atmosphere + grain.
   ═══════════════════════════════════════════════════════════════ */

body {
  --cream: #F3ECDF;
  --accent: var(--orange);
  --ink: #0c0a08;
  --display: 'Big Shoulders Display', Impact, sans-serif;
  --mono: 'Space Mono', 'Space Grotesk', monospace;
  --max: 100%;
  background: #000 !important;
  background-image: none !important;
  color: var(--cream);
}
body::after {
  display: block !important; content: ''; position: fixed; inset: 0; z-index: -1;
  pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 40% at 10% 8%, rgba(247,147,30,.16), transparent),
    radial-gradient(ellipse 50% 38% at 92% 14%, rgba(233,30,99,.14), transparent),
    radial-gradient(ellipse 55% 42% at 50% 88%, rgba(47,167,167,.12), transparent);
}
main, .footer { color: var(--cream); }
main p { color: rgba(243,236,223,.62); }

/* Shared --max (1140px) caps this page's sections — uncap to match the
   full-width redesigned pages elsewhere on the site. */
.wrap { max-width: 100%; }
.legal-content { max-width: 680px; margin: 0; padding: clamp(48px,7vw,80px) var(--pad) clamp(60px,9vw,100px); }
.sub-hero { max-width: none; margin: 0; border-color: rgba(243,236,223,.1) !important; }
.sub-hero h1 {
  font-family: var(--display); text-transform: uppercase; font-weight: 900; letter-spacing: 0;
  font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: .96; margin: .4rem 0 1.2rem; color: var(--cream);
  max-width: none;
}
.sub-hero .eyebrow { color: var(--accent); }
.sub-hero p { font-size: 1.1rem; line-height: 1.7; max-width: 640px; color: rgba(243,236,223,.62); font-weight: 400; }

main h2, main h3 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0; color: var(--cream);
}

/* ── NAV / FOOTER: match the new palette ── */
.nav { background: transparent; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(0,0,0,.9); backdrop-filter: blur(16px); border-color: rgba(243,236,223,.1); }
.nav-inner { padding-left: clamp(12px, 2vw, 20px); }
.nav-brand img { height: 44px; width: 44px; }
.nav-brand-word { color: var(--cream); font-family: var(--display); font-weight: 900; letter-spacing: .04em; }
.nav-links a { color: rgba(243,236,223,.6); }
.nav-links a:hover, .nav-links a.active { color: var(--cream); }
.nav-cta { background: var(--accent); border: 1px solid var(--accent); padding: .6rem 1.2rem; font-family: var(--mono); text-transform: uppercase; font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--ink); transition: background .2s ease, color .2s ease; }
.nav-cta:hover { background: transparent; color: var(--cream); }
.footer { border-color: rgba(243,236,223,.1) !important; }
.footer-col-heading { font-family: var(--mono) !important; color: rgba(243,236,223,.5); }