/* Legal / policy documents (privacy, terms, account deletion).
   Layers on top of style.css — same palette and type scale as the marketing
   site, but tuned for long-form reading rather than a scrolling pitch:
   a measured line length, generous leading, no motion. */

.legal-body {
  background: var(--po);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The marketing nav is fixed and reveals on scroll via main.js. These pages
   don't load main.js (nothing here animates), so the nav sits in flow with
   its scrolled appearance baked in. */
.legal-nav {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 6vw;
  background: rgba(11, 15, 20, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.legal-nav .logo-word { height: 26px; }

.legal-hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 6vw 34px;
}
.legal-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(34px, 6vw, 52px);
  color: var(--ink);
  margin-bottom: 14px;
}
.legal-sub {
  color: var(--ink-dim);
  font-size: 17px;
  line-height: 1.6;
}
.legal-updated {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kowhai-light);
}

.legal-doc {
  flex: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 6vw 80px;
}
.legal-doc section { margin-bottom: 40px; }
.legal-doc h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 23px;
  color: var(--ink);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.legal-doc h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 26px 0 10px;
}
.legal-doc p {
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 14px;
}
.legal-doc ul, .legal-doc ol {
  margin: 0 0 14px 20px;
  padding: 0;
}
.legal-doc li {
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 10px;
  padding-left: 6px;
}
.legal-doc li::marker { color: var(--pounamu-light); }
.legal-doc a {
  color: var(--kowhai-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-doc a:hover { color: var(--kowhai); }
.legal-doc strong { color: var(--ink); font-weight: 600; }

/* Callout for the things a reader must not miss — the grace period, what is
   irreversible. */
.legal-note {
  border-left: 3px solid var(--pounamu-light);
  background: rgba(43, 138, 92, 0.09);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  margin: 24px 0;
}
.legal-note.warn {
  border-left-color: var(--kokowai-light);
  background: rgba(222, 72, 72, 0.09);
}
.legal-note p:last-child { margin-bottom: 0; }

/* Numbered walkthrough for the in-app deletion steps. */
.legal-steps { counter-reset: step; list-style: none; margin-left: 0; }
.legal-steps li {
  position: relative;
  padding-left: 44px;
  margin-bottom: 16px;
}
.legal-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pounamu);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.legal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 40px 6vw 34px;
}
.legal-footer-links {
  max-width: 760px;
  margin: 0 auto 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.legal-footer-links a {
  font-size: 14px;
  color: var(--ink-dim);
}
.legal-footer-links a:hover { color: var(--kowhai-light); }
.legal-footer .footer-bottom { max-width: 760px; margin: 0 auto; }

@media (max-width: 600px) {
  .legal-hero { padding-top: 44px; }
  .legal-doc p, .legal-doc li { font-size: 15px; }
}