/* The legal pages: privacy, terms, the data processing annex, cookies.

   One stylesheet rather than four copies of it. coming-soon.html carries its
   own because it has to be droppable on a bare host on its own; these four
   are published together by the build, which copies this file with them, so
   there is nothing to be gained by repeating it four times and a guarantee
   that they drift if we do.

   The tokens are the design system's values, written out rather than
   imported, because assets/ecomsource.css is the dashboard and these pages
   are not the dashboard. */
:root {
  --canvas: #000000;
  --card: #0a0a0b;
  --text: #f5f5f7;
  --text-muted: rgba(245, 245, 247, .58);
  --text-dim: rgba(245, 245, 247, .36);
  --border: rgba(255, 255, 255, .07);
  --border-strong: rgba(255, 255, 255, .14);
  --accent: #e2402f;
  --warn: #f0b429;
  --warn-soft: rgba(240, 180, 41, .13);
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  --font-accent: 'Montserrat', 'Poppins', -apple-system, 'Helvetica Neue', sans-serif;
  --radius: 18px;
  --radius-sm: 10px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--text);
  font-family: var(--font-display); font-size: 15.5px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 56px 24px 96px; }
a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
a:hover { text-decoration-color: var(--accent); }

header { border-bottom: 1px solid var(--border); padding-bottom: 28px; margin-bottom: 40px; }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mark svg { display: block; }
.mark b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(28px, 5vw, 38px); line-height: 1.15; letter-spacing: -.02em; margin: 26px 0 10px; font-weight: 700; }
.lede { color: var(--text-muted); font-size: 16.5px; margin: 0; max-width: 60ch; }
.stamp { font-family: var(--font-accent); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-top: 18px; }

/* The other three, on every one of them, because somebody who lands on one of
   these pages is usually looking for a different one. */
.also { display: flex; gap: 8px 16px; flex-wrap: wrap; margin-top: 18px; font-size: 13.5px; }
.also a { color: var(--text-muted); }
.also span[aria-current] { color: var(--text-dim); text-decoration: none; }

h2 { font-size: 20px; letter-spacing: -.01em; margin: 44px 0 12px; font-weight: 600; }
h3 { font-size: 15.5px; margin: 26px 0 6px; font-weight: 600; }
p { margin: 0 0 14px; color: var(--text-muted); max-width: 68ch; }
p strong, li strong { color: var(--text); font-weight: 600; }
ul { margin: 0 0 16px; padding-left: 20px; color: var(--text-muted); max-width: 68ch; }
li { margin-bottom: 8px; }
li::marker { color: var(--text-dim); }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin: 22px 0; }
.card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

/* One scope, one clause, one cookie per block rather than a row. Three columns
   of prose inside a 760px page gives every one of them four words a line. */
.scope { border-top: 1px solid var(--border); padding: 18px 0 4px; }
.scope + h2 { margin-top: 34px; }
.scope:last-of-type { border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.scope code, code.tag {
  display: inline-block; color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px;
  background: rgba(255, 255, 255, .045); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 8px; margin-bottom: 10px;
}
.scope p { margin-bottom: 10px; }
.scope .why { color: var(--text-dim); }

.draft {
  border: 1px solid rgba(240, 180, 41, .38); background: var(--warn-soft);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 32px;
  color: var(--text); font-size: 14.5px;
}
.draft b { color: var(--warn); }

/* The clause numbering carries meaning in a contract, so it is a real list
   with the number visible rather than a heading somebody has to count. */
.art { margin: 0 0 6px; }
.art > b { color: var(--text); font-weight: 600; }
.num {
  font-family: var(--font-accent); font-size: 12px; color: var(--text-dim);
  letter-spacing: .04em; margin-right: 8px;
}

footer { border-top: 1px solid var(--border); margin-top: 56px; padding-top: 22px; color: var(--text-dim); font-size: 13.5px; }
footer a { color: var(--text-muted); }
footer p { color: var(--text-dim); }

/* --- the consent gate ----------------------------------------------------- */
/* Low, quiet, and not a wall. It has to be answerable both ways in one press,
   because a banner where refusing takes more clicks than accepting is not
   asking. */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  max-width: 560px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 18px 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  font-size: 14px; color: var(--text-muted);
}
.consent p { margin: 0 0 14px; font-size: 14px; }
.consent .row { display: flex; gap: 8px; flex-wrap: wrap; }
.consent button {
  font: inherit; font-weight: 600; cursor: pointer;
  border-radius: var(--radius-pill, 980px); padding: 8px 16px;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text);
}
.consent button.yes { background: var(--accent); border-color: var(--accent); color: #fff; }
.consent a { color: var(--text); }
@media (max-width: 480px) {
  .consent .row button { flex: 1; }
}