/* legal.css — shared prose layout for the three legal/policy pages
   (privacy.html, terms.html, policies.html). Their body content is the same
   design: a centred hero, numbered content blocks, diamond-bullet lists, an
   occasional callout / group label and a contact card. One file, since all three
   share it (privacy and terms are byte-identical; policies adds .group-label and
   omits the callout — both inert where unused, so the union is safe for all).

   Chrome (nav, footer, mobile menu, to-top, body treatment) is in site.css.
   Depends on tokens.css + base.css + site.css. Cascade per page:
   tokens.css -> base.css -> site.css -> animations.css -> legal.css. */

/* Narrower reading measure than the shared 1120px container; 28px inset is
   intentionally off the spacing scale — kept literal so it never shifts. */
.container{max-width:820px;padding:0 28px}

/* ---------- hero ---------- */
/* .eyebrow (the gold label with side rules) is shared across content pages and
   lives in site.css; the rest of the hero below is legal-family specific. */
header{padding:150px 0 50px;text-align:center}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,5.5vw,3.4rem);line-height:1.04;letter-spacing:-.015em;margin-bottom:18px}
h1 .em{font-style:italic;color:var(--gold-soft)}
header p{color:var(--ink-soft);max-width:54ch;margin:0 auto;font-size:1rem}
.updated{margin-top:18px;font-size:.78rem;letter-spacing:.06em;color:var(--ink-dim);text-transform:uppercase}

/* ---------- content blocks ---------- */
section{padding:0 0 60px}
.block{margin-bottom:38px}
.block h2{font-family:var(--serif);font-weight:300;font-size:1.5rem;margin-bottom:14px;
  border-bottom:1px solid var(--line);padding-bottom:12px}
.block h2 .num{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1rem;margin-right:10px}
.block p{color:var(--ink-soft);font-size:.96rem;margin-bottom:14px;max-width:66ch}
.block p:last-child{margin-bottom:0}
.block a{color:var(--gold-soft);text-decoration:none}
.block a:hover{color:var(--gold)}

/* diamond-bullet list */
ul.plain{list-style:none;display:grid;gap:10px;margin:6px 0 16px}
ul.plain li{position:relative;padding-left:22px;font-size:.94rem;color:var(--ink-soft);line-height:1.5;max-width:64ch}
ul.plain li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg)}
ul.plain li b{color:var(--ink);font-weight:500}

/* group divider label (policies) */
.group-label{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  margin:52px 0 28px;padding-bottom:10px;border-bottom:1px solid var(--line)}

/* callout (privacy) */
.callout{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:4px;padding:24px 26px;margin:6px 0 0}
@media(max-width:520px){.callout{padding:20px 18px}}
.callout p{color:var(--ink-soft);font-size:.92rem;margin-bottom:0}

/* contact card — var(--panel) is the marketing panel tone (#1a1815), set in site.css. */
.contact-box{background:var(--panel);border:1px solid var(--line-soft);border-radius:4px;padding:26px 28px;margin-top:6px}
.contact-box .l{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.contact-box a{color:var(--ink);text-decoration:none;font-size:1rem}
.contact-box a:hover{color:var(--gold)}
.contact-box .line{margin-bottom:12px}
.contact-box .line:last-child{margin-bottom:0}