/* Document typography for the policy pages. Loads after styles.css and reuses its
   tokens, nav and footer — these pages are part of the site, not a bolted-on annex. */

/* Hero and body share one measure. Both are 828px wide with 24px of side padding,
   so the h1 and the prose below it start on the same vertical line. Percentage
   padding would not do this — it resolves against the viewport, not the element,
   so the two boxes would drift apart as the window widens. */
.legal-hero {
  padding: 130px 0 48px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--border);
}
.legal-hero-inner {
  max-width: 828px;
  margin: 0 auto;
  padding: 0 24px;
}

.legal-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.legal-hero h1 {
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 14px;
}
.legal-meta {
  font-size: 15px;
  color: var(--muted);
}
.legal-meta strong { color: var(--text); font-weight: 600; }

.legal-body {
  max-width: 828px;
  margin: 0 auto;
  padding: 48px 24px 90px;
  font-size: 16.5px;
  line-height: 1.72;
  color: #2b2b3d;
}
.legal-body h2 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 46px 0 14px;
  scroll-margin-top: 90px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 28px 0 8px;
}
.legal-body p { margin-bottom: 16px; }
.legal-body ul, .legal-body ol { margin: 0 0 16px 22px; }
.legal-body li { margin-bottom: 9px; }
.legal-body a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--orange-hover); }
.legal-body strong { font-weight: 650; color: var(--text); }

/* The summary box at the top of each policy. The point of these pages is that
   someone actually reads them, and almost nobody reads twelve screens of prose. */
.legal-summary {
  background: var(--orange-pale);
  border: 1px solid rgba(194, 65, 12, 0.18);
  border-left: 4px solid var(--orange);
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 40px;
}
.legal-summary h2 {
  margin: 0 0 10px;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.legal-summary p:last-child, .legal-summary ul:last-child { margin-bottom: 0; }

.legal-toc {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 26px;
  margin-bottom: 44px;
}
.legal-toc h2 {
  margin: 0 0 10px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.legal-toc ol { margin: 0 0 0 20px; }
.legal-toc li { margin-bottom: 5px; }
.legal-toc a { color: var(--text); text-decoration: none; }
.legal-toc a:hover { color: var(--orange); text-decoration: underline; }

/* Data tables — what we collect, why, and how long we keep it. */
.legal-table-wrap { overflow-x: auto; margin: 0 0 22px; }
.legal-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 15px;
}
.legal-table th, .legal-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.legal-table th {
  background: var(--bg);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.legal-table tr:last-child td { border-bottom: none; }

.legal-callout {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 22px;
}
.legal-callout.warn {
  background: #FFF9EC;
  border-color: rgba(165, 97, 0, 0.25);
}

/* Contact block at the foot of each policy. */
.legal-contact {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.82);
  border-radius: 14px;
  padding: 28px 30px;
  margin-top: 46px;
}
.legal-contact h2 { color: var(--white); margin: 0 0 10px; font-size: 19px; }
.legal-contact p { margin-bottom: 8px; }
.legal-contact a { color: #FFB79A; }

.legal-backlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 34px;
  font-size: 15px;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
}
.legal-backlink:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .legal-hero { padding-top: 110px; }
  .legal-body { font-size: 16px; }
}