/* ══════════════════════════════════════════════════════════════════════════
   Legal pages (/privacypolicy, /termscondition, /refund_policy, /usage-policy)
   — one design on the shared landing system (2026-10-05, owner: «نفس
   النظام… ابدع»). Loaded after home.css (hm-*). Scoped to .lg. Gold leads in
   both themes; no glows; logical properties (RTL/LTR); every animation stops
   under reduced motion and on print. One document per page: no TOC, rail,
   progress bar, accordion, switcher or dates (owner, 2026-09-23/24).
   ══════════════════════════════════════════════════════════════════════════ */
.lg{ --lg-a:var(--em-gold); --lg-ink:var(--em-gold-ink); --lg-soft:color-mix(in srgb,var(--em-gold) 12%,transparent);
     --lg-card:var(--em-surface); --lg-card-2:var(--em-surface-2,var(--em-surface)); --lg-line:var(--em-border);
     --lg-good:var(--em-good); --lg-bad:#e5484d; color:var(--em-text); }

/* ── hero: the title + this document's emblem ── */
.lg-hero{ padding-block:clamp(48px,6vw,96px) clamp(28px,4vw,56px); }
.lg-hero__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr); gap:clamp(28px,5vw,72px); align-items:center; }
@media (max-width:900px){ .lg-hero__grid{ grid-template-columns:minmax(0,1fr); } }
.lg-title{ margin:0; font-size:clamp(33px,4.64vw,66px); font-weight:800; line-height:1.1; letter-spacing:-.02em; text-wrap:balance; }
.lg-title .hm-w{ animation:hm-rise .9s cubic-bezier(.2,.8,.2,1) backwards; }
.lg-title .hm-gold .hm-w{ animation-delay:.15s; }
.lg-lead{ max-width:56ch; margin:20px 0 0; font-size:clamp(14px,1.24vw,16.5px); line-height:1.85; color:var(--em-muted); animation:hm-rise .9s .25s cubic-bezier(.2,.8,.2,1) backwards; }

.lg-emb{ position:relative; margin:0; min-height:260px; display:grid; place-items:center; padding:28px; border-radius:30px;
  background:var(--lg-card); border:1px solid var(--lg-line); overflow:hidden; animation:hm-rise .9s .3s cubic-bezier(.2,.8,.2,1) backwards; }
.lg-emb::before{ content:''; position:absolute; inset-inline:28px; inset-block-start:-1px; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent, var(--lg-a), transparent); }
@media (max-width:900px){ .lg-emb{ min-height:220px; max-width:520px; } }

/* privacy — a shield draws itself; your data sits masked and locked */
.lg--privacy .lg-emb{ grid-template-columns:auto minmax(0,1fr); gap:22px; }
.lg-shield{ width:96px; height:108px; }
.lg-shield svg{ width:100%; height:100%; overflow:visible; }
.lg-shield__p{ fill:var(--lg-soft); stroke:var(--lg-a); stroke-width:2.5; stroke-linejoin:round; stroke-dasharray:200; stroke-dashoffset:200; animation:lg-draw 1.4s .4s ease-out forwards; }
.lg-shield__c{ fill:none; stroke:var(--lg-a); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:lg-draw .6s 1.6s ease-out forwards; }
@keyframes lg-draw{ to{ stroke-dashoffset:0; } }
.lg-rows{ list-style:none; margin:0; padding:0; display:grid; gap:10px; min-width:0; }
.lg-rows li{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; font-size:13.5px; font-weight:700; background:var(--lg-card-2); border:1px solid var(--lg-line);
  animation:lg-mask 7s ease-in-out infinite; }
.lg-rows li:nth-child(2){ animation-delay:.5s; } .lg-rows li:nth-child(3){ animation-delay:1s; }
.lg-rows svg{ width:16px; height:16px; flex:none; color:var(--em-muted); }
.lg-rows span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lg-rows .lg-rows__lock{ color:var(--lg-good); }
@keyframes lg-mask{ 0%,12%{ border-color:var(--lg-line); } 20%,60%{ border-color:color-mix(in srgb,var(--lg-good) 55%,var(--lg-line)); } 70%,100%{ border-color:var(--lg-line); } }

