/* ============================================================
   Tiempo — /privacy-policy and /terms-of-service
   The two pages shared 79-82% of their CSS with the rest of the
   site; this is the remainder. They differed from each other by
   exactly six lines (terms styled links, privacy did not) — both
   now get the styled version.
   ============================================================ */

/* These pages predate the shared base: they run a cream document with
   near-black ink and no prose line-height, where base.css sets a warm
   brown at 1.85. Restated here so the migration is a visual no-op. */
html, body {
  background-color: var(--crema);
  color: var(--media);
  line-height: normal;
  min-height: 100vh;
}
html { background-color: var(--media); }

.legal-main { background-color: var(--crema); }

.legal-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 88px 24px 120px;
}

.legal-title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--clockwork);
  margin-bottom: var(--s-14);
}

.legal-section + .legal-section { margin-top: 44px; }

.legal-section h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 1.5rem;
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--clockwork);
  margin-bottom: var(--s-4);
}

.legal-section p {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--clockwork);
  margin-bottom: var(--s-4);
}
.legal-section p:last-child { margin-bottom: 0; }

.legal-section a {
  color: var(--clockwork);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-section a:hover { opacity: 0.75; }

.legal-back-wrap {
  margin-top: var(--s-18);
  display: flex;
  justify-content: center;
}

.legal-back-cta {
  display: inline-block;
  background-color: var(--clockwork);
  color: var(--crema);
  padding: 12px 28px;
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-family: var(--font-body);
  text-decoration: none;
  letter-spacing: var(--ls-wide);
  transition: transform var(--dur-2) ease;
}
.legal-back-cta:hover { transform: scale(1.04); }

@media (max-width: 767px) {
  .legal-wrap { padding: var(--s-14) 20px var(--s-20); }
  .legal-title { margin-bottom: var(--s-10); }
}

@media (hover: none) {
  .legal-back-cta:hover { transform: none; }
}