/* Legal document pages. Generated by src/legal/build.ts; this stylesheet is hand
   written. Brand tokens come from site.css, which is loaded first.

   These pages are read under pressure, by a customer deciding whether to trust
   you or a lawyer checking a clause. So: high contrast, generous measure, real
   heading hierarchy, and nothing set smaller than it needs to be. "Clear and
   conspicuous" is a legal standard as well as a design one. */

.legal-body {
  background: var(--cream);
  color: var(--ocean);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ocean);
  color: var(--cream);
  border-radius: 0 0 8px 0;
}
.skip:focus {
  left: 0;
}

.legal {
  max-width: 74ch;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 48px) 24px 72px;
}

.legal-stamp {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--disabled);
  margin: 0 0 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.legal h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.legal h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.3;
  margin: 44px 0 12px;
}
.legal h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 28px 0 8px;
}

.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.68;
  color: #2A3145;
}
.legal p {
  margin: 0 0 16px;
}
.legal ul,
.legal ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
.legal li {
  margin-bottom: 7px;
}
.legal strong {
  color: var(--ocean);
  font-weight: 600;
}
.legal a {
  color: #8A5A0A;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal a:focus-visible,
.legal-more a:focus-visible,
.skip:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.legal hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 36px 0;
}

/* Tables carry the sub-processor list and the retention schedule, so they have to
   stay readable on a phone. The wrapper scrolls, the page never does. */
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 14.5px;
  display: block;
  overflow-x: auto;
}
.legal th,
.legal td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal th {
  font-weight: 600;
  color: var(--ocean);
  border-bottom-color: var(--ocean);
  white-space: nowrap;
}

.legal blockquote {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: rgba(254, 162, 0, 0.09);
  border-left: 3px solid var(--orange);
}
.legal blockquote p:last-child {
  margin-bottom: 0;
}

.legal-more {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.legal-more h2 {
  font-size: 13px;
  font-family: var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--disabled);
  margin: 0 0 14px;
}
.legal-more a {
  display: inline-block;
  margin: 0 18px 8px 0;
  color: var(--ocean);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 14.5px;
}

.legal-foot {
  padding: 24px;
  text-align: center;
  font-size: 12.5px;
  color: var(--disabled);
  border-top: 1px solid var(--line);
}
.legal-foot p {
  margin: 0;
}

/* Privacy request form. Someone exercising a data right is often already annoyed,
   so this is deliberately plain and large: no chat widget, no sign-in, no jargon. */
.pr-form { margin: 8px 0 32px; display: grid; gap: 6px; max-width: 34rem; }
.pr-fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin: 0 0 18px; display: grid; gap: 10px; }
.pr-legend { font-size: 13px; font-weight: 600; padding: 0 6px; color: var(--ocean); }
.pr-radio { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.5; cursor: pointer; }
.pr-radio input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--orange); cursor: pointer; }
.pr-label { font-size: 13px; font-weight: 600; margin-top: 12px; color: var(--ocean); }
.pr-opt { font-weight: 400; color: var(--disabled); }
.pr-input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; color: var(--ocean); font: 400 15px/1.5 var(--sans); box-sizing: border-box;
}
.pr-input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-color: transparent; }
.pr-submit {
  margin-top: 18px; padding: 12px 22px; border: 0; border-radius: 999px;
  background: var(--ocean); color: var(--cream); font: 600 14px/1.2 var(--sans); cursor: pointer; justify-self: start;
}
.pr-submit:hover { background: #222F59; }
.pr-submit:disabled { opacity: .55; cursor: default; }
.pr-msg { margin: 10px 0 0; font-size: 13.5px; min-height: 1em; }
.pr-msg.bad { color: #A82B1B; }
.pr-done { font-size: 15.5px; line-height: 1.6; padding: 16px 18px; border-radius: 10px; background: rgba(254,162,0,.09); border-left: 3px solid var(--orange); }

/* The shared .nav is built for the dark marketing pages: transparent background,
   cream links, white logo. On these cream document pages that renders white on
   white and the whole header disappears. Give it the brand ground it assumes. */
.legal-body .nav {
  background: var(--ocean);
  border-bottom: 1px solid rgba(245, 241, 235, .12);
}
.legal-body .nav .nav-links a { color: rgba(245, 241, 235, .82); }
.legal-body .nav .nav-links a:hover,
.legal-body .nav .nav-links a:focus-visible { color: var(--orange); }