/* ==========================================================
   Legal pages (privacy, terms, data deletion)
   Builds on styles.css tokens; long-form reading layout.
   ========================================================== */

.legal-page { background: var(--white); }
.legal-page .site-header {
  position: sticky;
  background: rgba(26, 14, 43, .94);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--on-night-line);
}
.legal-page .header-inner { gap: 1rem; }
.legal-back {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9375rem; font-weight: 500; color: var(--on-night-2); text-decoration: none;
  padding: .45rem .8rem; border-radius: 999px;
}
.legal-back:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.legal-back svg { width: 16px; height: 16px; }
[dir="rtl"] .legal-back svg { transform: scaleX(-1); }

/* hero */
.legal-hero { background: var(--night); color: var(--on-night); padding-top: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.legal-crumb { font-size: .875rem; color: var(--on-night-3); }
.legal-crumb a { color: var(--on-night-2); text-decoration: none; }
.legal-crumb a:hover { color: #fff; }
.legal-hero h1 { margin-top: .75rem; font-size: clamp(2.3rem, 1.5rem + 3vw, 4rem); font-weight: 800; letter-spacing: -.01em; }
html[lang="ar"] .legal-hero h1 { letter-spacing: 0; line-height: 1.3; }
.legal-dates { margin-top: 1rem; color: var(--on-night-2); font-size: .9375rem; }
.legal-dates b { color: var(--on-night); font-weight: 600; }
.legal-tabs { display: flex; gap: .25rem; margin-top: 2.25rem; overflow-x: auto; scrollbar-width: none; }
.legal-tabs::-webkit-scrollbar { display: none; }
.legal-tabs a {
  flex: none; padding: .85rem 1.1rem; border-bottom: 3px solid transparent;
  font-family: var(--f-display); font-weight: 600; font-size: .9688rem;
  color: var(--on-night-2); text-decoration: none; transition: color .2s, border-color .2s;
}
.legal-tabs a:hover { color: #fff; }
.legal-tabs a[aria-current="page"] { color: #fff; border-bottom-color: var(--saffron); }

/* layout */
.legal-layout {
  display: grid; grid-template-columns: 15rem minmax(0, 48rem);
  gap: clamp(2rem, 1rem + 4vw, 5rem); justify-content: start;
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) clamp(4rem, 3rem + 4vw, 7rem);
}
.legal-toc { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; max-height: calc(100vh - var(--header-h) - 3rem); overflow: auto; }
.legal-toc p { font-size: .8125rem; font-weight: 600; color: var(--ink-3); margin-bottom: .6rem; }
.legal-toc a {
  display: block; padding: .38rem .8rem; border-inline-start: 2px solid var(--line);
  font-size: .875rem; line-height: 1.45; color: var(--ink-3); text-decoration: none;
  transition: color .2s, border-color .2s;
}
.legal-toc a:hover { color: var(--ink); }
.legal-toc a.is-active { color: var(--ink); border-inline-start-color: var(--ember); font-weight: 600; }

/* document typography */
.legal-doc { color: var(--ink-2); font-size: 1.0313rem; }
.legal-doc > * + * { margin-top: 1rem; }
.legal-doc .lede { font-size: var(--t-md); color: var(--ink); }
.legal-doc h2 {
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); font-weight: 700; color: var(--ink);
  scroll-margin-top: calc(var(--header-h) + 1.25rem);
}
.legal-doc h3 { margin-top: 1.75rem; font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.legal-doc ul, .legal-doc ol { padding-inline-start: 1.35rem; }
.legal-doc ul { list-style: disc; }
.legal-doc ol { list-style: decimal; }
.legal-doc li + li { margin-top: .45rem; }
.legal-doc li::marker { color: var(--ember); }
.legal-doc b, .legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-doc a { color: var(--ember); text-underline-offset: 3px; }
.legal-doc a:hover { color: var(--ember-hover); }
.legal-doc code { font-family: var(--f-display); font-size: .95em; background: var(--paper); padding: .1em .45em; border-radius: 6px; color: var(--ink); white-space: nowrap; }

.legal-summary { padding: 1.4rem 1.6rem; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); }
.legal-summary h2 { margin: 0 0 .6rem; padding: 0; border: 0; font-size: 1.05rem; }
.legal-summary ul { margin: 0; }

.legal-steps { counter-reset: step; list-style: none !important; padding: 0 !important; display: grid; gap: .9rem; }
.legal-steps > li { counter-increment: step; position: relative; padding: 1.1rem 1.25rem; padding-inline-start: 3.6rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--white); margin: 0 !important; }
.legal-steps > li::before {
  content: counter(step); position: absolute; inset-inline-start: 1.1rem; top: 1.05rem;
  width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--night); color: #fff; font-family: var(--f-display); font-weight: 700; font-size: .875rem;
}
.legal-steps b { display: block; margin-bottom: .2rem; }

.legal-contact { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; padding: 1.25rem 1.5rem; border-radius: var(--r-md); background: var(--paper); }
.legal-contact dt { color: var(--ink-3); font-size: .9375rem; }
.legal-contact dd { color: var(--ink); font-weight: 500; }
.legal-note { font-size: .9375rem; color: var(--ink-3); }

/* footer */
.legal-footer { background: var(--night-deep); color: var(--on-night-2); font-size: .9375rem; }
.legal-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; padding-block: 2.25rem; }
.legal-footer nav ul { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.legal-footer a { text-decoration: none; }
.legal-footer a:hover, .legal-footer a[aria-current="page"] { color: #fff; }
.legal-footer img { width: 190px; }

@media (max-width: 960px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { display: none; }
}
@media (max-width: 640px) {
  .legal-page .brand-name { display: none; }
  .legal-back span { display: none; }
  .legal-contact { grid-template-columns: 1fr; gap: .1rem; }
  .legal-contact dd + dt { margin-top: .6rem; }
}