/* Catchly — legal pages.
   Shared by /privacy.html, /terms.html, /data-deletion.html and their /cn/
   counterparts. Deliberately one stylesheet, not three inline blocks: before
   this the three legal pages each had their own look — an old green palette on
   privacy, a plain warm-paper style on terms, the old bilingual lockup on data
   deletion — none of which matched the site they hang off.

   Tokens are the Warm Craft half of the main site's palette. There is no
   time-of-day switch here on purpose: a policy page should look the same to
   the person reading it at 9am and the person reading it at 3pm, and it is
   often the page someone screenshots. */

:root {
  --paper: #FBF7EF;
  --cream: #F1E9DA;
  --ink:   #2A2219;
  --ink-2: #4A3C2C;
  --muted: #7A6B58;
  --rule:  #E3D7C1;
  --brand: #8A6A45;
  --accent-2: #A8814F;
  /* Same reasoning as industry.css: --accent-2 is decoration, --accent-ink is
     the text-safe version of it, and --brand-ink darkens the link colour the
     last step it needed to clear 4.5:1 on the --soft ground. */
  --accent-ink: #7D5F3C;
  --brand-ink: #7D5B36;
  --soft:  #F6EFE2;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC";
}
html[lang^="zh"] {
  --font-display: 'Fraunces', var(--cjk), Georgia, serif;
  --font-body: 'DM Sans', var(--cjk), -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 760px; margin-inline: auto; padding: 0 22px 96px; }

/* Header — the same lockup as the main site so this reads as the same company */
.legal-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0; border-bottom: 1px solid var(--rule); margin-bottom: 40px;
  flex-wrap: wrap;
}
.legal-brand { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink); }
.legal-brand:hover { text-decoration: none; }
.legal-brand .c {
  font-family: var(--font-display); font-weight: 800; font-size: 24px;
  letter-spacing: -0.02em; line-height: 1;
}
.legal-brand .s { font-size: 13px; color: var(--muted); white-space: nowrap; }
.legal-actions { display: flex; align-items: center; gap: 8px; }
.legal-actions a {
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 999px; padding: 8px 14px;
  white-space: nowrap;
}
.legal-actions a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); text-decoration: none; }

.kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 10px;
}
html[lang^="zh"] .kicker { letter-spacing: 0.1em; }

h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 5vw, 44px); line-height: 1.12; letter-spacing: -0.02em;
  margin: 0 0 10px;
}
html[lang^="zh"] h1 { letter-spacing: 0; }

.meta {
  font-size: 13px; color: var(--muted); margin: 0 0 34px;
  padding-bottom: 18px; border-bottom: 1px solid var(--rule);
}

.card {
  background: var(--soft); border: 1px solid var(--rule); border-radius: 16px;
  padding: 30px 28px;
}
h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  letter-spacing: -0.01em; margin: 34px 0 8px; color: var(--ink);
}
html[lang^="zh"] h2 { letter-spacing: 0; }
.card > h2:first-child { margin-top: 0; }
p, li { color: var(--ink-2); margin: 0 0 12px; }
ul { padding-left: 20px; margin: 0 0 12px; }
li { margin-bottom: 6px; }
strong { color: var(--ink); font-weight: 600; }

.note {
  margin-top: 28px; padding: 16px 18px; border-radius: 12px;
  background: var(--cream); border: 1px solid var(--rule);
  font-size: 14px; color: var(--ink-2);
}

.contact { margin-top: 12px; font-size: 15px; }
.contact div { margin-bottom: 4px; }

footer.legal-foot {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--rule);
  font-size: 14px; color: var(--muted);
  display: flex; gap: 18px; flex-wrap: wrap;
}

@media (max-width: 480px) {
  .wrap { padding: 0 18px 72px; }
  .legal-nav { padding: 18px 0; margin-bottom: 30px; }
  .card { padding: 24px 20px; border-radius: 14px; }
  .legal-brand .s { display: none; }
}