/* ══ TERMS & PRIVACY ═══════════════════════════════════════════════
   A calm reading page: short hero, a plain-language summary, numbered
   sections, and a sticky contents list that follows the reader. */

.lg-hero { padding: var(--sp-16) 0 var(--sp-10); background: var(--gradient-hero); }
.lg-hero__inner { max-width: 820px; }
.lg-hero__title { margin: 0 0 var(--sp-3); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--color-text); }
html[lang="ar"] .lg-hero__title { letter-spacing: 0; }
.lg-hero__intro { max-width: 60ch; margin: 0 0 var(--sp-5); font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--color-text-secondary); }
.lg-hero__meta { margin: 0; font-size: var(--fs-sm); color: var(--color-text-light); }
.lg-hero__meta a { color: var(--color-primary); font-weight: var(--fw-semibold); }

.lg { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--sp-12); align-items: start; padding-top: var(--sp-10); padding-bottom: var(--sp-20); }
.lg-toc { position: sticky; top: calc(var(--navbar-height) + var(--sp-6)); }
.lg-toc__title { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-text-light); }
.lg-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lg-toc a { display: flex; align-items: center; gap: var(--sp-3); padding: 7px var(--sp-3); border-radius: var(--radius-md); font-size: var(--fs-sm); color: var(--color-text-secondary); text-decoration: none; transition: color 0.2s, background 0.25s; }
.lg-toc a span { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; color: var(--color-text-light); background: var(--color-background-alt); transition: background 0.25s, color 0.25s; }
.lg-toc a:hover { color: var(--color-primary); }
.lg-toc a[aria-current="true"] { background: var(--color-primary-bg); color: var(--color-text); font-weight: var(--fw-semibold); }
.lg-toc a[aria-current="true"] span { background: var(--color-accent); color: #fff; }

.lg-body { max-width: 760px; }
.lg-summary { margin-bottom: var(--sp-10); padding: var(--sp-6) var(--sp-8); border-radius: var(--radius-2xl); background: var(--color-surface); border: 1px solid var(--color-border-light); box-shadow: 0 20px 40px -30px rgba(15, 45, 75, 0.3); }
.lg-summary__title { margin: 0 0 var(--sp-4); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--color-text); }
.lg-summary ul { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.lg-summary li { position: relative; padding-inline-start: 30px; line-height: 1.7; color: var(--color-text); }
.lg-summary li::before { content: ''; position: absolute; top: 0.35em; inset-inline-start: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent-bg); }
.lg-summary li::after { content: ''; position: absolute; top: calc(0.35em + 5px); left: 5px; width: 8px; height: 4px; border-left: 2px solid var(--color-accent-text); border-bottom: 2px solid var(--color-accent-text); transform: rotate(-45deg); }
[dir="rtl"] .lg-summary li::after { left: auto; right: 5px; }

.lg-body section { padding: var(--sp-8) 0; border-top: 1px solid var(--color-border-light); scroll-margin-top: calc(var(--navbar-height) + var(--sp-6)); }
.lg-body section:first-of-type { border-top: 0; padding-top: 0; }
.lg-body h2 { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4); font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--color-text); }
.lg-body h2 span { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary-bg); color: var(--color-primary); font-size: var(--fs-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.lg-body p, .lg-body li { font-size: var(--fs-base); line-height: 1.9; color: var(--color-text-secondary); }
.lg-body p { margin: 0 0 var(--sp-3); }
.lg-body ul { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding-inline-start: var(--sp-5); }
.lg-body li::marker { color: var(--color-accent); }
.lg-body strong { color: var(--color-text); font-weight: var(--fw-semibold); }
.lg-body a { color: var(--color-primary); font-weight: var(--fw-medium); text-underline-offset: 3px; }

.lg-contact { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-6); padding: var(--sp-6) var(--sp-8); border-radius: var(--radius-2xl); background: var(--gradient-dark); color: #fff; }
.lg-contact h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-lg); color: #fff; }
.lg-contact p { margin: 0; color: rgba(255, 255, 255, 0.75); }
.lg-body a.lg-contact__btn { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 48px; padding: 0 var(--sp-6); border-radius: var(--radius-full); background: #25D366; color: #052E16; font-weight: var(--fw-semibold); text-decoration: none; transition: transform 0.2s, box-shadow 0.25s; }   /* dark text: white on this green is ~2:1 */
.lg-contact__btn svg { width: 20px; height: 20px; }
.lg-body a.lg-contact__btn:hover { color: #052E16; transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(37, 211, 102, 0.6); }

@media (prefers-reduced-motion: no-preference) {
  .lg-summary { animation: lg-rise 0.6s cubic-bezier(.22, .8, .24, 1) 0.1s both; }
}
@keyframes lg-rise { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 960px) {
  .lg { grid-template-columns: 1fr; gap: var(--sp-6); padding-top: var(--sp-6); }
  .lg-toc { position: static; padding: var(--sp-5); border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid var(--color-border-light); }
  .lg-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-4); }
}
@media (max-width: 560px) {
  .lg-hero { padding: var(--sp-10) 0 var(--sp-6); }
  .lg-toc ol { grid-template-columns: 1fr; }
  .lg-summary, .lg-contact { padding: var(--sp-5); }
  .lg-contact__btn { width: 100%; justify-content: center; }
}