/* ---------------------------------------------------------------------------
   legal.css — privacy.html and terms.html

   Both pages linked this file and it was absent from the archive, so the six
   classes below had no styles at all and the legal pages rendered as unstyled
   full-width text. Tokens below reuse the ones declared in styles.css.
---------------------------------------------------------------------------- */

.legal-page {
  background: var(--white);
  padding: calc(var(--nav-h, 78px) + 32px) 0 72px;
}

.legal-page .container {
  width: min(900px, calc(100% - 40px));
  margin-inline: auto;
}

/* Readable measure for long-form legal text. */
.legal-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius, 24px);
  box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 48px);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.75;
}

.legal-wrap h1 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  color: var(--dark);
  margin: 14px 0 6px;
}

.legal-wrap h2 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--green);
  margin: 34px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.legal-wrap h2:first-of-type { border-top: 0; padding-top: 0; }
.legal-wrap h3 { font-size: 1.05rem; color: var(--dark); margin: 22px 0 8px; }
.legal-wrap p,
.legal-wrap li { color: var(--ink); }
.legal-wrap ul,
.legal-wrap ol { padding-left: 1.4em; margin: 10px 0 18px; }
.legal-wrap li { margin: 6px 0; }

.legal-wrap a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;   /* long mailto/URLs must not blow out the layout */
}

.legal-wrap table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: .95rem;
}

.legal-wrap th,
.legal-wrap td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.legal-wrap th { background: var(--green-soft, #eaf8ef); color: var(--dark); }

/* Pulled-out contact / notice box. */
.callout {
  background: var(--green-3, #dff7e8);
  border: 1px solid var(--green-2, #16a34a);
  border-left-width: 4px;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 20px 0;
  color: var(--dark);
  line-height: 1.65;
}

.callout strong { color: var(--dark); }

/* App-store badges in the legal footer. */
.store-badge-apple,
.store-badge-google {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--black, #101412);
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}

.store-badge-apple:hover,
.store-badge-google:hover { opacity: .9; text-decoration: none; }

.apple-logo { width: 18px; height: 18px; flex: 0 0 auto; }

@media (max-width: 720px) {
  .legal-page { padding-top: calc(var(--nav-h, 68px) + 20px); }
  .legal-wrap { padding: 18px 16px; font-size: .97rem; }
  .legal-wrap table { display: block; overflow-x: auto; }
}

@media print {
  .nav, .topbar, .footer, .download-menu { display: none !important; }
  .legal-wrap { box-shadow: none; border: 0; padding: 0; }
}