/* ---------------------------------------------------------------------------
   legal.css — shared styling for WatchHop's legal pages
   (Privacy, Terms, Cookie Policy, Disclaimer). Matches the Midnight Aurora
   look of the landing page, tuned for long-form reading.
--------------------------------------------------------------------------- */
:root{
  --ground:#06091A; --ground2:#0A0E24; --surface:#111634; --raised:#161C42;
  --line:#212A55; --lineSoft:#1A2246;
  --ink:#F3F4FE; --ink2:#A6ACD6; --ink3:#6E75A8;
  --violet:#8B7BFF; --violetSoft:#241f52; --teal:#35E0C6;
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--ink2); font-family:var(--sans); line-height:1.65; font-size:16px;
  background:
    radial-gradient(1100px 620px at 85% -10%, rgba(139,123,255,.14), transparent 60%),
    radial-gradient(900px 500px at 4% 1%, rgba(53,224,198,.07), transparent 55%),
    var(--ground);
  -webkit-font-smoothing:antialiased}
a{color:var(--violet)}
.wrap{max-width:760px; margin:0 auto; padding:0 22px 90px}

/* nav */
nav{display:flex; align-items:center; justify-content:space-between; padding:22px 0 10px}
.word{font-family:var(--serif); font-weight:700; font-size:22px; letter-spacing:.2px; text-decoration:none; color:var(--ink)}
.word .hop{background:linear-gradient(100deg,var(--violet),var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent}
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 30px}
.tabs a{text-decoration:none; font-weight:700; font-size:13.5px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink3); background:var(--surface)}
.tabs a.on{background:var(--violet); border-color:var(--violet); color:#0a0820}
.tabs a:hover{color:var(--ink)}

/* document */
h1{font-family:var(--serif); color:var(--ink); font-size:clamp(28px,5vw,40px); letter-spacing:-.5px; margin:10px 0 2px}
.eff{color:var(--ink3); font-size:13.5px; margin:0 0 10px}
.intro{color:var(--ink2); font-size:16.5px; margin:0 0 26px}
h2{font-family:var(--serif); color:var(--ink); font-size:21px; letter-spacing:-.2px; margin:34px 0 8px; scroll-margin-top:16px}
h3{color:#C9CEF5; font-size:16.5px; margin:22px 0 6px}
p{margin:0 0 13px}
ul{margin:0 0 14px; padding-left:22px}
li{margin:0 0 7px}
strong{color:var(--ink)}
.note{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--violet);
  border-radius:12px; padding:13px 16px; margin:0 0 14px; font-size:15px}
table{width:100%; border-collapse:collapse; margin:0 0 16px; font-size:14.5px; display:block; overflow-x:auto}
th,td{border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:top}
th{background:var(--surface); color:var(--ink)}
.addr{color:var(--ink2); line-height:1.5}

footer{border-top:1px solid var(--line); margin-top:46px; padding:26px 0 0; color:var(--ink3); font-size:13.5px}
.foot-links{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:12px}
footer a{color:var(--ink2); text-decoration:none; font-weight:600}
footer a:hover{color:var(--ink)}
/* the Termly consent-preferences link renders as plain text; style it like a footer link */
.termly-display-preferences{color:var(--ink2); text-decoration:none; font-weight:600; cursor:pointer}