/* =========================================================
   ALHADDAD SHRED LAB — legal.css
   Terms & privacy page (legal.html). Shares tokens, fonts and
   the language toggle with styles.css.
   ========================================================= */
.legal-page { background: var(--bg); }

/* ---------- Top bar (same shape as the package page) ---------- */
.legal-topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--nav-bg-solid);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.legal-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
.legal-topbar__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: .9rem; color: var(--ink-3);
  transition: color .2s ease;
}
.legal-topbar__back:hover { color: var(--orange); }
.legal-topbar__back svg { width: 18px; height: 18px; }
html[dir="rtl"] .legal-topbar__back svg { transform: scaleX(-1); }
.legal-topbar__logo img { height: 30px; width: auto; display: block; }

/* ---------- Article ---------- */
.legal { max-width: 760px; padding-top: clamp(28px, 6vw, 56px); padding-bottom: clamp(40px, 8vw, 80px); }
.legal h1 {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: clamp(1.7rem, 5.5vw, 2.4rem); line-height: 1.25; margin-top: 8px;
}
.legal__meta { margin-top: 8px; color: var(--ink-4); font-size: .9rem; }
.legal__intro { margin-top: 18px; color: var(--ink-2); font-size: 1.02rem; line-height: 1.8; }
.legal h2 {
  font-family: var(--font-display); font-weight: 700; color: var(--orange);
  font-size: clamp(1.25rem, 4vw, 1.5rem); margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line);
}
.legal h3 { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.08rem; margin-top: 26px; }
.legal p, .legal li { color: var(--ink-2); font-size: .98rem; line-height: 1.8; }
.legal p { margin-top: 10px; }
.legal ul { margin-top: 10px; display: grid; gap: 6px; padding-inline-start: 22px; list-style: disc; }
.legal li::marker { color: var(--orange); }
.legal a { color: var(--orange); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--ink); }

/* ---------- Footer ---------- */
.legal-footer { border-top: 1px solid var(--line); padding: 24px 0 36px; text-align: center; color: var(--ink-4); font-size: .88rem; }
.legal-footer p + p { margin-top: 6px; }
.legal-footer a { color: var(--ink-2); font-weight: 700; }
.legal-footer a:hover { color: var(--orange); }