/* terms — the lines write in, a gold signature draws, «تمت الموافقة» */
.lg-sheet{ position:relative; width:min(100%,300px); display:grid; gap:12px; padding:24px 22px 64px; border-radius:18px; background:var(--lg-card-2); border:1px solid var(--lg-line); }
.lg-sheet__l{ height:9px; border-radius:6px; background:var(--lg-line); transform-origin:0 50%; animation:lg-line 8s ease-in-out infinite; }
[dir=rtl] .lg-sheet__l{ transform-origin:100% 50%; }
.lg-sheet__l--s{ width:62%; }
.lg-sheet__l:nth-child(2){ animation-delay:.15s; } .lg-sheet__l:nth-child(3){ animation-delay:.3s; } .lg-sheet__l:nth-child(4){ animation-delay:.45s; } .lg-sheet__l:nth-child(5){ animation-delay:.6s; }
@keyframes lg-line{ 0%{ transform:scaleX(0); } 10%,92%{ transform:none; } 100%{ transform:scaleX(0); } }
.lg-sign{ position:absolute; inset-inline-start:18px; inset-block-end:14px; width:150px; height:44px; overflow:visible; }
.lg-sign path{ fill:none; stroke:var(--lg-a); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:320; stroke-dashoffset:320; animation:lg-sign 8s ease-in-out infinite; }
@keyframes lg-sign{ 0%,14%{ stroke-dashoffset:320; } 38%,92%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:320; } }
.lg-ok{ position:absolute; inset-inline-end:14px; inset-block-end:16px; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:99px;
  font-size:12.5px; font-weight:800; color:var(--success-foreground); background:var(--lg-good); animation:lg-pop 8s cubic-bezier(.2,.9,.3,1.4) infinite; }
.lg-ok svg{ width:13px; height:13px; }
@keyframes lg-pop{ 0%,40%{ opacity:0; transform:scale(.6); } 46%,92%{ opacity:1; transform:none; } 100%{ opacity:0; transform:scale(.6); } }

/* refund — a receipt prints, then the stamp lands */
.lg-receipt{ position:relative; width:min(100%,240px); height:210px; overflow:hidden; }
.lg-receipt__paper{ position:absolute; inset-inline:10px; inset-block-start:0; display:grid; gap:10px; padding:20px 18px 26px; background:var(--lg-card-2); border:1px solid var(--lg-line);
  border-radius:12px 12px 4px 4px; animation:lg-print 7s ease-in-out infinite; }
.lg-receipt__paper::after{ content:''; position:absolute; inset-inline:0; inset-block-end:-8px; height:10px;
  background:radial-gradient(circle at 6px 0, transparent 6px, var(--lg-card-2) 6.5px) 0 0/12px 10px repeat-x; }
.lg-receipt__paper b{ font-size:13.5px; text-align:center; letter-spacing:.06em; }
.lg-receipt__paper i{ height:7px; border-radius:4px; background:var(--lg-line); }
.lg-receipt__s{ width:60%; }
.lg-receipt__tot{ display:flex; justify-content:space-between; padding-top:10px; border-top:1px dashed var(--lg-line); font-size:13.5px; font-weight:800; }
@keyframes lg-print{ 0%{ transform:translateY(-105%); } 25%,90%{ transform:none; } 100%{ transform:translateY(-105%); } }
.lg-stamp{ position:absolute; white-space:nowrap; inset-block-end:62px; inset-inline-start:50%; padding:6px 14px; border:3px solid var(--lg-good); border-radius:10px; font-size:14.5px; font-weight:800;
  color:var(--lg-good); background:color-mix(in srgb,var(--lg-card) 85%,transparent); transform:translateX(-50%) rotate(-12deg); animation:lg-stamp 7s cubic-bezier(.2,.9,.3,1.5) infinite; }
[dir=rtl] .lg-stamp{ transform:translateX(50%) rotate(12deg); }
@keyframes lg-stamp{ 0%,34%{ opacity:0; scale:1.8; } 40%,88%{ opacity:1; scale:1; } 96%,100%{ opacity:0; scale:1; } }

