/* Shared styles for the three long-form pages: /terms, /privacy and /support.
   Loaded after tokens.css and styles.css, never instead of them: the header, the footer,
   the colors and the type all still come from the same code the homepage renders.

   A file rather than a <style> block copied into each page. The 404 and auth pages each
   carry their own block because each is one screen of markup that nothing else shares;
   these three share every rule below, and three copies of the same rules drift.

   One more difference from the rest of the site, and the reason for .lg-main: index.html,
   404.html and the auth pages render their content TWICE, once in .view-mobile and once
   in .view-desktop, because the two orientations get different layouts. A legal document
   is far too long to keep two copies of and have both stay correct, so these pages
   duplicate only the header and the footer, and render the document itself once, between
   them, at a width that reads well in either orientation. */

body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.lg-main{flex:1}

/* .view-mobile / .view-desktop normally wrap a whole page tree, and the sticky header
   sits inside .page or .dt-page, a box as tall as the document. Here they wrap the header
   alone, and that breaks stickiness: a sticky element can never travel outside its
   containing block, so a wrapper only as tall as the header lets the header scroll away
   at the first swipe. display:contents drops the wrapper's box and leaves the header a
   direct child of body, which is the full height of the page, so it sticks the way it
   does everywhere else on the site.

   Both classes are qualified with .lg-shell because legal.css loads after styles.css:
   a bare .lg-shell{display:contents} would outrank .view-desktop{display:none} on source
   order alone and render the desktop header in portrait, on top of the mobile one. */
.view-mobile.lg-shell{display:contents}
.view-desktop.lg-shell{display:none}
@media (orientation:landscape){
  .view-mobile.lg-shell{display:none}
  .view-desktop.lg-shell{display:contents}
}

/* Matches the mobile gutter in portrait and the desktop container's in landscape, so the
   text lines up under whichever header is showing. The 720px cap is the same one
   .site-header__inner and .site-footer__inner use, so on a wide portrait screen the
   column sits exactly under the logo above it instead of 20px outside it. It is also a
   good measure to read a long document at, which is why landscape keeps it. */
.lg-wrap{
  max-width:720px;
  margin:0 auto;
  padding:0 var(--fluid-gutter);
}
@media (orientation:landscape){
  .lg-wrap{padding:0 clamp(20px,5vw,64px)}
}

.lg-article{padding:40px 0 72px}

.lg-article h1{
  font-family:var(--font-display-bold);
  font-weight:var(--font-display-bold-weight);
  font-size:clamp(30px,3.6vw,42px);
  line-height:1.1;
  letter-spacing:-0.5px;
  color:var(--ink);
  margin:8px 0 6px;
  text-wrap:pretty;
}
.lg-updated{
  font-family:var(--font-body);
  font-weight:var(--font-body-weight-bold);
  font-size:13px;
  color:var(--ink-soft);
  margin:0 0 28px;
}
.lg-article h2{
  font-family:var(--font-display-semibold);
  font-weight:var(--font-display-semibold-weight);
  font-size:clamp(19px,2.1vw,22px);
  line-height:1.25;
  letter-spacing:-0.2px;
  color:var(--ink);
  margin:36px 0 10px;
  /* Anchor links land clear of the sticky header, which is taller in landscape. */
  scroll-margin-top:96px;
}
.lg-article p{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0 0 14px;
}
.lg-article strong{
  font-weight:var(--font-body-weight-bold);
  color:var(--ink);
}
.lg-article a{
  font-weight:var(--font-body-weight-semibold);
  color:var(--grass);
}
.lg-article a:hover{color:var(--grass-deep)}

/* The opening paragraph of each page, one step up in size. */
.lg-lead{font-size:16.5px !important;line-height:1.6 !important}

.lg-article ul{
  margin:0 0 16px;
  padding-left:20px;
}
.lg-article li{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.65;
  color:var(--ink-soft);
  margin-bottom:9px;
}
.lg-article li::marker{color:var(--grass)}

/* Sections 12 and 13 of the Terms are set in caps by convention. A run of caps at body
   size shouts across a 760px column, so it sits one step down. */
.lg-caps p{font-size:13.5px;line-height:1.6}

/* Contact and "start here" blocks, on the site's standard card. */
.lg-card{
  padding:20px;
  margin:0 0 8px;
}
.lg-card p:last-child{margin-bottom:0}
.lg-card__title{
  font-family:var(--font-display-semibold);
  font-weight:var(--font-display-semibold-weight);
  font-size:17px;
  color:var(--ink);
  margin:0 0 8px;
}

/* The support page's short answer list: a question in ink, its answer under it. */
.lg-qa{margin:0 0 18px}
.lg-qa__q{
  font-family:var(--font-body);
  font-weight:var(--font-body-weight-bold);
  font-size:15px;
  color:var(--ink);
  margin:0 0 4px;
}
.lg-qa p{margin-bottom:0}

@media (max-width:760px){
  .lg-article{padding-top:28px}
}