/* Legal pages — account deletion and privacy policy.
 *
 * These two pages used to pull Bootstrap from a CDN. They are reachable
 * requirements for the app stores, so they must render even when a third-party
 * CDN does not, and they must look like Zero rather than like a framework
 * default. Written entirely in --z-* tokens; brand.css must load first.
 */

body {
  margin: 0;
  background: var(--z-surface-1);
  color: var(--z-ink-900);
  font-family: var(--z-font-sans);
  font-size: var(--z-text-body);
  line-height: var(--z-leading-body);
}

.legal-wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--z-space-8) var(--z-space-4);
}

.legal-card {
  background: var(--z-surface-0);
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-lg);
  padding: var(--z-space-6);
}

@media (min-width: 40rem) {
  .legal-card { padding: var(--z-space-8); }
}

.legal-eyebrow {
  margin: 0 0 var(--z-space-2);
  font-size: var(--z-text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--z-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--z-ink-400);
}

.legal-card h1 {
  margin: 0 0 var(--z-space-3);
  font-family: var(--z-font-display);
  font-size: var(--z-text-h1);
  font-weight: 700;
  line-height: var(--z-leading-tight);
  letter-spacing: var(--z-tracking-display);
}

.legal-card h2 {
  margin: var(--z-space-6) 0 var(--z-space-2);
  font-family: var(--z-font-display);
  font-size: var(--z-text-h3);
  font-weight: 600;
}

.legal-card p,
.legal-card li { color: var(--z-ink-500); }

.legal-card ul { padding-left: var(--z-space-5); }

.legal-card li { margin-bottom: var(--z-space-2); }

.legal-meta { font-size: var(--z-text-sm); color: var(--z-ink-400); }

/* Chrome, so it takes the brand token. On the public site no company is
 * resolved, so this is Zero's own graphite. */
.legal-back {
  display: inline-block;
  margin-top: var(--z-space-5);
  padding: var(--z-space-3) var(--z-space-5);
  min-height: 48px;
  box-sizing: border-box;
  border-radius: var(--z-r-pill);
  background: var(--z-brand-1);
  color: var(--z-brand-1-ink);
  font-weight: 600;
  text-decoration: none;
}

.legal-back:hover { background: var(--z-brand-2); color: var(--z-brand-2-ink); }

.legal-back:focus-visible {
  outline: 3px solid var(--z-focus);
  outline-offset: 2px;
}

/* The retention table on the privacy policy. Scrolls inside its own frame on a
   phone rather than pushing the page sideways — a legal page that scrolls
   horizontally is a legal page nobody finishes reading. */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--z-space-4) 0;
  display: block;
  overflow-x: auto;
}

.legal-table th,
.legal-table td {
  padding: var(--z-space-3);
  text-align: left;
  border-bottom: 1px solid var(--z-border);
  vertical-align: top;
}

.legal-table th {
  font-size: var(--z-text-sm);
  color: var(--z-ink-400);
  white-space: nowrap;
}

.legal-table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------- a moldura do site nas legais

   As duas páginas passaram a carregar `styles.css` e `landing.css` para vestir
   o mesmo cabeçalho, o mesmo rodapé e o mesmo fundo da landing. O que segue são
   só os ajustes de encaixe: `legal.css` carrega por último e vence onde as duas
   folhas dizem coisas diferentes sobre o mesmo elemento. */

/* `body` vira coluna com rodapé no fim, como no resto do site. A regra de
   `body` no topo deste arquivo é anterior a isso e não declara display. */
.legal-page {
  display: flex;
  flex-direction: column;
  /* `100dvh` depois de `100vh`, pelo mesmo motivo de `styles.css`: no celular
     `100vh` é a janela com a barra do navegador já recolhida, e reservar essa
     altura numa página curta inventa uma rolagem que não leva a nada. */
  min-height: 100vh;
  min-height: 100dvh;
}

/* O cartão flutua sobre a aurora em vez de tapá-la com branco chapado — é o
   mesmo vidro dos cartões da landing, com opacidade mais alta porque aqui
   embaixo existe texto corrido e legibilidade ganha de profundidade. */
.legal-page .legal-wrap {
  flex: 1;
  width: 100%;
  padding-block: var(--z-space-7);
}

.legal-page .legal-card {
  background: color-mix(in srgb, var(--z-surface-0) 92%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px -40px color-mix(in srgb, var(--z-ink-900) 70%, transparent);
}

/* O título da página legal usa o mesmo degradê de marca do herói. É a mesma
   página do mesmo produto, e era essa a queixa. */
.legal-page .legal-card h1 {
  background: linear-gradient(100deg,
    var(--z-cat-saude), var(--z-cat-seguranca) 38%,
    var(--z-cat-ambiente) 68%, var(--z-cat-qualidade));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* O `.legal-back` continua existindo no fim do texto; o cabeçalho é a saída
   principal e este é o atalho de quem terminou de ler. */
.legal-page .legal-back { margin-top: var(--z-space-6); }