/* usage — allowed / not-allowed rules tick in */
.lg-rules{ list-style:none; margin:0; padding:0; width:min(100%,320px); display:grid; gap:12px; }
.lg-rules li{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:var(--lg-card-2); border:1px solid var(--lg-line); }
.lg-rules li > span{ width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:50%; color:#fff; animation:lg-tick 6s cubic-bezier(.2,.9,.3,1.5) infinite; }
.lg-rules li > span svg{ width:15px; height:15px; }
.lg-rules .is-yes > span{ background:var(--lg-good); } .lg-rules .is-no > span{ background:var(--lg-bad); }
.lg-rules .is-no{ border-color:color-mix(in srgb,var(--lg-bad) 35%,var(--lg-line)); }
.lg-rules li i{ flex:1; height:8px; border-radius:5px; background:var(--lg-line); }
.lg-rules .lg-rules__s{ flex:0 0 55%; }
.lg-rules li:nth-child(2) > span{ animation-delay:.35s; } .lg-rules li:nth-child(3) > span{ animation-delay:.7s; } .lg-rules li:nth-child(4) > span{ animation-delay:1.05s; }
@keyframes lg-tick{ 0%,6%{ transform:scale(0); } 14%,90%{ transform:none; } 100%{ transform:scale(0); } }

/* ── the document ── */
.lg-body{ padding-block:0 clamp(56px,8vw,112px); }
.lg-doc{ max-width:880px; margin-inline:auto; padding:clamp(24px,4vw,56px); border-radius:30px; background:var(--lg-card); border:1px solid var(--lg-line); }
.lg-prose{ font-size:14.5px; line-height:2; color:var(--em-text); }
html[dir="ltr"] .lg-prose{ font-size:14px; line-height:1.85; }
.lg-prose > *:first-child{ margin-block-start:0; }
.lg-prose p{ margin:0 0 16px; color:var(--em-text-2, var(--em-text)); }
.lg-prose h2{ position:relative; margin:44px 0 14px; padding-inline-start:18px; font-size:clamp(17.5px,1.9vw,22.5px); font-weight:800; line-height:1.4; scroll-margin-top:calc(var(--em-nav-h,72px) + 20px); }
.lg-prose h2::before{ content:''; position:absolute; inset-inline-start:0; inset-block:.3em; width:4px; border-radius:4px; background:var(--lg-a); }
.lg-prose > h2:first-child{ margin-top:0; }
.lg-prose h3{ margin:28px 0 10px; font-size:15.5px; font-weight:800; line-height:1.5; scroll-margin-top:calc(var(--em-nav-h,72px) + 20px); }
.lg-prose h4{ margin:20px 0 8px; font-size:14.5px; font-weight:800; }
.lg-prose a{ color:var(--lg-a); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.lg-prose strong, .lg-prose b{ font-weight:800; color:var(--em-text); }
.lg-prose ul, .lg-prose ol{ margin:0 0 18px; padding-inline-start:26px; }
.lg-prose li{ margin-block-end:8px; color:var(--em-text-2, var(--em-text)); }
.lg-prose li::marker{ color:var(--lg-a); font-weight:800; }
.lg-prose blockquote{ margin:0 0 18px; padding:14px 18px; border-inline-start:4px solid var(--lg-a); border-radius:12px; background:var(--lg-card-2); }
.lg-prose hr{ margin:32px 0; border:0; border-block-start:1px dashed var(--lg-line); }
.lg-prose table{ width:100%; margin:0 0 18px; border-collapse:collapse; font-size:14px; }
.lg-prose th, .lg-prose td{ padding:10px 12px; text-align:start; border-block-end:1px solid var(--lg-line); }
.lg-prose th{ background:var(--lg-card-2); font-weight:800; }
.lg-prose img{ max-width:100%; height:auto; border-radius:14px; }

/* ── contents rail (owner, 2026-10-05): sticky on the start side ── */
main.lp-page{ overflow:clip; }   /* overflow:hidden on <main> would kill position:sticky */
.lg-layout{ display:grid; grid-template-columns:290px minmax(0,1fr); gap:clamp(20px,3vw,36px); align-items:start; max-width:1260px; }
.lg-layout .lg-doc{ max-width:none; margin:0; }
.lg-toc{ position:sticky; top:calc(var(--em-nav-h,72px) + 20px); }
.lg-toc__box{ border-radius:24px; background:var(--lg-card); border:1px solid var(--lg-line); overflow:hidden; }
.lg-toc__head{ display:flex; align-items:center; gap:10px; padding:16px 18px; cursor:pointer; list-style:none; font-size:14px; font-weight:800; border-block-end:1px solid var(--lg-line); }
.lg-toc__head::-webkit-details-marker{ display:none; }
.lg-toc__ico{ width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:var(--lg-ink); background:var(--lg-a); }
.lg-toc__ico svg{ width:16px; height:16px; }
.lg-toc__n{ margin-inline-start:auto; padding:2px 9px; border-radius:99px; font-size:12px; font-weight:800; color:var(--lg-a); background:var(--lg-soft); }
.lg-toc__chev{ width:16px; height:16px; color:var(--em-muted); transition:transform .3s; }
.lg-toc__box[open] .lg-toc__chev{ transform:rotate(180deg); }
.lg-toc__list{ position:relative; list-style:none; margin:0; padding:10px; display:grid; gap:2px;
  max-height:calc(100vh - var(--em-nav-h,72px) - 200px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--lg-line) transparent; }
.lg-toc__list a{ position:relative; display:flex; align-items:flex-start; gap:10px; padding:8px 10px; border-radius:12px; text-decoration:none; font-size:13.5px; line-height:1.55;
  color:var(--em-text-2, var(--em-muted)); transition:background-color .25s, color .25s; }
.lg-toc__list a:hover{ color:var(--em-text); background:var(--lg-card-2); }
.lg-toc__no{ min-width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:8px; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--em-muted); background:var(--lg-card-2); transition:background-color .25s, color .25s; }
.lg-toc__t{ flex:1; min-width:0; }
.lg-toc__list a.is-current{ color:var(--em-text); font-weight:800; background:var(--lg-soft); }
.lg-toc__list a.is-current .lg-toc__no{ color:var(--lg-ink); background:var(--lg-a); }
.lg-toc__list a.is-current::before{ content:''; position:absolute; inset-inline-start:-10px; inset-block:8px; width:3px; border-radius:3px; background:var(--lg-a); }
.lg-toc__list a.is-done .lg-toc__no{ color:var(--lg-a); }
.lg-toc__top{ display:flex; align-items:center; justify-content:center; gap:6px; padding:12px; font-size:13px; font-weight:800; text-decoration:none; color:var(--em-muted); border-block-start:1px solid var(--lg-line); }
.lg-toc__top svg{ width:14px; height:14px; }
.lg-toc__top:hover{ color:var(--lg-a); }
.lg-prose h3{ scroll-margin-top:calc(var(--em-nav-h,72px) + 20px); }
@media (max-width:980px){
  .lg-layout{ grid-template-columns:minmax(0,1fr); }
  .lg-toc{ position:static; }
  .lg-toc__list{ max-height:none; }
}
@media (min-width:981px){ .lg-toc__head{ cursor:default; } .lg-toc__chev{ display:none; } }

/* the closing line: who to ask */
.lg-close{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:36px; padding:18px 20px; border-radius:20px;
  border:1px solid color-mix(in srgb,var(--lg-a) 40%,var(--lg-line)); background:linear-gradient(120deg, color-mix(in srgb,var(--lg-a) 9%,var(--lg-card)), var(--lg-card) 65%); }
.lg-close__ico{ width:48px; height:48px; flex:none; display:grid; place-items:center; border-radius:15px; color:var(--lg-ink); background:var(--lg-a); }
.lg-close__ico svg{ width:22px; height:22px; }
.lg-close__t{ flex:1; min-width:180px; font-size:14px; font-weight:800; }
.lg-close__btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:14px; font-size:14px; font-weight:800; text-decoration:none;
  color:var(--lg-ink); background:var(--lg-a); transition:transform .2s; }
