/* CHTR-3059 — the legal pages' own stylesheet, served from /legal/ on every host that serves /legal/.

   They used to borrow /signup/signup.css. That was fine while /signup/ lived beside them; CHTR-1398
   then moved the account pages to the console and redirected /signup/* there, so on translate (and any
   other host that serves /legal/ but not /signup/) the stylesheet answered 301 to another origin, the
   page's own policy (`style-src 'self'`) refused the redirected sheet, and the DPA, the privacy notice
   and the terms rendered in the browser's default serif. A stylesheet beside the pages travels with
   them; one borrowed from another surface goes wherever that surface goes.

   WHAT IS HERE is only what the legal pages draw: the palette, the page and card, the brand lockup and
   the document type. Each page keeps its own small inline <style> for its tables and headings. The
   palette is signup.css's, value for value, so the two stay one system — `stylesheet-origin.test.js`
   fails if a value here stops matching the one it was copied from. No page here loads the appearance
   script, so dark follows the device preference alone. */

:root {
  --bg: #f1eff7;
  --bg-glow: #e7e1f6;
  --card: #ffffff;
  --fg: #1c1630;
  --muted: #5f5a74;
  --accent-2: #1c7a59;
  --eq-violet: #4f3a9c;
  --eq-magenta: #b02d6e;
  --eq-green: #1c7a59;
  --line: #e0dbef;
  --card-shadow: rgba(28, 22, 48, 0.16);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b10;
    --bg-glow: #1b1530;
    --card: #16161f;
    --fg: #f5f3fb;
    --muted: #a9a7b8;
    --accent-2: #3ddc97;
    --eq-violet: #9384df;
    --eq-magenta: #d65a99;
    --eq-green: #3fae86;
    --line: #2a2a38;
    --card-shadow: rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, var(--bg-glow) 0%, var(--bg) 60%);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

.card {
  width: 100%; max-width: 460px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 26px 24px;
  box-shadow: 0 20px 60px var(--card-shadow);
}

.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; text-decoration: none; color: inherit; }
/* The CHTR-268 equaliser mark, exactly as signup.css draws it (the reasoning for its heights and tempo
   is there). */
.eq { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.eq i {
  width: 3px; border-radius: 1.5px; transform-origin: center;
  animation: eq-spectrum 3.9s ease-in-out infinite;
}
.eq i:nth-child(1) { height: 40%;  background: var(--eq-violet);  animation-duration: 3.9s;  animation-delay: 0s;    }
.eq i:nth-child(2) { height: 74%;  background: var(--eq-violet);  animation-duration: 5.1s;  animation-delay: 0.54s; }
.eq i:nth-child(3) { height: 100%; background: var(--eq-magenta); animation-duration: 3.3s;  animation-delay: 0.18s; }
.eq i:nth-child(4) { height: 55%;  background: var(--eq-green);   animation-duration: 5.7s;  animation-delay: 0.72s; }
.eq i:nth-child(5) { height: 84%;  background: var(--eq-violet);  animation-duration: 4.35s; animation-delay: 0.36s; }
.eq i:nth-child(6) { height: 45%;  background: var(--eq-magenta); animation-duration: 4.8s;  animation-delay: 0.9s;  }
.eq i:nth-child(7) { height: 28%;  background: var(--eq-violet);  animation-duration: 3.75s; animation-delay: 0.06s; }
@keyframes eq-spectrum {
  0%   { transform: scaleY(0.30); }
  22%  { transform: scaleY(0.95); }
  44%  { transform: scaleY(0.50); }
  68%  { transform: scaleY(1); }
  100% { transform: scaleY(0.30); }
}
@media (prefers-reduced-motion: reduce) { .eq i { animation: none; } }
.brand-word { font-weight: 700; letter-spacing: 0.2px; }
.brand-tag { color: var(--muted); font-size: 0.82rem; margin-left: auto; }

h1 { font-size: 1.4rem; margin: 0 0 6px; }
.lede { color: var(--muted); margin: 0 0 20px; font-size: 0.95rem; }
.lede a { color: var(--accent-2); }