/* Shared styling for the Privacy and Terms pages.
   Same tokens as mockup-g4.html so the legal pages don't feel like a different site. */

:root{
  --black:#0D0D0D; --navy:#0E1B3D; --blush:#F2B4C6; --rose:#E2769A; --hot:#F0257E;
  --gray:#A6A6A6; --off:#F5F2F0;
  --hair:rgba(245,242,240,.11); --hair-rose:rgba(226,118,154,.26);
  --ease:cubic-bezier(.16,.68,.32,1);
  --f-display:'Cormorant Garamond',Georgia,serif;
  --f-body:'Jost',system-ui,sans-serif;
  --f-script:'Pinyon Script',cursive;
  --pad:clamp(22px,5vw,48px);
  --r:26px;
}
*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:#080b16;color:var(--off);
  font-family:var(--f-body);font-weight:300;
  font-size:clamp(15px,1.05vw,17px);line-height:1.78;letter-spacing:.01em;
}
a{color:var(--blush);text-decoration:none;border-bottom:1px solid var(--hair-rose);}
a:hover{color:var(--off);}
:focus-visible{outline:2px solid var(--rose);outline-offset:4px;border-radius:8px;}
::selection{background:var(--rose);color:var(--black);}

.legal-nav{padding:1.25rem var(--pad);}
.brand{font-family:var(--f-display);font-size:1rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--off);font-weight:500;white-space:nowrap;border:0;}
.brand b{color:var(--rose);font-weight:500;}

.legal{max-width:820px;margin:0 auto;padding:clamp(2.5rem,7vw,5rem) var(--pad) clamp(4rem,9vw,7rem);position:relative;}
.legal::before{
  content:"";position:absolute;z-index:-1;left:50%;top:-10%;width:80vw;height:60vh;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(226,118,154,.13),transparent 66%);filter:blur(60px);
}
.legal h1{font-family:var(--f-display);font-weight:300;line-height:1.05;
  font-size:clamp(2.4rem,6vw,4rem);margin:0 0 .6rem;}
.legal h1 em{font-style:italic;color:var(--blush);}
.legal .updated{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin:0 0 2.5rem;}
.legal h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.35rem,3vw,1.9rem);
  line-height:1.2;margin:2.8rem 0 .8rem;color:var(--off);}
.legal p,.legal li{color:var(--gray);}
.legal p{margin:0 0 1rem;}
.legal ul{margin:0 0 1rem;padding-left:1.2rem;}
.legal li{margin-bottom:.5rem;}
.legal strong{color:var(--off);font-weight:400;}

/* Every value we don't actually have yet, marked the same way as in the mockup. */
.ph{
  display:inline-block;padding:.05em .5em;border-radius:6px;
  background:rgba(240,37,126,.14);color:var(--blush);
  font-size:.9em;letter-spacing:.04em;white-space:nowrap;
}

.notice{
  border-radius:var(--r);background:rgba(240,37,126,.09);
  box-shadow:0 0 0 1px rgba(242,180,198,.18);
  padding:clamp(1.1rem,3vw,1.6rem) clamp(1.3rem,3.5vw,2rem);margin:0 0 3rem;
}
.notice p{margin:0;color:var(--off);font-size:.9rem;}
.notice b{color:var(--blush);font-weight:400;}

.legal-foot{
  max-width:820px;margin:0 auto;padding:1.5rem var(--pad) 3rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.72rem;color:var(--gray);position:relative;
}
.legal-foot::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair) 15%,var(--hair) 85%,transparent);}
.legal-foot a{border:0;color:var(--gray);}
.legal-foot a:hover{color:var(--off);}