/* Legal pages (terms.html, privacy.html). The same pattern as a wide story block: on a wide
   screen the contents hold the left and the text runs to the far edge, so nothing stops
   halfway across the page. On narrow screens the contents sit above the text. */
.legal-hero{margin:0 0 var(--s7)}
.legal-hero .eyebrow{
  font-size:var(--fs-cap);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);margin:0 0 var(--s3);
}
.legal-hero h1{
  font-size:clamp(30px,4.6vw,48px);line-height:1.06;letter-spacing:-.025em;
  color:var(--navy);margin:0;text-wrap:balance;
}
.legal-hero .lede{font-size:var(--fs-lg);line-height:1.55;color:var(--g700);margin:var(--s4) 0 0}
.legal-meta{margin:var(--s4) 0 0;font-size:var(--fs-sm);color:var(--g500)}
.legal-draft{margin:0 0 var(--s7)}

.legal-body{display:grid;gap:var(--s7)}
@media (min-width:1080px){
  .legal-body{grid-template-columns:minmax(0,260px) minmax(0,1fr);align-items:start}
  .legal-toc{position:sticky;top:calc(var(--header-h) + var(--s4))}
}
.legal-toc{border-left:3px solid var(--blue-100);padding-left:var(--s4)}
.legal-toc p{margin:0 0 var(--s3);font-size:var(--fs-cap);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g500)}
.legal-toc ol{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.legal-toc a{display:block;padding:5px 0;font-size:var(--fs-sm);line-height:1.4;color:var(--g700);text-decoration:none}
.legal-toc a:hover{color:var(--blue)}

.legal-text section{padding-bottom:var(--s6);margin-bottom:var(--s6);border-bottom:1px solid var(--g200);scroll-margin-top:calc(var(--header-h) + var(--s4))}
.legal-text section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.legal-text h2{
  margin:0 0 var(--s4);color:var(--navy);text-wrap:balance;
  font-size:clamp(20px,2.1vw,25px);line-height:1.25;letter-spacing:-.012em;
}
.legal-text h3{margin:var(--s5) 0 var(--s3);color:var(--navy);font-size:var(--fs-base);font-weight:600}
.legal-text p,.legal-text li{
  color:var(--g700);line-height:1.72;font-size:var(--fs-base);
  text-align:justify;text-align-last:start;hyphens:none;-webkit-hyphens:none;
}
.legal-text p{margin:0 0 var(--s4)}
.legal-text p:last-child{margin-bottom:0}
.legal-text ul{margin:0 0 var(--s4);padding-left:1.25em;display:grid;gap:var(--s2)}
.legal-text a{color:var(--blue)}
.legal-text strong{color:var(--g900);font-weight:600}

/* Who receives what. A table on a wide screen, stacked rows on a phone. */
.legal-table{width:100%;border-collapse:collapse;margin:0 0 var(--s4);font-size:var(--fs-sm)}
.legal-table th,.legal-table td{padding:var(--s3);border-bottom:1px solid var(--g200);text-align:left;vertical-align:top;line-height:1.55;color:var(--g700)}
.legal-table th{color:var(--navy);font-weight:600;background:var(--g50)}
@media (max-width:700px){
  .legal-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .legal-table tr{display:block;border:1px solid var(--g200);border-radius:var(--r-md,8px);margin-bottom:var(--s3);padding:var(--s2) 0}
  .legal-table td{display:block;border:0;padding:var(--s1) var(--s3)}
  .legal-table td::before{content:attr(data-label);display:block;font-size:var(--fs-cap);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g500)}
}

/* Details the operator still has to confirm. Visible on purpose, so none goes live unnoticed. */
.legal-todo{background:#FFF4D6;color:var(--warn);padding:0 4px;border-radius:4px;font-weight:600}

/* Owner request, 14 October: a "•" before every list item, and the current section marked in
   the page contents while reading. */
.legal-text ul{list-style:none;padding-left:1.25em}
.legal-text ul>li{position:relative}
.legal-text ul>li::before{content:"\2022";position:absolute;left:-1em;color:var(--g700)}
.legal-toc a{position:relative;transition:color .15s ease}
.legal-toc a.is-current{color:var(--blue);font-weight:600}
.legal-toc a.is-current::before{content:"";position:absolute;left:calc(-1*var(--s4) - 3px);top:4px;bottom:4px;width:3px;border-radius:2px;background:var(--blue)}

/* Owner request, 14 October: a vertical line between the contents list and the text. */
@media (min-width:1080px){.legal-text{border-left:1px solid var(--g200);padding-left:var(--s7)}}