/* ─────────────────────────────────────────────────────────────────────────
   legal.css — shared styling for MatchMode policy pages (Terms, Privacy,
   Refunds). Mirrors the marketing Landing page theme (tokens, fonts, dark
   surface) so the legal pages read as part of the same product.
   These pages are always dark, matching Landing.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #06090F;
  --surface: #101D27;
  --card: #0D0F14;
  --blue: #1A75FF;
  --amber: #F59E0B;
  --heading: #F1F5F9;
  --text: #AEBED0;
  --muted: #6B7C90;
  --border: rgba(255, 255, 255, .08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Barlow', sans-serif;
  background:
    radial-gradient(120% 70% at 82% -10%, rgba(26, 117, 255, .12), transparent 60%),
    radial-gradient(90% 60% at 4% 110%, rgba(245, 158, 11, .07), transparent 55%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection {
  background: rgba(26, 117, 255, .3);
  color: #fff;
}

a {
  color: inherit;
}

/* ── top bar (mirrors Landing nav) ── */
.legal-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(6, 9, 15, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.legal-nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 820px;
  margin: 0 auto;
  padding: 16px 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.wordmark {
  font-family: 'Barlow Condensed';
  font-weight: 800;
  letter-spacing: .13em;
  font-size: 20px;
  line-height: 1;
}

.wordmark .m {
  color: var(--blue);
}

.wordmark .o {
  color: var(--amber);
}

.wordmark .d {
  color: #7C8CA1;
  margin: 0 2px;
}

.legal-nav .home {
  font-family: 'Barlow Condensed';
  font-weight: 600;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 999px;
  transition: color .2s, border-color .2s, background .2s;
}

.legal-nav .home:hover {
  color: var(--heading);
  border-color: var(--blue);
  background: rgba(26, 117, 255, .08);
}

/* ── document body ── */
.legal-main {
  flex: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

.legal-title {
  font-family: 'Bebas Neue';
  font-weight: 400;
  font-size: clamp(40px, 7vw, 64px);
  line-height: .95;
  letter-spacing: .01em;
  color: var(--heading);
}

.legal-kicker {
  font-family: 'Barlow Condensed';
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  color: var(--muted);
  margin: 18px 0 26px;
}

.legal-main h2 {
  font-family: 'Barlow Condensed';
  font-weight: 700;
  font-size: 23px;
  letter-spacing: .01em;
  color: var(--heading);
  margin: 38px 0 12px;
}

.legal-main h3 {
  font-family: 'Barlow Condensed';
  font-weight: 700;
  font-size: 17px;
  color: var(--heading);
  margin: 24px 0 8px;
}

.legal-main p,
.legal-main li {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 13px;
}

.legal-main ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.legal-main li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
}

.legal-main li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--blue);
}

.legal-main strong {
  color: var(--heading);
  font-weight: 600;
}

.legal-main a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.legal-main a:hover {
  text-decoration: underline;
}

.legal-intro {
  font-size: 16.5px;
  color: var(--text);
}

.legal-seealso {
  margin-top: 36px;
  font-size: 13px;
  color: var(--muted);
}

/* ── footer (mirrors Landing foot-base) ── */
.legal-foot {
  border-top: 1px solid var(--border);
  padding: 30px 24px;
}

.legal-foot-in {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
}

.legal-foot a {
  color: var(--muted);
  text-decoration: none;
}

.legal-foot a:hover {
  color: var(--heading);
  text-decoration: underline;
}

.legal-foot .links a + a {
  margin-left: 14px;
}

@media (max-width: 560px) {
  .legal-main {
    padding: 40px 20px 56px;
  }

  .legal-foot-in {
    flex-direction: column;
    align-items: flex-start;
  }
}