/* Legal pages (privacy.html, terms.html): dark editorial template wrapped around the legal text.
   Loaded AFTER the page's original inline styles and overrides them. */
html { scroll-padding-top: 96px; }
body { background: var(--bg); color: var(--ink); }

/* hero band */
.legal-hero { position: relative; overflow: hidden; background: var(--surface); padding: 10rem 1.5rem 4.5rem; }
.legal-hero::before { content: ""; position: absolute; inset: 0; background: url("./assets/hero-poster.jpg") center/cover no-repeat; opacity: .28; filter: saturate(.7); }
.legal-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18,18,18,.55), rgba(18,18,18,.35) 55%, var(--bg)); }
.legal-hero__inner { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; }
.legal-hero__title { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.02em; line-height: 1; font-size: clamp(2.6rem, 6vw, 4.5rem); color: #F4F1EA; margin: 0 0 1rem; }
.legal-hero__title em { font-style: italic; font-weight: 400; color: var(--clay); }
.legal-hero__sub { color: var(--ink-2); font-size: 1.125rem; margin: 0; max-width: 44ch; }

/* sidebar + document */
.legal-shell { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 4rem; align-items: start; }
@media (min-width: 900px) { .legal-shell { grid-template-columns: 240px minmax(0, 1fr); padding-top: 4rem; } }
.legal-side { align-self: start; }
@media (min-width: 900px) { .legal-side { position: sticky; top: 104px; } }
.legal-side__label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .75rem; }
.legal-side nav { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (min-width: 900px) { .legal-side nav { flex-direction: column; } }
.legal-doc { display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; border-radius: 12px; border: 1px solid transparent; color: var(--ink-2); text-decoration: none; font-size: .95rem; transition: background-color .2s, color .2s; }
.legal-doc svg { width: 18px; height: 18px; flex: none; }
.legal-doc:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.legal-doc.is-active { color: var(--ink); background: var(--surface); border-color: var(--line); font-weight: 600; }
.legal-doc.is-active svg { color: var(--green); }

.legal { max-width: 52rem; min-width: 0; line-height: 1.7; }
.legal h1, .legal h2 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; margin: 0 0 .9rem; color: #F4F1EA; }
.legal h2 { font-size: 1.55rem; line-height: 1.2; margin: 2.75rem 0 .8rem; padding-top: 2.25rem; border-top: 1px solid var(--line); color: var(--ink); }
.legal h3 { font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 .4rem; color: var(--ink); }
.legal p, .legal li, .legal td, .legal th { font-size: 1rem; color: var(--ink-2); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--green); text-decoration: none; border-bottom: 1px solid rgba(82,183,136,.35); }
.legal a:hover { border-bottom-color: var(--green); }
.legal .meta { margin: 0 0 1.75rem; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--clay); }
.legal .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem 1.4rem; margin: 1.5rem 0; }
.legal table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .95rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: .8rem .9rem; border: 1px solid var(--line); }
.legal th { background: var(--surface); color: var(--ink); font-weight: 600; }
.legal td { background: rgba(30,30,30,.45); }
@media (max-width: 899px) { .legal table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* wide tables scroll inside the page on phones */
.legal ul, .legal ol { padding-left: 1.4rem; list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin: .3rem 0; }
.legal li::marker { color: var(--ink-3); }
.legal code { font-family: var(--font-mono); font-size: .9em; color: var(--clay); }
.legal footer { border-top: 1px solid var(--line); margin-top: 3.5rem; padding-top: 1.4rem; color: var(--ink-3); font-size: .9rem; }

/* "something unclear" band */
.legal-cta { background: #0F0F0F; border-top: 1px solid var(--line); padding: 5rem 1.5rem; }
.legal-cta__inner { max-width: 72rem; margin: 0 auto; }
.legal-cta h2 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.02em; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.05; color: #F4F1EA; margin: 0 0 1rem; }
.legal-cta p { color: var(--ink-2); font-size: 1.125rem; max-width: 46ch; margin: 0 0 2rem; }
/* Bolder than the App Store badges, which stay at 600 — this one is the page's only action. */
.legal-cta .badge strong { font-weight: 700; }

/* back to top */
.backtop { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .85rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: opacity .3s, transform .3s; }
.backtop svg { width: 14px; height: 14px; color: var(--green); }
.backtop.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .backtop { transition: none; } }