/* ==========================================================================
   legal.css: privacy.html, terms.html, accessibility.html. Boards legal-privacy,
   legal-terms and legal-accessibility (1280), snapshot v353. Flat navy, one 760px
   reading column (840 with its padding). The boards draw no phone version: below
   768px the column takes the 20px phone gutter and the heading steps down.
   The logo the boards place above the heading is the frame's header logo here.
   ========================================================================== */
.lg-main{box-sizing:border-box;max-width:840px;margin:0 auto;padding:56px 40px 96px;
  font-size:16.64px;line-height:1.6;color:var(--bone)}
.lg-main h1{margin:0;font-family:var(--font-display);font-size:48px;line-height:1.08;font-weight:700;letter-spacing:-.02em;color:var(--bone)}
.lg-date{margin:12px 0 0;font-size:14px;color:var(--muted)}
.lg-lead{margin:24px 0 0;font-size:18px;line-height:1.55;color:var(--bone)}
.lg-main h2{margin:48px 0 0;font-family:var(--font-display);font-size:24px;line-height:1.2;font-weight:600;color:var(--bone)}
.lg-main h3{margin:24px 0 0;font-family:var(--font-display);font-size:13px;line-height:1.2;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lg-main p:not(.lg-date):not(.lg-lead){margin:12px 0 0;color:var(--muted)}
.lg-main ul{margin:12px 0 0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:8px;color:var(--muted)}
.lg-main li{padding-left:4px}
.lg-main b{color:var(--bone);font-weight:600}
/* links as the boards draw them: teal, semibold, no underline (D-159). The vertical padding gives
   each inline link a 44px tap height without moving the line (as the FAQ link, S11). */
.lg-a{display:inline-block;padding:12px 0;margin:-12px 0;color:var(--teal);font-weight:600;text-decoration:none}
/* a link that follows another in the same paragraph takes no top padding: when it wraps under the first,
   its padding would sit over the first link's text and steal the tap (audit 10 Oct, privacy and terms at 390) */
.lg-a ~ .lg-a{padding-top:0;margin-top:0}
.lg-a:hover{color:var(--teal-hi)}

@media (max-width:767px){
  .lg-main{padding:40px 20px 64px;font-size:16px}
  .lg-main h1{font-size:36px}
  .lg-lead{font-size:17px}
  .lg-main h2{margin-top:40px;font-size:22px}
}