.lg-close__btn:hover{ transform:translateY(-2px); }
.lg-close__btn svg{ width:16px; height:16px; }
[dir=rtl] .lg-close__btn svg{ transform:scaleX(-1); }
.lg-empty{ display:grid; justify-items:center; gap:12px; padding-block:24px; text-align:center; }
.lg-empty h2{ margin:6px 0 0; font-size:18.5px; font-weight:800; }
.lg-empty p{ max-width:52ch; margin:0 0 6px; font-size:14.5px; line-height:1.8; color:var(--em-muted); }

@media (max-width:560px){ .lg--privacy .lg-emb{ grid-template-columns:minmax(0,1fr); justify-items:center; } .lg-rows{ width:100%; } }
@media (prefers-reduced-motion: reduce){
  .lg *, .lg *::before, .lg *::after{ animation:none !important; transition:none !important; }
  .lg-shield__p, .lg-shield__c, .lg-sign path{ stroke-dashoffset:0; } .lg-ok, .lg-stamp{ opacity:1; }
}
@media print{
  .lg-emb, .lg-close, .lg-toc{ display:none !important; }
  .lg-layout{ grid-template-columns:minmax(0,1fr); }
  .lg-hero__grid{ grid-template-columns:minmax(0,1fr); }
  .lg-doc{ max-width:none; padding:0; border:0; }
}