/* ═══ the legal pages ═════════════════════════════════════
   Deliberately plain. These exist to be read and to be checked by a
   store reviewer, and every decoration is one more thing between the
   reader and the sentence they came for. Same palette as the rest of
   the site so it is clearly the same product; nothing else. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  --void:#04040E;
  --violet-soft:#C7A9FF;
  --mint:#8FEDE2;
  --ink:#EDE7FF;
  --dim:rgba(215,205,255,.62);

  margin:0;padding:0 22px calc(70px + env(safe-area-inset-bottom));
  background:var(--void);color:var(--ink);
  font-family:"Outfit",system-ui,sans-serif;font-weight:300;
  font-size:15px;line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
main{max-width:680px;margin:0 auto}

header.top{
  max-width:680px;margin:0 auto;padding:26px 0 34px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:1px solid rgba(200,180,255,.12);
}
header.top a.home{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-size:12px;letter-spacing:.28em;
}
header.top img{width:26px;height:26px;border-radius:7px}
header.top .kind{font-size:9px;letter-spacing:.26em;color:rgba(215,205,255,.4)}

h1{
  margin:44px 0 6px;font-weight:300;
  font-size:clamp(23px,5.6vw,31px);letter-spacing:.16em;
}
.stamp{margin:0 0 40px;font-size:10px;letter-spacing:.24em;color:rgba(215,205,255,.36)}

h2{
  margin:42px 0 12px;font-weight:400;
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--violet-soft);
}
p{margin:0 0 16px;color:var(--dim)}
strong{color:var(--ink);font-weight:500}
ul{margin:0 0 18px;padding-left:20px;color:var(--dim)}
li{margin:0 0 9px}
a{color:var(--violet-soft)}

/* The one thing on these pages worth pulling out of the flow: the
   sentence a reader is actually looking for. */
.key{
  margin:0 0 26px;padding:18px 20px;
  border-left:2px solid var(--mint);border-radius:0 12px 12px 0;
  background:rgba(143,237,226,.05);
  color:var(--ink);
}

table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:13.5px}
th,td{text-align:left;padding:11px 12px 11px 0;vertical-align:top;
  border-bottom:1px solid rgba(200,180,255,.1);color:var(--dim)}
th{color:var(--ink);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase}

/* Anything still to be filled in before this goes live. Loud on
   purpose: a placeholder that blends in is a placeholder that ships. */
.todo{
  background:rgba(255,90,90,.16);border:1px dashed rgba(255,140,140,.7);
  border-radius:5px;padding:1px 7px;color:#FFD8D8;font-size:.9em;
}

footer{
  max-width:680px;margin:60px auto 0;padding-top:26px;
  border-top:1px solid rgba(200,180,255,.1);
  display:flex;flex-wrap:wrap;gap:10px 24px;
  font-size:10px;letter-spacing:.22em;
}
footer a{color:rgba(215,205,255,.5);text-decoration:none}
footer a:hover{color:var(--violet-soft)}