/* ══════════════════════════════════════════════════════════════════════════
   Mualo — the legal pages: /privacy and /terms. Both are long documents
   rather than posters, so the page scrolls, the two languages run side by
   side, and every section carries the same numbered rule the landing page
   uses for its chapters. One stylesheet serves both, because a second copy
   of it would drift. Header, .duo, .eyebrow and .minifoot come from
   landing.css; palette from tokens.css.
   ══════════════════════════════════════════════════════════════════════ */

.lg-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.lg {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 40px var(--gutter) 0;
  max-width: 1560px; width: 100%;
}

.lg-eyebrow { margin-bottom: 28px; }

/* ── masthead ───────────────────────────────────────────────────────── */

.lg-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.lg-title {
  margin: 0;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(38px, 6.4vw, 92px); line-height: 0.98;
  letter-spacing: -0.045em;
}
.lg-title-ar {
  margin: 0;
  font-family: var(--font-ar); font-weight: 700;
  font-size: clamp(22px, 3vw, 42px); line-height: 1.3;
  color: var(--color-neutral-700);
}

.lg-dates {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 18px; padding-bottom: 14px;
  border-bottom: 2px solid var(--color-divider);
}
.lg-updated {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--color-neutral-600);
}
.lg-updated-ar { font-family: var(--font-ar); font-size: 12px; letter-spacing: 0; text-transform: none; }

/* ── the bilingual body ─────────────────────────────────────────────── */

/* .duo is the landing page's two-language block. Here it holds several
   paragraphs a side, so the spacing between them lives on the container. */
.lg-duo { align-items: start; gap: 40px; }
.lg-duo p + p,
.lg-duo p + .lg-list { margin-top: 14px; }
.lg-duo .duo-en, .lg-duo .duo-ar { max-width: 68ch; }

.lg-intro { margin-top: 30px; }
.lg-lede {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(17px, 1.45vw, 23px); line-height: 1.5;
  letter-spacing: -0.018em; color: var(--color-text);
}
.lg-lede-ar {
  font-family: var(--font-ar); font-weight: 500;
  font-size: clamp(16px, 1.3vw, 20px); line-height: 1.75;
  color: var(--color-neutral-800);
}

/* ── contents ───────────────────────────────────────────────────────── */

.lg-toc {
  margin-top: 40px; padding: 22px 0 4px;
  border-top: 2px solid var(--color-divider);
}
.lg-toc-head {
  display: block; margin-bottom: 16px;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--color-neutral-600);
}
.lg-toc-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 40px;
}
.lg-toc-link {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  color: var(--color-text); border-bottom: 0; text-decoration: none;
}
.lg-toc-link:hover { color: var(--color-accent-700); }
.lg-toc-num { font-size: 11px; letter-spacing: 1px; color: var(--color-neutral-500); }
.lg-toc-link:hover .lg-toc-num { color: var(--color-accent); }

/* ── a section ──────────────────────────────────────────────────────── */

.lg-sec { padding-top: clamp(38px, 5vw, 62px); scroll-margin-top: calc(var(--header-h) + 20px); }

.lg-sec-head {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 20px;
}
.lg-sec-num {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 11px; letter-spacing: 1.4px; color: var(--color-accent);
  white-space: nowrap;
}
.lg-sec-title {
  margin: 0;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(20px, 2.1vw, 30px); line-height: 1.1;
  letter-spacing: -0.03em; white-space: nowrap;
}
.lg-sec-rule { flex: 1; height: 2px; background: var(--color-divider); }
.lg-sec-title-ar {
  font-family: var(--font-ar); font-weight: 700;
  font-size: clamp(16px, 1.5vw, 22px);
  color: var(--color-neutral-700); white-space: nowrap;
}

/* Bullets are set as a hanging list with the same 2px rule as a divider,
   so a run of six of them reads as a table rather than as prose. */
.lg-list { list-style: none; margin: 14px 0 0; padding: 0; }
.lg-item {
  position: relative;
  padding: 10px 0 10px 18px;
  border-top: 2px solid var(--color-neutral-300);
  font-family: var(--font-body); font-size: 15px; line-height: 24px;
  color: var(--color-neutral-700); text-wrap: pretty;
  max-width: 68ch;
}
.lg-item::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 6px; height: 6px; background: var(--color-accent);
}
.lg-item:last-child { border-bottom: 2px solid var(--color-neutral-300); }
.lg-item-ar {
  padding: 10px 18px 10px 0;
  font-family: var(--font-ar); font-size: 15px; line-height: 28px;
  text-align: right;
}
.lg-item-ar::before { left: auto; right: 0; }

/* A section the YAML flags with `strong: true` — the warranty disclaimer and
   the liability cap. Consumer law in several places asks for those to be set
   conspicuously; a tinted panel does that without the shouted capitals a
   contract template would reach for. */
.lg-sec-strong .lg-duo {
  background: var(--color-surface);
  padding: 20px 24px;
  border-top: 2px solid var(--color-text);
}
.lg-sec-strong .duo-en, .lg-sec-strong .duo-ar { color: var(--color-text); font-weight: 500; }

/* ── contact and the language note ──────────────────────────────────── */

.lg-entity {
  margin: 16px 0 0;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 12px; letter-spacing: 1px; color: var(--color-neutral-600);
}

.lg-note {
  margin-top: clamp(40px, 5vw, 64px); padding-top: 20px;
  border-top: 2px solid var(--color-divider);
}
.lg-note-en, .lg-note-ar {
  margin: 0;
  font-size: 12px; line-height: 20px; color: var(--color-neutral-600);
}
.lg-note-en { font-family: var(--font-heading); }
.lg-note-ar { font-family: var(--font-ar); line-height: 24px; text-align: right; }

.lg .minifoot { margin-top: clamp(40px, 6vw, 72px); }

/* ── responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .lg-toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* One column: the 2px rule only reads as a divider between two of them,
     and each section keeps its English and Arabic together. */
  .lg-duo { grid-template-columns: 1fr; gap: 22px; }
  .lg-duo .duo-sep { display: none; }
  .lg { padding-top: 24px; }
  .lg-eyebrow { margin-bottom: 20px; }
  .lg-head { gap: 8px; }
  .lg-sec-head { flex-wrap: wrap; gap: 10px 14px; }
  .lg-sec-rule { display: none; }
  .lg-sec-title, .lg-sec-title-ar { white-space: normal; }
  .lg-toc-list { grid-template-columns: 1fr; }
  .minifoot { gap: 12px; }
}