/* Study Chinese — shared styling for legal pages (privacy, data deletion).
   Reuses the design tokens, nav, brand, buttons, and footer from styles.css;
   only the long-form prose layout lives here. */

.legal-main { padding-top: clamp(96px, 14vw, 132px); }

.legal-hero { padding-bottom: clamp(24px, 5vw, 44px); }
.legal-hero .hero-label { margin-bottom: 14px; }
.legal-hero h1 {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.2rem);
  max-width: 18ch;
}
.legal-updated {
  margin-top: 16px; color: var(--muted); font-weight: 600; font-size: .95rem;
}

/* Language blocks: Indonesian shows by default (matches html lang="id"); JS
   swaps to the stored preference and removes the flash by gating on data-lang-ready. */
[data-lang-content] { display: none; }
[data-lang-content="id"] { display: block; }
html[data-lang-ready] [data-lang-content] { display: none; }
html[data-lang-ready] [data-lang-content].is-active { display: block; }

.legal {
  max-width: 760px;
  padding-bottom: clamp(64px, 10vw, 120px);
  font-size: 1.04rem;
  color: var(--ink2);
}
.legal > section { margin-top: clamp(34px, 5vw, 48px); }
.legal > section:first-child { margin-top: clamp(8px, 2vw, 16px); }

.legal h2 {
  font-size: clamp(1.3rem, 1rem + 1vw, 1.6rem);
  color: var(--ink);
  margin-bottom: 14px;
}
.legal h2 .legal-num {
  color: var(--coral-deep); font-variant-numeric: tabular-nums; margin-right: .5ch;
}
.legal h3 {
  font-family: var(--f-display); font-weight: 600;
  font-size: 1.06rem; color: var(--ink); margin: 22px 0 8px;
}
.legal p { margin-bottom: 14px; }
.legal p:last-child { margin-bottom: 0; }

.legal ul { list-style: none; margin: 8px 0 14px; padding: 0; }
.legal li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
}
.legal li::before {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--coral); transform: translateY(-50%);
}
.legal li strong { color: var(--ink); font-weight: 700; }

.legal a:not(.btn) {
  color: var(--coral-deep); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 2px; text-decoration-color: var(--coral-soft);
  transition: text-decoration-color .2s var(--ease-out);
}
.legal a:not(.btn):hover { text-decoration-color: var(--coral); }

/* Callout for the key action (how to request deletion) */
.legal-call {
  margin: 22px 0; padding: clamp(20px, 3vw, 28px);
  background: var(--surface); border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow);
}
.legal-call h3 { margin-top: 0; }
.legal-call .btn { margin-top: 14px; }

.legal-table {
  width: 100%; border-collapse: collapse; margin: 8px 0 14px;
  font-size: .98rem;
}
.legal-table th, .legal-table td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.legal-table th {
  font-family: var(--f-display); font-weight: 600; color: var(--ink);
  background: var(--surface);
}
.legal-table tr:last-child td { border-bottom: 0; }

.legal-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-weight: 600; color: var(--coral-deep);
}
.legal-back .ic { transform: rotate(180deg); }