/* Shared styles for Tailor Bro legal pages (terms.html, privacy.html)
   Reuses the "Fabric in Motion" palette + typography. */
:root{
  --bg-900:#09090B; --bg-800:#111113;
  --glass-1:rgba(255,255,255,0.08); --glass-2:rgba(255,255,255,0.05);
  --glass-border:rgba(255,255,255,0.12); --glass-hi:rgba(255,255,255,0.20);
  --gold:#D4AF37; --copper:#C47A44; --silk:#4A90E2; --ivory:#F8F6F0; --muted:#A1A1AA;
  --font-display:"Fraunces",Georgia,serif; --font-body:"Hanken Grotesk",system-ui,sans-serif;
  --ease-fabric:cubic-bezier(0.22,1,0.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body); background:var(--bg-900); color:var(--ivory);
  line-height:1.7; -webkit-font-smoothing:antialiased; min-height:100vh}

/* atmosphere */
.atmosphere{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.glow{position:absolute; border-radius:50%; filter:blur(100px); opacity:.4}
.glow.g1{width:46vw;height:46vw;left:-12vw;top:-14vw;background:radial-gradient(circle,rgba(212,175,55,.18),transparent 70%)}
.glow.g2{width:40vw;height:40vw;right:-10vw;bottom:-6vh;background:radial-gradient(circle,rgba(74,144,226,.12),transparent 70%)}

.glass{background:var(--glass-1); backdrop-filter:blur(26px) saturate(140%); -webkit-backdrop-filter:blur(26px) saturate(140%);
  border:1px solid var(--glass-border); box-shadow:inset 0 1px 0 0 var(--glass-hi), 0 20px 60px -20px rgba(0,0,0,.7)}

/* top bar */
.legal-nav{position:sticky; top:1rem; z-index:20; max-width:1100px; margin:1rem auto 0;
  width:calc(100% - 2rem); display:flex; align-items:center; justify-content:space-between;
  padding:.7rem .8rem .7rem 1.2rem; border-radius:18px}
.brand{display:flex; align-items:center; gap:.7rem; font-family:var(--font-display); font-size:1.1rem; color:var(--ivory); text-decoration:none}
.brand .mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--copper)); color:#1a1300; font-weight:700; font-family:var(--font-body)}
.brand .sub{color:var(--muted); font-size:.78rem}
.back{color:var(--ivory); text-decoration:none; font-size:.85rem; font-weight:600; padding:.55rem 1.1rem; border-radius:100px;
  background:var(--glass-2); border:1px solid var(--glass-border); transition:border-color .3s}
.back:hover{border-color:var(--glass-hi)}

/* content */
.legal-wrap{position:relative; z-index:2; max-width:760px; margin:0 auto; padding:clamp(2.5rem,6vw,5rem) clamp(1.2rem,4vw,2rem) 4rem}
.eyebrow{font-size:.78rem; font-weight:600; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:1rem}
.legal-wrap h1{font-family:var(--font-display); font-weight:400; font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.08; letter-spacing:-.02em; margin-bottom:.8rem}
.updated{color:var(--muted); font-size:.9rem; margin-bottom:2.5rem; padding-bottom:2rem; border-bottom:1px solid var(--glass-border)}
.legal-content h2{font-family:var(--font-display); font-weight:500; font-size:1.5rem; margin:2.6rem 0 .8rem; color:var(--ivory)}
.legal-content h2 .n{color:var(--gold); font-size:1rem; margin-right:.6rem}
.legal-content p{color:#d4d4d8; margin-bottom:1rem}
.legal-content ul{margin:0 0 1.2rem 1.2rem}
.legal-content li{color:#d4d4d8; margin-bottom:.5rem}
.legal-content a{color:var(--silk); text-decoration:none}
.legal-content a:hover{text-decoration:underline}
.legal-content strong{color:var(--ivory)}
.note{margin-top:2rem; padding:1.2rem 1.4rem; border-radius:16px; font-size:.9rem; color:var(--muted)}

/* footer */
.legal-footer{position:relative; z-index:2; max-width:760px; margin:0 auto; padding:2rem 1.2rem 3rem;
  border-top:1px solid var(--glass-border); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  color:var(--muted); font-size:.82rem}
.legal-footer a{color:var(--muted); text-decoration:none}
.legal-footer a:hover{color:var(--ivory)}
:focus-visible{outline:2px solid var(--silk); outline-offset:3px; border-radius:6px}