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

.lg-hero, .lg { text-align: start; }

.lg-hero { padding: var(--sp-16) 0 var(--sp-12); background: var(--gradient-hero); color: var(--color-on-dark); }
/* Hero text lines up with the reading column, not the contents list. */
.lg-hero__inner > * { max-width: 760px; }
@media (min-width: 961px) { .lg-hero__inner { padding-inline-start: calc(var(--container-padding) + 250px + var(--sp-12)); } }
.lg-hero__title { margin: 0 0 var(--sp-3); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: var(--fw-bold); line-height: 1.25; color: var(--color-on-dark); }
.lg-hero__title::after { content: ''; display: block; width: 56px; height: 3px; margin-top: var(--sp-4); border-radius: var(--radius-full); background: var(--gradient-gold); }
.lg-hero__intro { max-width: 60ch; margin: 0 0 var(--sp-5); font-size: 1.125rem; line-height: 1.8; color: var(--color-on-dark-muted); }
.lg-hero__meta { margin: 0; font-size: 0.875rem; color: var(--color-on-dark-muted); }
.lg-hero__meta a { color: var(--brand-gold-light); font-weight: var(--fw-semibold); text-underline-offset: 3px; }

.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 { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); font-size: 0.8125rem; font-weight: var(--fw-semibold); color: var(--color-text-muted); list-style: none; cursor: default; }
.lg-toc__title::-webkit-details-marker { display: none; }
.lg-toc__count { display: none; }
.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-lg); font-size: 0.875rem; color: var(--color-text-secondary); text-decoration: none; transition: color var(--transition-fast), background var(--transition-base); }
.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: 0.6875rem; font-variant-numeric: tabular-nums; color: var(--color-text-muted); background: var(--color-background-alt); transition: background var(--transition-base), color var(--transition-base); }
.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(--brand-navy); color: var(--brand-gold-light); }

.lg-body { min-width: 0; 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); box-shadow: var(--shadow-lg); }
.lg-summary__title { margin: 0 0 var(--sp-4); font-size: 1.125rem; font-weight: var(--fw-bold); 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.8; color: var(--color-text); }
.lg-summary li::before { content: ''; position: absolute; top: 0.4em; inset-inline-start: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-gold-tint); }
/* Checkmark: drawn the same way in both directions (not mirrored). */
.lg-summary li::after { content: ''; position: absolute; top: calc(0.4em + 5px); left: 5px; width: 8px; height: 4px; border-left: 2px solid var(--brand-gold-dark); border-bottom: 2px solid var(--brand-gold-dark); 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); 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: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); font-weight: var(--fw-bold); 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: 0.875rem; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.lg-body p, .lg-body li { font-size: 1rem; 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(--brand-gold-dark); }
.lg-body strong { color: var(--color-text); font-weight: var(--fw-semibold); }
.lg-body a { color: var(--color-primary); font-weight: var(--fw-semibold); text-underline-offset: 3px; }
.lg-body bdi { unicode-bidi: isolate; }

.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-footer); color: var(--color-on-dark); }
.lg-contact h2 { margin: 0 0 var(--sp-1); font-size: 1.125rem; color: var(--color-on-dark); }
.lg-contact p { margin: 0; color: var(--color-on-dark-muted); }
/* Dark text: white on WhatsApp green is about 2:1. */
.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: var(--color-whatsapp); color: #052e16; font-weight: var(--fw-semibold); text-decoration: none; transition: transform var(--transition-fast), box-shadow var(--transition-base); }
.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-hero__inner > * { animation: lg-rise 0.6s cubic-bezier(.22, .8, .24, 1) both; }
  .lg-hero__inner > :nth-child(2) { animation-delay: 0.08s; }
  .lg-hero__inner > :nth-child(3) { animation-delay: 0.16s; }
  .lg-summary { animation: lg-rise 0.6s cubic-bezier(.22, .8, .24, 1) 0.2s 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; border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid var(--color-border); }
  .lg-toc__title { min-height: 52px; margin: 0; padding: 0 var(--sp-5); font-size: 1rem; color: var(--color-text); cursor: pointer; }
  .lg-toc__count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-primary-bg); color: var(--color-primary); font-size: 0.75rem; }
  .lg-toc__title::after { content: ''; width: 8px; height: 8px; margin-inline-start: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--transition-base); }
  .lg-toc[open] .lg-toc__title::after { transform: rotate(-135deg); }
  .lg-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-4); padding: 0 var(--sp-3) var(--sp-4); }
}
@media (max-width: 560px) {
  .lg-hero { padding: var(--sp-10) 0 var(--sp-8); }
  .lg-toc ol { grid-template-columns: 1fr; }
  .lg-toc a { min-height: 44px; }
  .lg-summary, .lg-contact { padding: var(--sp-5); }
  .lg-contact__btn { width: 100%; justify-content: center; }
}