/* The legal pages (written by web/scripts/build_legal.py) in the site's design: a quiet opening like Pricing's, then
   the documents and this page's sections at the left, the text at a reading measure on the right, the way the
   pricing questions sit. Hairlines divide everything; the section being read is marked in the list. */
html{scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.lg-top{padding-top:clamp(150px,18vw,230px);padding-bottom:clamp(48px,6vw,84px);display:grid;gap:22px;justify-items:start;border-bottom:1px solid var(--line)}
.lg-top .st{max-width:11em}
.lg-meta{margin:0;font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.lg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(32px,6vw,100px);padding-block:clamp(48px,6vw,88px) clamp(100px,12vw,170px)}
.lg-h{margin:0 0 14px;font:600 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}

/* the left: the five documents, then this one's sections, held in view while the text scrolls */
.lg-side{position:sticky;top:104px;align-self:start;display:grid;gap:44px;max-height:calc(100vh - 128px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
.lg-side::-webkit-scrollbar{display:none}
.lg-docs{display:grid;justify-items:start}
.lg-docs a{padding:8px 0;font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink-3);transition:color .2s}
.lg-docs a:hover,.lg-docs a[aria-current="page"]{color:var(--ink)}
.lg-docs a[aria-current="page"]::before{content:"/ "}
.lg-toc{max-width:380px}
.lg-toc ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lg-toc a{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.35;color:var(--ink-3);text-decoration:none;transition:color .2s}
.lg-toc a .num{flex:none;padding-top:2px;transition:color .2s}
.lg-toc a:hover,.lg-toc a[aria-current="true"]{color:var(--ink)}
.lg-toc a[aria-current="true"] .num{color:var(--arc)}

/* the text */
.lg-prose{max-width:68ch;color:var(--ink-2)}
.lg-prose .lg-note{margin:0 0 clamp(40px,5vw,64px);padding:22px 26px;border:1px solid var(--line-2);font-size:15.5px;line-height:1.6;color:var(--ink)}
.lg-prose section + section{margin-top:clamp(36px,4vw,52px);padding-top:clamp(36px,4vw,52px);border-top:1px solid var(--line)}
.lg-prose h2{display:flex;align-items:baseline;gap:18px;margin:0 0 20px}
.lg-prose h2 .num{flex:none;min-width:1.8em;transform:translateY(-.3em)}
.lg-prose h3{margin:26px 0 10px;font:600 15px/1.3 var(--sans);color:var(--ink)}
.lg-prose p{margin:0 0 14px}
.lg-prose p:last-child{margin-bottom:0}
.lg-prose ul{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid var(--line)}
.lg-prose ul:last-child{margin-bottom:0}
.lg-prose li{position:relative;padding:12px 0 12px 24px;border-bottom:1px solid var(--line)}
.lg-prose li::before{content:"";position:absolute;left:2px;top:calc(12px + .8em);width:9px;height:1px;background:var(--ink-4)}
.lg-prose strong{font-weight:600;color:var(--ink)}
.lg-prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;transition:text-decoration-color .2s}
.lg-prose a:hover{text-decoration-color:var(--arc)}
.lg-prose code{font:400 .86em/1 var(--mono);color:var(--ink);background:var(--paper-2);padding:2px 5px;border-radius:2px}

@media (max-width:900px){
  .lg{grid-template-columns:minmax(0,1fr)}
  .lg-side{position:static;max-height:none;overflow:visible}
  .lg-docs{display:flex;flex-wrap:wrap;gap:0 22px}
  .lg-docs .lg-h{flex-basis:100%}
  .lg-toc{display:none}
}