/* legal-v2.css : the reading column for /privacy and /terms on the folio system (VLP-1235).

   WHAT THIS FILE OWNS
   Only the legal-page reading column: the shell width, the eyebrow/h1/intro/updated header
   block above the article, section spacing and heading scale inside `.legal-content`, list and
   table readability, and link colour. Chrome (nav, footer, buttons, tokens, reset, base type) is
   `/folio.css`; this file never restates it. Nothing here is page-specific beyond what these two
   pages share, so both load the same file.

   The markup itself is untouched from before this restyle: `.legal-shell`, `.legal-eyebrow`,
   `.legal-intro`, `.legal-updated`, `.legal-content`, `.legal-callout` and `.legal-footer` are the
   pre-existing class names the legal text already carries. This file only styles them onto the
   folio tokens; it does not rename or add any of them. */

.legal-shell{
  width:min(100% - 2 * var(--pad), 72ch);
  margin:0 auto;
  padding:calc(var(--nav-h) + var(--nav-inset) + 56px) 0 56px;
}

.legal-eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.legal-eyebrow::before{content:"";width:18px;height:1px;background:var(--blue);flex:none}

.legal-shell h1{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.005em;
  color:var(--text);
  font-size:clamp(34px,6vw,58px);
  max-width:16ch;
  margin:14px 0 18px;
}

.legal-intro{
  color:var(--muted);
  font-size:17px;
  line-height:1.6;
  max-width:60ch;
}

.legal-updated{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dim);
  margin-top:22px;
}

.legal-content{
  margin-top:56px;
  font-size:16.5px;
  line-height:1.65;
}

.legal-content section + section{
  margin-top:52px;
  padding-top:52px;
  border-top:1px solid var(--line);
}

.legal-content h2{
  font-family:var(--sans);
  font-size:22px;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.3;
  color:var(--text);
  margin:0 0 14px;
}

.legal-content p{margin:14px 0 0;color:var(--muted)}
.legal-content p:first-child{margin-top:0}
.legal-content strong{color:var(--text);font-weight:600}

.legal-content ul,
.legal-content ol{
  margin:16px 0 0;
  padding-left:1.3em;
  color:var(--muted);
}
.legal-content li{margin-top:10px;line-height:1.6}
.legal-content li:first-child{margin-top:0}
.legal-content li::marker{color:var(--dim)}

.legal-content table{
  margin:18px 0 0;
  width:100%;
  border-collapse:collapse;
  font-size:15.5px;
}
.legal-content th,
.legal-content td{
  padding:10px 14px 10px 0;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line);
  color:var(--muted);
}
.legal-content th{color:var(--text);font-weight:600}

.legal-content a{color:var(--blue);text-underline-offset:.2em}
.legal-content a:hover{text-decoration:underline}

.legal-callout{
  margin-top:18px;
  padding:16px 20px;
  border-left:3px solid var(--blue);
  background:rgba(76,141,255,.08);
  border-radius:0 8px 8px 0;
}
.legal-callout p{margin-top:0}

.legal-content button#first-party-opt-out{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.03em;
  color:var(--ink);
  background:var(--text);
  border:none;
  border-radius:99px;
  padding:9px 16px;
  cursor:pointer;
}
.legal-content button#first-party-opt-out:hover{box-shadow:0 0 0 1px rgba(244,241,234,.35)}
.legal-content #first-party-opt-out-status{
  display:inline-block;
  margin-left:10px;
  color:var(--dim);
  font-size:14.5px;
}

.legal-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--line);
  color:var(--dim);
  font-size:14px;
}
.legal-footer a{color:var(--muted)}
.legal-footer a:hover{color:var(--blue)}

@media (max-width:600px){
  .legal-shell{padding-top:calc(var(--nav-h) + var(--nav-inset) + 40px);padding-bottom:16px}
  .legal-content section + section{margin-top:40px;padding-top:40px}
  .legal-footer{flex-direction:column;align-items:flex-start}
}