/* Shared styles for the MeraChannel legal pages (terms, privacy, refund, content). */
@font-face { font-family:'Gilroy'; src:url('uploads/Gilroy-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('uploads/Gilroy-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('uploads/Gilroy-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('uploads/Gilroy-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('uploads/Gilroy-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }

* { box-sizing:border-box; }
html, body { margin:0; padding:0; background:#000000; }
body {
  font-family:'Gilroy', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  color:#FFFFFF;
  line-height:1.5;
  overflow-x:hidden;
}
::selection { background:#4ADE80; color:#000; }

.wrap { max-width:1100px; margin:0 auto; padding:0 22px; }

/* Nav — mirrors index.html */
.nav {
  position:sticky; top:0; z-index:40;
  background:rgba(0,0,0,0.62);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.nav .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:15px; padding-bottom:15px; }
.nav img { display:block; height:34px; width:auto; }
.nav a.back { font-size:14px; color:#888888; text-decoration:none; }
.nav a.back:hover { color:#FFFFFF; }

/* Document body */
.doc { max-width:820px; margin:0 auto; padding:clamp(40px,6vw,72px) 22px clamp(56px,8vw,96px); }
.doc h1 { font-size:clamp(30px,4.4vw,44px); font-weight:800; letter-spacing:-0.02em; margin:0 0 12px; }
.doc .updated { font-size:14px; color:#555555; margin:0 0 10px; }
.doc .lede { font-size:16px; color:#888888; margin:0 0 40px; line-height:1.75; }
.doc h2 {
  font-size:20px; font-weight:700; margin:44px 0 14px;
  padding-top:26px; border-top:1px solid rgba(255,255,255,0.08);
}
.doc h2:first-of-type { border-top:none; padding-top:0; margin-top:0; }
.doc h3 { font-size:16px; font-weight:600; margin:26px 0 10px; color:#FFFFFF; }
.doc p, .doc li { font-size:15px; color:#888888; line-height:1.8; }
.doc p { margin:0 0 14px; }
.doc ul, .doc ol { margin:0 0 16px; padding-left:22px; }
.doc li { margin-bottom:9px; }
.doc strong { color:#FFFFFF; font-weight:600; }
.doc a { color:#4ADE80; text-decoration:none; }
.doc a:hover { text-decoration:underline; }
/* Email addresses are deliberately NOT mailto: links, and the @ is drawn as an SVG glyph
   rather than typed — so no harvestable address string exists in the HTML at all. */
.doc .email { color:#FFFFFF; font-weight:600; display:inline-flex; align-items:center; gap:2px; vertical-align:bottom; }
.doc .email svg { width:1em; height:1em; flex:none; }

/* Callout — for the load-bearing "no refunds" / "we never see your contacts" points */
.doc .callout {
  background:#0F0F0F;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:20px 22px;
  margin:0 0 24px;
}
.doc .callout p:last-child { margin-bottom:0; }

/* Definition-style table */
.doc table { width:100%; border-collapse:collapse; margin:0 0 20px; }
.doc th, .doc td {
  text-align:left; font-size:14px; padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,0.08); vertical-align:top;
}
.doc th { color:#FFFFFF; font-weight:600; }
.doc td { color:#888888; }
.doc .tablewrap { overflow-x:auto; }

/* Footer — mirrors index.html */
.foot { border-top:1px solid rgba(255,255,255,0.08); }
.foot .cols {
  display:flex; flex-wrap:wrap; gap:36px 24px;
  align-items:flex-start; justify-content:space-between;
  padding-top:clamp(30px,4vw,44px); padding-bottom:clamp(30px,4vw,44px);
}
.foot .cols > div { flex:0 1 auto; }
.foot img { display:block; height:30px; width:auto; }
.foot address { margin:18px 0 0; font-style:normal; font-size:14px; line-height:1.7; color:#888888; }
.foot .cin { margin-top:14px; font-size:13px; color:#555555; }
.foot .links { display:flex; flex-direction:column; gap:12px; }
.foot a { font-size:14px; color:#888888; text-decoration:none; }
.foot a:hover { color:#FFFFFF; }
.foot .head { font-size:14px; font-weight:600; color:#FFFFFF; margin-bottom:14px; }
.foot .contact a { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.foot .contact a:last-child { margin-bottom:0; }
/* Email is plain text, not a mailto: link, and the @ is drawn as a glyph — both to keep
   address harvesters from scraping it. */
.foot .mailrow { display:flex; align-items:center; gap:10px; font-size:14px; color:#888888; margin-bottom:12px; }
.foot .mailrow .addr { display:flex; align-items:center; gap:3px; }
.foot svg { flex:none; }
.foot .copy {
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:16px; padding-bottom:16px;
  font-size:13px; color:#555555; text-align:center;
}