/* ==========================================================================
   LEGAL PAGES — privacy policy, terms of use
   ==========================================================================
   Loaded after styles.css, which supplies the design tokens, the font faces
   and the header/footer rules. This file only adds what a long-form document
   page needs: a readable measure, heading rhythm and list spacing.
   ========================================================================== */

.legal-hero{
  background:var(--rust);
  color:var(--cream);
  padding:clamp(7rem,12vw,10rem) 0 clamp(3rem,6vw,4.5rem);
}
.legal-hero h1{
  font-size:clamp(2.2rem,6vw,4rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0 0 .9rem;
}
.legal-hero p{
  font-size:clamp(.95rem,1.5vw,1.05rem);
  opacity:.85;
  margin:0;
}

.legal-body{
  padding:clamp(3rem,7vw,5.5rem) 0 clamp(4rem,8vw,7rem);
}
/* Two-column on wide screens: the contents list parks in the left rail and
   follows you down the page, while the prose keeps a readable measure on the
   right. Below 1000px it collapses to one column and the contents sit inline
   above the text. Previously the prose was capped at 68ch inside an 1180px
   .wrap, which left roughly half the page empty on a desktop. */
.legal-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
@media (min-width:1000px){
  .legal-layout{ grid-template-columns:230px minmax(0,1fr); }
  .legal-layout .legal-toc{
    position:sticky;
    top:6.5rem;
    margin:0;
  }
}
/* Continuous prose reads best at roughly 70-80 characters a line. On the wide
   layout the grid track is already close to that, so let the column fill it
   rather than leaving a stripe of unused space at the right. */
.legal-prose{ max-width:78ch; }

.legal-prose h2{
  font-size:clamp(1.25rem,2.4vw,1.6rem);
  font-weight:700;
  line-height:1.25;
  margin:2.8rem 0 .9rem;
  scroll-margin-top:6rem;      /* clear the sticky header on anchor jumps */
}
.legal-prose h2:first-of-type{ margin-top:0; }
.legal-prose h3{
  font-size:clamp(1.02rem,1.7vw,1.15rem);
  font-weight:600;
  margin:1.8rem 0 .6rem;
}
.legal-prose p,
.legal-prose li{
  font-size:1rem;
  line-height:1.75;
  color:var(--charcoal-soft);
}
.legal-prose p{ margin:0 0 1.1rem; }
.legal-prose ul,
.legal-prose ol{ margin:0 0 1.2rem; padding-left:1.3rem; }
.legal-prose li{ margin-bottom:.5rem; }
.legal-prose li::marker{ color:var(--rust); }
.legal-prose strong{ color:var(--charcoal); font-weight:600; }
.legal-prose a{
  color:var(--rust);
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
}
.legal-prose a:hover{ color:var(--rust-dark); }

/* Definition-style rows for the "what we collect" table. */
.legal-table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1.4rem;
  font-size:.95rem;
}
.legal-table th,
.legal-table td{
  text-align:left;
  padding:.7rem .9rem;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  line-height:1.6;
}
.legal-table th{
  font-weight:600;
  color:var(--charcoal);
  background:var(--rust-tint);
}
.legal-table td{ color:var(--charcoal-soft); }
/* Narrow screens: let a wide table scroll rather than break the layout. */
.legal-table-wrap{ overflow-x:auto; margin-bottom:1.4rem; }

.legal-meta{
  border-left:3px solid var(--rust);
  padding:.2rem 0 .2rem 1.1rem;
  margin:0 0 2.4rem;
}
.legal-meta p{ margin:0 0 .3rem; font-size:.92rem; }
.legal-meta p:last-child{ margin-bottom:0; }

/* Contact block at the foot of each document. */
.legal-contact{
  background:var(--cream-dim);
  border-radius:var(--radius);
  padding:1.6rem 1.8rem;
  margin-top:2.4rem;
}
.legal-contact p:last-child{ margin-bottom:0; }

.legal-back{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:3rem;
  font-weight:500;
  color:var(--rust);
  text-decoration:none;
}
.legal-back:hover{ text-decoration:underline; }

/* A short table of contents, useful on documents this long. */
.legal-toc{
  background:var(--cream-dim);
  border-radius:var(--radius);
  padding:1.4rem 1.6rem;
  margin:0 0 2.6rem;
}
.legal-toc a{
  color:var(--charcoal-soft);
  text-decoration:none;
}
.legal-toc a:hover{ color:var(--rust); text-decoration:underline; }
.legal-toc h2{
  font-size:.78rem !important;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0 0 .8rem !important;
  opacity:.6;
}
.legal-toc ol{ margin:0; padding-left:1.2rem; }
.legal-toc li{ margin-bottom:.35rem; font-size:.95rem; }