/* Echo's Privacy Policy and Terms of Use (app/legal_pages.py), on top of web/sign-in.css: the same tokens, type and
   footer. Light only, like the sign-in page. One readable column; the text itself is vinesight.com's markup. */
body.si.lg { display: flex; flex-direction: column; }
.lg a { color: var(--si-ink); text-underline-offset: 2px; }
.lg a:hover { color: var(--si-blue); }
.lg a:focus-visible { outline: 3px solid var(--si-blue); outline-offset: 2px; border-radius: 2px; }

.lg-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 24px 48px; background: var(--si-sand); border-bottom: 1px solid var(--si-line);
}
.lg .lg-back { font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.lg .lg-back:hover { text-decoration: underline; }

.lg-main { flex: 1; padding: 48px 24px 24px; }
.lg-doc { max-width: 720px; margin: 0 auto; overflow-wrap: break-word; }
.lg-kicker { font-size: 13px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; }
.lg-doc h1 { margin-top: 10px; font-size: 36px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }

.lg-toc { margin: 28px 0 8px; padding: 20px 24px; background: var(--si-sand); border-radius: 12px; }
.lg .lg-toc h2 { margin: 0 0 10px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.lg-toc ol { margin: 0; padding: 0; list-style: none; columns: 2 260px; column-gap: 32px; }
.lg-toc li { break-inside: avoid; padding: 3px 0; font-size: 14px; }
.lg .lg-toc a { text-decoration: none; }
.lg .lg-toc a:hover { text-decoration: underline; }

.lg-text { margin-top: 28px; font-size: 16px; line-height: 1.65; }
.lg .lg-text p { margin: 0 0 14px; }
.lg .lg-text h2 {
  margin: 40px 0 14px; padding-top: 20px; border-top: 1px solid var(--si-line);
  font-size: 22px; line-height: 1.3; font-weight: 700; scroll-margin-top: 16px;
}
.lg .lg-text h3 { margin: 26px 0 10px; font-size: 17px; line-height: 1.35; font-weight: 700; scroll-margin-top: 16px; }
.lg-text ul { margin: 0 0 14px; padding-left: 22px; }
.lg-text li { margin: 0 0 8px; }
.lg .lg-text li p { margin: 0; }
.lg-text li::marker { color: var(--si-coral); }
.lg-text table { width: 100%; margin: 4px 0 18px; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.lg-text th, .lg-text td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--si-line); }
.lg-text thead th { background: var(--si-sand); border-bottom-color: var(--si-ink); }

.lg-return { margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--si-line); }
.lg-foot { padding: 0 24px 32px; margin-top: 32px; }

@media (max-width: 640px) {
  .lg-top { padding: 18px 16px; }
  .lg-main { padding: 32px 16px 16px; }
  .lg-doc h1 { font-size: 28px; }
  .lg-toc { padding: 16px 18px; }
  .lg-text { font-size: 15px; }
  .lg-text th, .lg-text td { padding: 8px 6px; font-size: 14px; }
  .lg-foot { padding: 0 16px 24px; }
}