/* ============================================================
   Legal pages — privacy and cookie policy, both brands.

   Deliberately NOT a copy of FoxFace Studio's legal.css: that one is
   built for a dark site and would land a black page in the middle of two
   light ones. This borrows the tokens from brand.css instead, so a policy
   page looks like the site it belongs to.

   Long-form reading, so: one narrow column, generous line height, and
   nothing competing with the text.
   ============================================================ */
@import url('brand.css');

body{background:var(--paper);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}

.legaltop{background:var(--surface);border-bottom:1px solid var(--line)}
.legaltop .wrap{display:flex;align-items:center;gap:1rem;
  padding:1.1rem 1.4rem;max-width:900px;margin:0 auto}
.legaltop .brandname{font-weight:800;letter-spacing:-.02em;font-size:1.05rem}
.legaltop .brandname span{background:var(--grad);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.legaltop .back{margin-left:auto;font-size:.85rem;color:var(--muted);font-weight:600}
.legaltop .back:hover{color:var(--g2)}

main.legal{max-width:820px;margin:0 auto;padding:2.6rem 1.4rem 4rem}
main.legal h1{font-size:2rem;letter-spacing:-.03em;margin:0 0 .3rem}
main.legal .updated{color:var(--muted);font-size:.85rem;margin:0 0 2rem}
main.legal .lede{font-size:1.05rem;line-height:1.7;color:var(--ink-3);
  margin:0 0 2rem;padding-bottom:1.6rem;border-bottom:1px solid var(--line)}
main.legal h2{font-size:1.15rem;letter-spacing:-.02em;margin:2.2rem 0 .7rem}
main.legal h3{font-size:.95rem;margin:1.4rem 0 .4rem}
main.legal p,main.legal li{font-size:.94rem;line-height:1.72;color:var(--ink-3)}
main.legal p{margin:0 0 .9rem}
main.legal ul{margin:0 0 1.1rem;padding-left:1.2rem}
main.legal li{margin-bottom:.4rem}
main.legal a{color:var(--g2);text-decoration:underline;text-underline-offset:2px;font-weight:600}
main.legal strong{color:var(--ink)}

.box{background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:1.2rem 1.4rem;margin:1.4rem 0}
.box p:last-child{margin-bottom:0}

table.legal{width:100%;border-collapse:collapse;margin:1rem 0 1.5rem;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.legal th,table.legal td{text-align:left;padding:.7rem .9rem;
  border-bottom:1px solid var(--line);font-size:.87rem;vertical-align:top}
table.legal th{background:var(--paper);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
table.legal tr:last-child td{border-bottom:0}

.legalfoot{border-top:1px solid var(--line);margin-top:2.6rem;padding-top:1.4rem;
  font-size:.82rem;color:var(--muted)}

@media(max-width:620px){
  main.legal{padding:1.8rem 1.1rem 3rem}
  main.legal h1{font-size:1.6rem}
  table.legal{display:block;overflow-x:auto}
}