/* Legal pages (/terms/, /privacy/) — the marketing site's chrome around a plain document.
 *
 * Loaded AFTER styles.css, which it depends on for the nav, the footer, the type scale and the
 * palette. It only adds the document body and overrides the two things the marketing pages take
 * for granted: main's hero gradient, and body's 1280px floor.
 *
 * That floor is the important one. These are the only pages on the site a PATIENT opens — the
 * intake form and the portal's account menu both link to /privacy/ — and they open it on a
 * phone. The rest of the site is desktop-only on purpose; this cannot be.
 *
 * Section numbers come from a CSS counter rather than the markup, so the documents can be
 * reordered without renumbering anything by hand. */

.lg {
  background: #fff;                 /* beats main's gradient: 0,1,0 over 0,0,1 */
  border-bottom: 1px solid var(--line);
}
.lg__inner {
  max-width: 940px; margin: 0 auto;
  padding: 84px 40px 104px;
}

.lg h1 {
  margin: 0;
  font-size: 52px; line-height: 1.1; font-weight: 800;
  letter-spacing: -0.028em; color: var(--ink);
}
.lg__updated {
  margin: 24px 0 0;
  font-size: 17px; color: var(--muted);
}
.lg__lede {
  margin: 30px 0 0;
  font-size: 19px; line-height: 1.72; color: var(--body);
}

.lg__body { counter-reset: sec; margin-top: 10px }
.lg__body h2 {
  counter-increment: sec;
  margin: 52px 0 14px;
  font-size: 27px; line-height: 1.25; font-weight: 700;
  letter-spacing: -0.022em; color: var(--ink);
}
.lg__body h2::before { content: counter(sec) ". " }

.lg__body p { margin: 0 0 16px; font-size: 17.5px; line-height: 1.75; color: var(--body) }
/* styles.css strips markers off every list on the site; a legal document wants them back */
.lg__body ul { margin: 0 0 16px; padding-left: 22px; list-style: disc }
.lg__body li::marker { color: #b4c2d6 }
.lg__body li { margin: 0 0 9px; font-size: 17.5px; line-height: 1.7; color: var(--body) }
.lg__body strong { color: var(--ink-2); font-weight: 700 }
.lg__body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px }
.lg__body a:hover { text-decoration-thickness: 2px }

/* the two-column fact tables the documents already use for retention and billing */
.lg__body .keep {
  margin: 10px 0 22px;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: #fbfdff;
}
.lg__body .keep div {
  display: flex; gap: 20px; padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 16.5px; line-height: 1.65; color: var(--body);
}
.lg__body .keep div:last-child { border-bottom: 0 }
.lg__body .keep b { flex: none; width: 118px; color: var(--ink); font-weight: 700 }
.lg__body .keep--wide b { width: 146px }

/* ---- phone ---------------------------------------------------------------------------- */
/* The nav, the footer and the 1280px floor are NOT handled here any more: styles.css now
   carries a full responsive layer for all three, and a second copy in this file only meant the
   two could disagree — at 820px the marketing page showed its nav links while a legal page hid
   them. What is left below is what is genuinely specific to a legal DOCUMENT. */
@media (max-width: 860px) {
  .lg__inner { padding: 44px 22px 64px }
  .lg h1 { font-size: 33px; letter-spacing: -0.02em }
  .lg__updated { margin-top: 18px; font-size: 15px }
  .lg__lede { margin-top: 22px; font-size: 17px }
  .lg__body h2 { margin: 38px 0 12px; font-size: 21px }
  .lg__body p, .lg__body li { font-size: 16.5px }

  /* the label column stops being a column and becomes a heading */
  .lg__body .keep div { display: block }
  .lg__body .keep b { width: auto; display: block; margin-bottom: 3px }
}

/* A title that is a whole sentence rather than two words. Scoped to a min-width so it does not
 * fight the 33px phone size above, which a plain .lg h1.lg--long would outrank. */
@media (min-width: 861px) { .lg h1.lg--long { font-size: 46px } }