/*
 * Shared styles for wetrade.co's plain pages (legal, contact, delete account,
 * get the app, contest rules). Tokens copied from the homepage
 * (public/landing.html) so the two read as one site; the homepage keeps its
 * own inline CSS so later revisions from design can be dropped over it.
 */
:root {
  --void: #04030A;
  --paper: #F5F2FA;
  --mute: #A49CB6;
  --violet: #8C6CD8;
  --magenta: #F2367F;
  --lime: #9BE24B;
  --glass: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  --gut: clamp(16px, 4vw, 40px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(140,108,216,.22), transparent 60%), var(--void);
  background-attachment: fixed;
  color: var(--paper);
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: #C9B8FF; }
a:hover { color: #fff; }
.wrap { max-width: 1100px; margin: 0 auto; padding-inline: var(--gut); }
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.03), 0 30px 80px -30px rgba(0,0,0,.8);
}

/* Top bar */
.nav {
  position: sticky; top: 14px; z-index: 10;
  width: min(1100px, calc(100% - 24px)); margin: 14px auto 0;
  height: 62px; border-radius: 999px;
  display: flex; align-items: center; gap: 16px; padding: 0 10px 0 22px;
}
.nav img { height: 24px; width: auto; display: block; }
.nav .r { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav .r a { text-decoration: none; color: var(--paper); font-weight: 600; font-size: .93rem; padding: 8px 14px; }
.btn {
  height: 44px; padding: 0 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .93rem; text-decoration: none; white-space: nowrap;
}
.btn-w { background: var(--paper); color: #0A0712 !important; }
.btn-w:hover { color: #0A0712; }

/* Document body */
.doc { padding-block: 56px 64px; }
.doc h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 12px; font-weight: 800; }
.doc h2 { font-size: 1.35rem; margin: 2.2em 0 .6em; letter-spacing: -.01em; }
.doc h3 { font-size: 1.08rem; margin: 1.8em 0 .5em; }
.doc h4, .doc h5, .doc h6 { font-size: 1rem; margin: 1.5em 0 .4em; }
.doc p, .doc li { color: #DDD6EA; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin: .35em 0; }
.doc strong { color: var(--paper); }
.doc .lede { color: var(--mute); font-size: 1.1rem; margin-bottom: 1.6em; }
.doc .card { border-radius: 24px; padding: 26px 28px; margin: 22px 0; }
.doc .card h2:first-child, .doc .card h3:first-child { margin-top: 0; }
.doc .eyebrow { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0; }
.stores img { height: 54px; width: auto; display: block; }

/* Footer */
footer { padding-block: 0 40px; }
footer .glass { border-radius: 28px; padding: 28px 32px; display: flex; flex-direction: column; gap: 18px; }
footer img { height: 28px; width: auto; align-self: flex-start; }
footer nav { display: flex; flex-wrap: wrap; gap: 14px 22px; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--mute); }
footer nav a { color: var(--mute); text-decoration: none; }
footer nav a:hover { color: var(--paper); }
footer p { font-size: .84rem; color: var(--mute); margin: 0; max-width: 84ch; }

/* In-app webview copies (/mobileprivacy-policy, /mobiletermsandconditions):
   no site chrome, the app supplies its own. */
body.bare { background: var(--void); }
body.bare .doc { padding-block: 24px 40px; }

@media (max-width: 560px) {
  .nav { height: 56px; padding-left: 18px; }
  .nav .r a:not(.btn) { padding: 8px 8px; }
  .doc { padding-block: 36px 48px; }
  .stores img { height: 46px; }
}