/* Legal pages: the /legal hub and its six documents (terms, privacy,
   cookie-policy, paia, app-terms, app-privacy). All share bodyId page-legal,
   so this one stylesheet, scoped under #page-legal, serves them all. */

#page-legal .hero{padding-top:70px;padding-bottom:34px}
#page-legal .hero h1{font-size:clamp(31px,4.6vw,44px);font-weight:700;max-width:820px}
#page-legal .hero p.lead{font-size:15px;margin-top:16px;color:var(--muted)}

/* The document body: one flowing, readable column of prose. */
#page-legal .legal-doc{padding-top:12px;padding-bottom:72px}
#page-legal .legal-doc>h2{font-size:clamp(20px,2.4vw,25px);font-weight:700;color:var(--navy);max-width:720px;margin-top:44px}
#page-legal .legal-doc>h2:first-child{margin-top:0}
#page-legal .legal-doc p.body{font-size:16.5px;max-width:720px;margin-top:15px;color:var(--slate)}
#page-legal .legal-doc ul{margin:15px 0 0;padding-left:22px;max-width:720px}
#page-legal .legal-doc li{font-size:16.5px;color:var(--slate);margin-top:9px;padding-left:4px}
#page-legal .legal-doc strong{color:var(--navy);font-weight:600}
#page-legal .legal-doc a{color:var(--cyan-ink);font-weight:500}
#page-legal .legal-doc a:hover{color:var(--navy)}

/* The hub index: each document as a titled row with a one-line note. */
#page-legal .legal-index{list-style:none;margin:22px 0 0;padding:0;max-width:720px}
#page-legal .legal-index li{margin-top:0;padding:18px 0;border-top:.5px solid var(--line)}
#page-legal .legal-index li:last-child{border-bottom:.5px solid var(--line)}
#page-legal .legal-index a{display:inline-block;font-family:var(--display);font-weight:600;font-size:18px;color:var(--navy)}
#page-legal .legal-index a:hover{color:var(--cyan-ink)}
#page-legal .legal-index .li-note{display:block;font-size:14.5px;color:var(--muted);margin-top:4px}