/* Moonu on nadelos.com: its legal pages (build/build_applegal.py) and its
   pairing page (build/build_pair.py). Colours are the app's own (Theme.swift,
   dark, as the app shows these pages). Logical properties throughout, so the
   Arabic pages mirror. */
:root {
  color-scheme: dark;
  --bg: #0b1026;
  --bg-lift: #141c3d;
  --surface: rgba(28, 38, 80, .72);
  --hairline: rgba(169, 179, 214, .18);
  --text: #eef0fa;
  --text-secondary: #a9b3d6;
  --primary: #f2c979;
  --on-primary: #1b1405;
  --radius: 18px;
  --font: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
a { color: var(--primary); }

/* Korean breaks between words; Japanese and Chinese break anywhere, strictly */
:lang(ko) { word-break: keep-all; }
:lang(ja), :lang(zh-Hans), :lang(zh-Hant) { line-break: strict; }
:lang(ja) h1, :lang(ja) h2 { word-break: auto-phrase; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- legal pages */
.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }

header.site { display: flex; align-items: center; gap: 12px; padding: 28px 0; }
header.site img { width: 44px; height: 44px; border-radius: 10px; display: block; }
header.site .name { font-size: 20px; font-weight: 700; }
header.site nav { margin-inline-start: auto; display: flex; gap: 20px; }
header.site nav a { color: var(--text-secondary); text-decoration: none; font-size: 15px; }
header.site nav a:hover { color: var(--primary); }

main.legal { padding: 24px 0 72px; }
main.legal h1 { font-size: 32px; line-height: 1.2; margin-bottom: 4px; }
main.legal .date { color: var(--text-secondary); font-size: 14px; margin-bottom: 32px; }
main.legal h2 { font-size: 20px; line-height: 1.3; color: var(--primary); margin: 32px 0 8px; }
main.legal p, main.legal li { color: var(--text-secondary); font-size: 16px; }
main.legal ul + p, main.legal p + p { margin-top: 10px; }
main.legal ul { padding-inline-start: 22px; margin: 8px 0; }
main.legal li + li { margin-top: 6px; }
main.legal strong { color: var(--text); }

footer.site {
  border-top: 1px solid var(--hairline);
  padding: 28px 0 48px;
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
  color: var(--text-secondary); font-size: 14px;
}
footer.site nav { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 20px; }
footer.site a { color: var(--text-secondary); text-decoration: none; }
footer.site a:hover { color: var(--primary); }

@media (max-width: 520px) {
  .wrap { padding: 0 16px; }
  header.site { flex-wrap: wrap; padding: 20px 0; }
  header.site nav { gap: 16px; }
  main.legal h1 { font-size: 28px; }
  footer.site nav { margin-inline-start: 0; }
}

/* ---------------------------------------------------------------- pairing page */
body.pair {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(120% 70% at 50% 0%, var(--bg-lift), var(--bg) 70%) var(--bg);
}
.pair-card { width: 100%; max-width: 560px; padding: 56px 24px 8px; }
.pair-icon {
  width: 96px; height: 96px; border-radius: 22px; display: block; margin-bottom: 28px;
  box-shadow: 0 18px 50px rgba(242, 201, 121, .16);
}
.pair .eyebrow { color: var(--primary); font-size: 14px; font-weight: 600; letter-spacing: .02em; margin-bottom: 8px; }
.pair h1 { font-size: clamp(26px, 6.4vw, 34px); line-height: 1.2; letter-spacing: -.01em; }
.pair .lede { color: var(--text-secondary); font-size: 17px; margin-top: 14px; }
.steps { list-style: none; counter-reset: step; margin-top: 24px; display: grid; gap: 12px; }
.steps li {
  counter-increment: step; position: relative;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding-block: 14px; padding-inline: 58px 16px; font-size: 16px;
}
.steps li::before {
  content: counter(step);
  position: absolute; inset-inline-start: 16px; top: 14px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  font-weight: 700; font-size: 15px; line-height: 28px; text-align: center;
}
.store {
  display: inline-block; margin-top: 20px; padding: 12px 22px; border-radius: 999px;
  background: var(--primary); color: var(--on-primary); font-weight: 700; text-decoration: none;
}
.pair .note { color: var(--text-secondary); font-size: 15px; margin-top: 20px; }
.pair .note.small { font-size: 13px; margin-top: 8px; }
.pair-foot {
  width: 100%; max-width: 560px; margin-top: auto; padding: 32px 24px 40px;
  display: grid; gap: 14px; color: var(--text-secondary); font-size: 14px;
}
.pair-foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.pair-foot a { color: var(--text-secondary); }

/* the language menu: a native <details>, so it opens with no script */
.langs summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--hairline); border-radius: 999px; color: var(--text);
}
.langs summary::-webkit-details-marker { display: none; }
.langs .chev { transition: transform .2s; }
.langs[open] .chev { transform: rotate(180deg); }
.langmenu {
  margin-top: 10px; padding: 10px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
}
.langmenu a { color: var(--text); text-decoration: none; padding: 6px; border-radius: 10px; }
.langmenu a[aria-current] { color: var(--primary); font-weight: 700; }
.fl { margin-inline-end: 6px; }

@media (max-width: 520px) {
  .pair-card { padding: 40px 16px 8px; }
  .pair-foot { padding: 28px 16px 36px; }
}
@media (prefers-reduced-motion: reduce) { .langs .chev { transition: none; } }