/* ============================================================
   CATALOG LEGAL PAGES
   White codefont text on a black background.
   ============================================================ */

:root{
  --bg: #0a0a0a;
  --card: #131313;
  --border: #262626;
  --border-strong: #404040;
  --fg: #fafafa;
  --fg-muted: #a1a1a1;
  --fg-subtle: #707070;
  --radius: 8px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html,body{
  width:100%;
  min-height:100vh;
  background:var(--bg);
  color:var(--fg);
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:13.5px;
  line-height:1.7;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{ display:none; }

a{color:var(--fg); text-decoration:underline; text-underline-offset:3px;}
a:hover{ color:var(--fg-muted); }

.page{
  max-width:720px;
  margin:0 auto;
  padding:40px 24px 64px;
  animation:fadeIn 0.4s ease;
}

@keyframes fadeIn{
  from{opacity:0;} to{opacity:1;}
}

.back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--fg-muted);
  font-size:12px;
  margin-bottom:32px;
  transition:color .2s;
  text-decoration:none;
}
.back:hover{ color:var(--fg); }
.back svg{
  width:16px;height:16px;
  stroke:currentColor; stroke-width:1.7; fill:none;
}

h1{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:22px;
  font-weight:700;
  letter-spacing:-0.01em;
  margin-bottom:18px;
}
h2{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:14px;
  font-weight:700;
  margin-top:28px;
  margin-bottom:10px;
  color:var(--fg);
}
p, ul, li{
  color:var(--fg-muted);
  margin-bottom:12px;
}
ul{ padding-left:20px; }
li{ margin-bottom:6px; }

.divider{
  height:1px;
  background:var(--border);
  margin:36px 0;
}

.contact{
  margin-top:28px;
}

.footer{
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
  align-items:center;
  justify-content:center;
  margin-top:36px;
  padding-top:24px;
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--fg-muted);
}
.footer a{ color:var(--fg-muted); text-decoration:none; }
.footer a:hover{ color:var(--fg); text-decoration:underline; }

.socials{
  display:flex;
  gap:12px;
  margin-top:12px;
  justify-content:center;
}
.socials a{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--fg-muted);
  transition:color .2s, border-color .2s, transform .2s;
  text-decoration:none;
}
.socials a:hover{ color:var(--fg); border-color:var(--border-strong); transform:translateY(-2px); }
.socials a svg{ width:18px;height:18px; }

@media (max-width:480px){
  .page{ padding:28px 18px 48px; }
}