/* ===== Terms of Service — matches Figma "ZABA app" design ===== */

:root {
  /* Semantic roles → Figma color tokens (tokens.css) */
  --ink: var(--color-label-link);           /* #1b140f — headings / primary text */
  --black: var(--color-black);                 /* #0b090a — was #000 */
  --muted: var(--color-label-secondary);       /* rgba(60,60,67,.6) — was .55 */
  --link: var(--color-accent-blue);            /* #62b7fc */
  --brand-blue: var(--color-label-blue);         /* #2b9dfb — wordmark, was #3e9bff */
  --badge-bg: var(--color-brown-fill);         /* rgba(161,117,88,.15) — was rgba(139,90,66,.1) */
  --badge-text: var(--color-label-brown);      /* #6b4e3b — was #8b5a42 */
  --callout-bg: var(--color-fill-quaternary);  /* rgba(116,116,128,.08) */
  --callout-icon-bg: var(--color-blue-fill);   /* rgba(98,183,252,.15) */
  --footer-text: var(--color-label-secondary);
  --heart: var(--color-accent-pink);

  --content-width: 902px;
  --body-width: 656px;
}

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

html { background: var(--color-bg-primary); } /* fallback under the bg image */
body {
  font-family: var(--font-family-base);
  color: var(--ink);
  background: transparent;
  line-height: var(--line-height-l);
  -webkit-font-smoothing: antialiased;
}

/* Site-wide decorative background — fixed behind all content, every page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("assets/MainBg.png") top center / cover no-repeat;
  pointer-events: none;
}

a { color: inherit; }

/* ===== Header ===== */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 96px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.brand-logo { width: 32px; height: 32px; object-fit: cover; }
.brand span {
  font-size: var(--font-size-heading-m); /* 24px */
  font-weight: var(--font-weight-bold);
  color: var(--ink);
}
/* Blue wordmark variant (Privacy Policy) */
.brand--blue span { color: var(--brand-blue); }

.main-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
}
.nav-links a {
  font-size: var(--font-size-body-l); /* 18px */
  font-weight: var(--font-weight-medium); /* was 600 */
  color: var(--black);
  text-decoration: none;
}
.nav-links a:hover { opacity: 0.65; }

.flag {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 8px 12px;
  background: var(--black);
  color: var(--color-white);
  border-radius: 20px;
  text-decoration: none;
  font-size: var(--font-size-body-l); /* 18px */
  font-weight: var(--font-weight-medium); /* component label, was 700 */
}
.download-btn i { font-size: 24px; line-height: var(--line-height-s); }
.download-btn:hover { opacity: 0.85; }

/* ===== Page layout ===== */
.page {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 40px 24px 120px;
}

.page-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--badge-bg);
  color: var(--badge-text);
  border-radius: 9999px;
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-extrabold); 
  letter-spacing: 1.04px;
  text-transform: uppercase;
}

/* Title */
.title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.title-block h1 {
  font-size: var(--font-size-heading-xxl); /* was 60px → 64px */
  font-weight: var(--font-weight-bold); /* was 800 */
  color: var(--ink);
  line-height: var(--line-height-s);
}
.updated {
  font-size: var(--font-size-body-l); /* 18px */
  font-weight: var(--font-weight-medium); /* was 600 */
  color: var(--muted);
}

/* Callout */
.callout {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: var(--body-width);
  padding: 24px;
  background: var(--callout-bg);
  border-radius: 32px;
}
.callout-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--callout-icon-bg);
}
.callout-icon i { font-size: 22px; color: var(--link); } /* icon size */
/* Green callout variant (Privacy Policy) */
.callout-icon--green { background: var(--color-green-fill); }
.callout-icon--green i { color: var(--color-accent-green); }
.callout p {
  font-size: var(--font-size-body-l); /* 18px */
  font-weight: var(--font-weight-medium);
  color: var(--ink);
}
.callout p .muted { font-weight: var(--font-weight-regular); }

/* ===== Content sections ===== */
.content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 56px;
}
.content section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.content h2 {
  font-size: var(--font-size-heading-m);
  font-weight: var(--font-weight-extrabold);
  color: var(--ink);
}
.content p {
  font-size: var(--font-size-body-l); /* 18px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-l); 
  color: var(--black);
}
.content p.lead { font-weight: var(--font-weight-bold); }
.content a {
  color: var(--link);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.content a:hover { text-decoration: underline; }
/* Plain underlined link (e.g. Frankfurter) — inherits text color */
.content a.link-plain {
  color: inherit;
  font-weight: var(--font-weight-regular);
  text-decoration: underline;
}

.content ul {
  padding-left: 27px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.content li {
  font-size: var(--font-size-body-l); /* 18px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-l); /* was 27px = 1.5 */
  color: var(--black);
}

/* ===== Footer ===== */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 96px 56px;
}
.copyright {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-body-m); /* 16px */
  font-weight: var(--font-weight-medium); /* was 600 */
  color: var(--footer-text);
}
.copyright i { font-size: 18px; color: var(--heart); } /* icon size */

.footer-nav {
  display: flex;
  gap: 32px;
}
.footer-nav a {
  font-size: var(--font-size-body-l); /* was 17px → 18px */
  font-weight: var(--font-weight-bold);
  color: var(--ink);
  text-decoration: none;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .site-header { padding: 24px; }
  .nav-links { display: none; }
  .title-block h1 { font-size: var(--font-size-heading-xl-mobile); } /* 40px */
  .site-footer {
    flex-direction: column;
    gap: 16px;
    padding: 0 24px 40px;
    text-align: center;
  }
  .footer-nav { flex-wrap: wrap; justify-content: center; gap: 20px; }
}