/* ==========================================================================
   Aavanu — legal pages

   Privacy and Terms only. Everything visual comes from `styles.css`; this file
   is the reading column and the few pieces of furniture a long document needs
   that a marketing page does not — a table of contents, a definition list, and
   a note block.

   Deliberately plain. Somebody reads this because they want to know what
   happens to their phone number, and design that gets in the way of that is
   design working against the document.
   ========================================================================== */

.legal {
  padding: calc(var(--s-giant) + 56px) 0 var(--s-giant);
}

.legal__wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--s-xl);
}

.legal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--wash-sky);
  color: var(--slate-700);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.legal h1 {
  margin: var(--s-xl) 0 var(--s-md);
}

.legal__meta {
  color: var(--ink-60);
  font-size: 0.9375rem;
  margin-bottom: var(--s-xxxl);
}

/* The one-paragraph answer, for the person who is not going to read the rest.
   It is not a summary of the document; it is the document's promise. */
.legal__summary {
  padding: var(--s-xl);
  border: 1px solid var(--grey-border);
  border-radius: var(--r-lg);
  background: var(--wash-mint);
  margin-bottom: var(--s-xxxl);
}

.legal__summary p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--slate-900);
}

.legal__toc {
  margin-bottom: var(--s-huge);
  padding: var(--s-xl);
  border: 1px solid var(--grey-border);
  border-radius: var(--r-lg);
  background: var(--grey-bg);
}

.legal__toc h2 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-60);
  margin: 0 0 var(--s-md);
}

.legal__toc ol {
  margin: 0;
  padding-left: 1.25em;
  columns: 2;
  column-gap: var(--s-xxl);
}

.legal__toc li {
  margin-bottom: var(--s-sm);
  break-inside: avoid;
}

.legal section {
  margin-bottom: var(--s-huge);
  scroll-margin-top: 88px;
}

.legal h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 var(--s-lg);
}

.legal h3 {
  font-size: 1.0625rem;
  margin: var(--s-xl) 0 var(--s-sm);
}

.legal p,
.legal li {
  color: var(--slate-700);
  line-height: 1.7;
}

.legal p {
  margin: 0 0 var(--s-lg);
}

.legal ul {
  margin: 0 0 var(--s-lg);
  padding-left: 1.25em;
}

.legal li {
  margin-bottom: var(--s-sm);
}

.legal strong {
  color: var(--ink);
}

.legal a {
  color: var(--slate-900);
  text-underline-offset: 3px;
}

/* What is collected, why, and how long — the three questions, kept in a shape
   that can be scanned rather than read. */
.legal__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--s-xl);
  font-size: 0.9375rem;
}

.legal__table th,
.legal__table td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-md) var(--s-md);
  border-bottom: 1px solid var(--grey-border);
  color: var(--slate-700);
  line-height: 1.55;
}

.legal__table th {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.legal__table tbody th {
  white-space: normal;
  width: 34%;
}

.legal__note {
  padding: var(--s-lg) var(--s-xl);
  border-left: 3px solid var(--sky-deep);
  background: var(--wash-sky);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 0 0 var(--s-xl);
}

.legal__note p:last-child {
  margin-bottom: 0;
}

.legal__contact {
  padding: var(--s-xxl);
  border: 1px solid var(--grey-border);
  border-radius: var(--r-lg);
  background: var(--white);
}

@media (max-width: 640px) {
  .legal__toc ol {
    columns: 1;
  }

  .legal__table,
  .legal__table tbody,
  .legal__table tr,
  .legal__table th,
  .legal__table td {
    display: block;
    width: auto;
  }

  .legal__table thead {
    display: none;
  }

  .legal__table tr {
    padding: var(--s-md) 0;
    border-bottom: 1px solid var(--grey-border);
  }

  .legal__table th,
  .legal__table td {
    border: 0;
    padding: 2px 0;
  }
}