/* Shared style for the ClipLabs legal pages. Same tokens as index.html so the
   pages read as part of the site rather than a bolted-on afterthought. */

/* Inter, self-hosted. SIL Open Font Licence 1.1. */
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:300 800; font-display:swap;
  src:url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --bg:#0B0A0F; --surface:#191622; --border:#2C2639;
  --fg:#F7F5FB; --muted:#A6A1B6; --dim:#837D96;
  --primary:#EC4899; --on-primary:#16121C;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 17px/1.7 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:44rem; margin:0 auto; padding:0 24px}

nav{border-bottom:1px solid var(--border); padding:20px 0}
nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px}
nav a{color:var(--fg); text-decoration:none; font-weight:600; letter-spacing:-.01em}
nav .back{color:var(--muted); font-weight:400; font-size:15px}
nav .back:hover{color:var(--fg)}

main{padding:56px 0 72px}
h1{font-size:clamp(2rem,5vw,2.7rem); line-height:1.12; letter-spacing:-.03em; margin:0 0 10px}
.updated{color:var(--dim); font-size:15px; margin:0 0 40px}
h2{font-size:1.25rem; letter-spacing:-.015em; margin:40px 0 12px; color:var(--fg)}
p,li{color:var(--muted)}
p{margin:0 0 16px}
ul{margin:0 0 16px; padding-left:22px}
li{margin:0 0 8px}
strong{color:var(--fg); font-weight:600}
a{color:var(--primary)}
a:hover{color:var(--fg)}

.box{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:20px 24px; margin:0 0 16px;
}
.box p:last-child{margin-bottom:0}

table{border-collapse:collapse; width:100%; margin:0 0 16px; font-size:15px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); color:var(--muted)}
th{color:var(--fg); font-weight:600}

footer{border-top:1px solid var(--border); padding:28px 0 44px}
footer .wrap{display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;
  color:var(--dim); font-size:14px}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--fg)}

a:focus-visible,button:focus-visible{
  outline:2px solid var(--primary); outline-offset:3px; border-radius:3px;
}

@media (max-width:600px){
  body{font-size:16px}
  main{padding:40px 0 56px}
}