/* Terms and Privacy share this. Deliberately plain: these pages are read
   by people deciding whether to trust you, and by a Paddle reviewer
   deciding whether to approve you. Both want to find things quickly.
   No WebGL, no engine, no animation — a legal page that shows off is
   fighting its own job. The brand shows up in the mark, the accent, the
   floor strip and the voice, which is enough. */

:root{
  --bg:#08080a; --panel:#0d0d10;
  --txt:#e9e9ee; --dim:#9b93ad; --dim2:#5c5c68;
  --line:#232330; --kick:#ff4d3d;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:400 16px/1.68 -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

/* ---- the six-colour bar, same as the emails ---- */
.bar{display:flex; height:4px}
.bar i{flex:1}
.bar i:nth-child(1){background:#ff4d3d}
.bar i:nth-child(2){background:#ffd93d}
.bar i:nth-child(3){background:#4dffb8}
.bar i:nth-child(4){background:#5b8cff}
.bar i:nth-child(5){background:#ff6ec7}
.bar i:nth-child(6){background:#a97bff}

.wrap{max-width:680px; margin:0 auto; padding:0 24px}

header{padding:38px 0 0}
.mark{
  display:inline-block; text-decoration:none;
  font:600 12px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  letter-spacing:.34em; color:var(--dim);
}
.mark:hover{color:var(--txt)}

h1{
  font-size:clamp(28px,5.5vw,38px); line-height:1.15; letter-spacing:-.02em;
  margin:26px 0 6px; font-weight:600;
}
.upd{color:var(--dim2); font-size:14px; margin:0 0 34px}

/* The summary box. Most people will read only this, so it has to be true
   on its own rather than a teaser for the real terms below. */
.tldr{
  border:1px solid var(--line); border-left:3px solid var(--kick);
  border-radius:0 10px 10px 0; padding:20px 22px; margin:0 0 40px;
  background:var(--panel);
}
.tldr h2{margin:0 0 10px; font-size:13px; letter-spacing:.16em; color:var(--dim)}
.tldr ul{margin:0; padding-left:19px}
.tldr li{margin:7px 0; color:var(--txt)}
.tldr em{color:var(--dim); font-style:normal}

h2{
  font-size:19px; font-weight:600; margin:38px 0 10px; letter-spacing:-.01em;
  scroll-margin-top:20px;
}
h3{font-size:16px; font-weight:600; margin:24px 0 6px; color:var(--txt)}
p, li{color:var(--dim)}
p{margin:0 0 13px}
ul{padding-left:20px; margin:0 0 13px}
li{margin:5px 0}
strong{color:var(--txt); font-weight:600}
a{color:var(--txt); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--dim2)}
a:hover{text-decoration-color:var(--kick)}
code{
  font:500 13px/1 'SFMono-Regular',Menlo,Consolas,monospace;
  background:var(--panel); border:1px solid var(--line);
  border-radius:4px; padding:2px 6px; color:var(--txt);
}
hr{border:0; border-top:1px solid var(--line); margin:40px 0}

table{border-collapse:collapse; width:100%; margin:0 0 16px; font-size:14.5px}
/* Wide tables must scroll inside themselves rather than pushing the page
   sideways on a phone. */
.scroll{overflow-x:auto; margin:0 0 16px}
.scroll table{margin:0; min-width:460px}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line);
      vertical-align:top}
th{color:var(--txt); font-weight:600; font-size:13px; letter-spacing:.04em}
td{color:var(--dim)}

footer{margin-top:56px}
.strip{height:26px; border-top:1px solid var(--line); background:#0b0b0e;
  background-image:
    linear-gradient(45deg,#101014 25%,transparent 25%,transparent 75%,#101014 75%),
    linear-gradient(45deg,#101014 25%,transparent 25%,transparent 75%,#101014 75%);
  background-size:18px 18px; background-position:0 0,9px 9px;
}
.cr{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  padding:16px 24px 30px; max-width:680px; margin:0 auto;
  font-size:13px; color:var(--dim2);
}
.cr a{color:var(--dim2); text-decoration:none}
.cr a:hover{color:var(--dim)}