/* Shared styling for the legal + support pages (privacy.html, terms.html,
   support.html).

   WHY THESE PAGES ARE PLAIN STATIC HTML, unlike the rest of apps/site:

   Every other page here is a design prototype rendered at RUNTIME - support.js
   parses an <x-dc> template, and the page is built in the browser by React
   (vendored) plus Babel (still fetched from unpkg). That is fine for marketing.
   It is the wrong choice for these three, because:

     • Apple fetches the privacy policy URL during App Store review, and an
       automated fetch or a reviewer with a slow connection to unpkg would get a
       blank page. A blank privacy policy is a rejection.
     • A legal document that only exists if a CDN is up is not a legal document.
     • These pages never change layout, so the harness buys us nothing.

   So they are hand-written, server-rendered, dependency-free HTML: the only
   external requests are the self-hosted fonts and this file, both same-origin.
   Do NOT "modernise" them into the prototype harness.

   The words here must stay in step with the in-app versions:
     privacy.html  ↔ apps/mobile/app/privacy.tsx
     terms.html    ↔ apps/mobile/components/legal/TermsBody.tsx
   Two copies of a policy that disagree is worse than either one alone. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #08090E;
  color: #F4F5F8;
  font-family: Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

a { color: #DBFF2A; text-decoration: none; }
a:hover { color: #e9ff6b; }
::selection { background: #DBFF2A; color: #000; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: #05060A;
}
.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}
/* The real wordmark, not a text approximation.
   150x26 is the exact size the logo is given everywhere else on the site (see
   the dc-import calls in index.html), so the legal pages' header lines up with
   the marketing pages rather than being its own thing.
   Loaded as <img src="/logo.svg"> — same-origin, no runtime. These pages
   deliberately can't use <dc-import>, which needs the React harness. */
.brand { display: block; line-height: 0; }
.brand img {
  display: block;
  width: 150px;
  height: 26px;
}
/* Small phones: the header is logo + three nav links on one row, and at 375px
   the full-width mark starts squeezing the links. */
@media (max-width: 400px) {
  .brand img { width: 124px; height: 21px; }
}
.top nav { display: flex; gap: 18px; flex-wrap: wrap; }
.top nav a { color: #B7BCCB; font-size: 14px; }
.top nav a:hover { color: #F4F5F8; }
.top nav a[aria-current="page"] { color: #DBFF2A; }

/* ── Document body ──────────────────────────────────────────────────────── */
main { padding: clamp(40px, 7vh, 72px) 0 96px; }

h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.05;
  letter-spacing: 0.5px;
  margin: 0 0 14px;
}

.lede { font-size: 16px; color: #B7BCCB; margin: 0 0 8px; }

.updated {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #787F94;
  margin: 0 0 8px;
}

h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #F4F5F8;
  margin: 40px 0 12px;
  padding-left: 12px;
  border-left: 3px solid #DBFF2A;
}

p, li { font-size: 15.5px; color: #B7BCCB; }
p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 20px; }
li { margin-bottom: 7px; }
strong { color: #F4F5F8; font-weight: 700; }

/* Pulled-out block for the clauses that carry the most weight: the child-safety
   statement, and the zero-tolerance community rules App Review looks for. */
.callout {
  margin: 28px 0;
  padding: 20px 22px;
  border: 1px solid rgba(219, 255, 42, 0.34);
  border-radius: 14px;
  background: rgba(219, 255, 42, 0.05);
}
.callout h2 { margin-top: 0; border-left: 0; padding-left: 0; color: #DBFF2A; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #05060A;
  padding: 34px 0;
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: space-between;
  align-items: center;
}
footer p { margin: 0; font-size: 13px; color: #787F94; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer nav a { color: #B7BCCB; font-size: 13px; }
footer nav a:hover { color: #F4F5F8; }