/* Crew Tower legal pages - privacy, terms, refunds.

   One narrow column of prose. No cards, no accents, no illustration: these are
   pages people open when something has gone wrong or when they are deciding
   whether to trust us, and both readers want plain text they can scan and
   quote. Everything structural (nav, footer, colours, type scale, .wrap) comes
   from styles.css; this file only sets the reading column. */

.legal {
  background: var(--wash);
  /* the nav is fixed and solid on these pages, so the section clears it itself */
  padding-block: clamp(116px, 13vw, 156px) clamp(88px, 10vw, 128px);
  min-height: 100vh;
}

/* Measure before page width. Long-form terms are read one line at a time. */
.legal .wrap { max-width: 720px; }

.legal-head {
  padding-bottom: clamp(30px, 3.5vw, 40px);
  margin-bottom: clamp(34px, 4vw, 46px);
  border-bottom: 1px solid var(--edge);
}
.legal-date {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--mist);
  letter-spacing: -.005em;
}

/* The three-sentence summary at the top of each page. Set apart because it is
   the part most people will actually read, and it has to be findable without
   reading anything else. */
.legal-summary {
  margin: 0 0 clamp(36px, 4vw, 48px);
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 26px);
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--edge);
}
.legal-summary p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  letter-spacing: -.01em;
}
.legal-summary p + p { margin-top: 12px; }

.legal section + section {
  margin-top: clamp(36px, 4vw, 48px);
}

.legal h2 {
  margin: 0 0 clamp(12px, 1.4vw, 16px);
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.025em;
  color: var(--ink);
}
.legal h3 {
  margin: clamp(22px, 2.4vw, 28px) 0 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
}

.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate);
  letter-spacing: -.01em;
}
.legal p { margin: 0 0 14px; }
.legal p:last-child { margin-bottom: 0; }

.legal ul {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.legal li {
  position: relative;
  padding: 5px 0 5px 20px;
}
.legal li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--iris);
  opacity: .5;
}

.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--edge);
  transition: text-decoration-color .18s ease;
}
.legal a:hover { text-decoration-color: var(--iris); }

/* Used for file paths and endpoints. A privacy policy that names the exact
   file it reads is checkable, and checkable is the whole argument. */
.legal code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .88em;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--paper);
  border: 1px solid var(--edge);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* The data tables. They scroll on their own rather than pushing the page
   sideways on a phone. */
.legal-table {
  margin: 0 0 14px;
  overflow-x: auto;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--paper);
}
.legal-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.legal-table th,
.legal-table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  color: var(--slate);
  letter-spacing: -.01em;
}
.legal-table th {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.legal-table tr + tr th,
.legal-table tr + tr td { border-top: 1px solid var(--edge); }