/* ============================================================
   SUNNYLYFE MUSIC — Legal pages (Privacy, Demo Submission Terms)
   Editorial, restrained, readable. Shares the brand palette + Cinzel.
   ============================================================ */
:root {
  --sun: #d3a55a; --sun-hi: #f0c987; --sand: #ddd2bd; --teal-deep: #0b2523;
  --night: #0c0b09; --ink: #e9e2d4; --drift: #8b8579;
  --font-display: 'Cinzel', serif; --font-body: 'Jost', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(11,37,35,.6), transparent 60%),
    linear-gradient(180deg, #0a0f0e 0%, var(--night) 30%, var(--night) 100%);
  color: var(--ink); font-family: var(--font-body); font-weight: 300;
  line-height: 1.75; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--sun); color: var(--night); }
a { color: var(--sun); text-decoration: none; border-bottom: 1px solid rgba(211,165,90,.35); transition: color .2s, border-color .2s; }
a:hover { color: var(--sun-hi); border-color: var(--sun); }
a:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

.legal-header {
  border-bottom: 1px solid rgba(211,165,90,.15);
  padding: 1.4rem 2rem; display: flex; align-items: center; gap: .8rem;
  position: sticky; top: 0; z-index: 10;
  background: rgba(12,11,9,.82); backdrop-filter: blur(12px);
}
.legal-header img { width: 30px; height: auto; }
.legal-header .wm { font-family: var(--font-display); font-weight: 500; letter-spacing: .26em; font-size: .9rem; color: var(--ink); }
.legal-header .wm em { font-style: normal; font-size: .55em; letter-spacing: .5em; color: var(--sun); margin-left: .5em; }
.legal-header a { border: 0; margin-left: auto; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sand); }

main.legal {
  max-width: 720px; margin: 0 auto; padding: 4rem 1.6rem 6rem;
}
.legal-kicker { font-size: .68rem; letter-spacing: .4em; text-transform: uppercase; color: var(--sun); margin-bottom: 1rem; }
main.legal h1 {
  font-family: var(--font-display); font-weight: 500; letter-spacing: .04em;
  font-size: clamp(1.9rem, 5vw, 2.8rem); color: #fff; line-height: 1.15; margin-bottom: .8rem;
}
.legal-meta { font-size: .8rem; color: var(--drift); margin-bottom: 2.6rem; letter-spacing: .04em; }
main.legal h2 {
  font-family: var(--font-display); font-weight: 500; letter-spacing: .03em;
  font-size: 1.25rem; color: var(--sun-hi); margin: 2.6rem 0 .8rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(139,133,121,.16);
}
main.legal h3 { font-size: .95rem; font-weight: 500; color: var(--ink); margin: 1.5rem 0 .5rem; letter-spacing: .02em; }
main.legal p { margin-bottom: 1rem; color: var(--sand); }
main.legal ul { margin: 0 0 1.2rem 1.2rem; }
main.legal li { margin-bottom: .5rem; color: var(--sand); }
main.legal strong { color: var(--ink); font-weight: 500; }
.legal-lead { font-size: 1.08rem; color: var(--ink); margin-bottom: 1.6rem; }
.legal-note {
  border-left: 3px solid var(--sun); background: rgba(211,165,90,.06);
  padding: 1rem 1.2rem; border-radius: 8px; margin: 1.4rem 0; font-size: .95rem;
}
.legal-table-wrap { overflow-x: auto; margin: 1.2rem 0; }
main.legal table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 520px; }
main.legal th, main.legal td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid rgba(139,133,121,.18); vertical-align: top; }
main.legal th { color: var(--sun); font-weight: 500; letter-spacing: .04em; }
main.legal td { color: var(--sand); }
.legal-footer {
  max-width: 720px; margin: 0 auto; padding: 2rem 1.6rem 4rem;
  border-top: 1px solid rgba(139,133,121,.16); display: flex; flex-wrap: wrap; gap: 1.2rem;
  font-size: .78rem; letter-spacing: .06em; color: var(--drift);
}
.legal-footer a { color: var(--sand); border: 0; }
.legal-footer a:hover { color: var(--sun); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }