/* Long-form legal / prose pages (e.g. privacy policy). Brand tokens come from styles-brand.css.
   .legal is an <article>, so it must opt out of the card styling on the generic `article` rule. */
.legal{max-width:760px;margin:0 auto;padding:clamp(3.5rem,7vw,5.5rem) clamp(20px,5vw,28px) clamp(3rem,6vw,5rem);border:0;background:none;box-shadow:none;border-radius:0}
.legal h1{font-size:clamp(30px,5vw,44px);line-height:1.14;letter-spacing:-.025em;margin:0 0 10px;color:var(--ink)}
.legal-meta{margin:0 0 30px;color:var(--muted);font-size:14px;line-height:1.7}
.legal h2{font-size:clamp(21px,3vw,27px);line-height:1.28;letter-spacing:-.015em;margin:42px 0 12px;color:var(--ink)}
.legal h3{font-size:18px;line-height:1.35;margin:24px 0 8px;color:var(--ink)}
.legal p{font-size:16px;line-height:1.7;margin:0 0 14px;color:var(--ink);max-width:none}
.legal ul{margin:0 0 16px;padding-left:1.3rem}
.legal li{margin:7px 0;line-height:1.6;color:var(--ink)}
.legal a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--blue-deep)}
.legal-contact{margin:8px 0 14px;line-height:1.85}

/* "Return to main page" button at the top and bottom of legal pages. The shared
   .button.ghost is white-on-dark, so the light legal page uses this variant.
   Selectors are scoped under .legal to override the generic `.legal a` link styling. */
.legal-actions{margin:0 0 32px}
.legal-actions-bottom{margin:48px 0 0;padding-top:30px;border-top:1px solid var(--line)}
.legal .legal-back{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;border:1px solid rgba(var(--blue-rgb),.25);background:rgba(var(--blue-rgb),.06);color:var(--blue);font-weight:700;font-size:15px;text-decoration:none;transition:background .2s ease,border-color .2s ease,color .2s ease}
.legal .legal-back:hover{background:rgba(var(--blue-rgb),.12);border-color:var(--blue);color:var(--blue-deep)}
.legal .legal-back:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.legal .legal-back svg{flex:none}