/* ============================================================
   CaseLift · Legal pages (privacy, terms, hipaa, baa)
   Loaded after site.css, which owns the tokens, nav and footer.
   The document sits in one white card on the graph paper, with
   the body text held to a ~720px reading measure.
   ============================================================ */
.legal {
  max-width: 848px; margin: 24px auto 96px; padding: 56px 64px 60px;
  background: #fff; border: 1px solid var(--border); border-radius: 22px;
  box-shadow: 0 24px 50px -36px rgba(11,43,69,.35);
}
.legal .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--blue); margin-bottom: 14px; }
.legal .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-mid); }
.legal h1 { font-family: var(--head); font-weight: 800; font-size: clamp(32px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 12px; text-wrap: balance; }
.legal .updated { font-size: 14px; color: var(--text-3); }
.legal .intro { font-size: 18.5px; line-height: 1.6; color: var(--text-2); margin: 22px 0 36px; padding-bottom: 32px; border-bottom: 1px solid var(--border); text-wrap: pretty; }
.legal h2 { font-family: var(--head); font-weight: 700; font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; margin: 48px 0 14px; scroll-margin-top: 24px; }
.legal h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin: 28px 0 8px; }
.legal p { margin: 0 0 16px; color: var(--text-2); line-height: 1.7; text-wrap: pretty; }
.legal ul, .legal ol { margin: 0 0 18px; padding-left: 22px; color: var(--text-2); line-height: 1.7; }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--blue); }
.legal strong { color: var(--navy); font-weight: 600; }
.legal a { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(10,115,183,.35); text-underline-offset: 3px; }
.legal a:hover { color: var(--navy); text-decoration-color: currentColor; }
/* site.css .note is the navy CTA box on /results; reset what it sets. */
.legal .note { display: block; background: var(--blue-wash); border: 1px solid #CFE4F4; border-left: 4px solid var(--blue); border-radius: 14px; padding: 18px 22px; margin: 28px 0; font-size: 15.5px; line-height: 1.65; color: var(--text-2); }
.legal .note p { margin: 0; font-size: inherit; }
.legal table { width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-size: 15px; }
.legal th, .legal td { text-align: left; padding: 11px 14px; border: 1px solid var(--border); vertical-align: top; color: var(--text-2); }
.legal th { background: var(--gray-bg); font-weight: 600; color: var(--navy); }
@media (max-width: 860px) {
  .legal { margin: 8px 20px 72px; padding: 40px 36px 44px; }
}
@media (max-width: 600px) {
  .legal { margin: 4px 16px 56px; padding: 30px 20px 34px; border-radius: 18px; }
  .legal .intro { font-size: 17px; margin: 18px 0 28px; padding-bottom: 24px; }
  .legal h2 { font-size: 21px; margin-top: 38px; }
  .legal p, .legal ul, .legal ol { font-size: 16px; }
  .legal table { display: block; overflow-x: auto; }
}