/* نخلتي, shared site styles: type, colour, header, chapters, footer.
   Used by the homepage and the support / privacy / delete-account pages. */
/* Thmanyah (the app's own superfamily, by ثمانية) + Aref Ruqaa for the wordmark only. */
@font-face{font-family:"Thmanyah Serif Display";src:url(fonts/thmanyah-serif-display-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url(fonts/thmanyah-sans-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url(fonts/thmanyah-sans-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nakhlati Wordmark";src:url(fonts/aref-ruqaa-wordmark.woff2) format("woff2");font-weight:700;font-display:block}

/* Night-oasis page with light "parchment" chapters so each section reads on its own.
   Gold is the single accent. Radii: controls pill; cards/tiles 24; chapters 32. */
:root{
  --bg:#07130E; --panel:#0D241B;
  --line:rgba(198,164,92,.14); --line-2:rgba(198,164,92,.32);
  --text:#F1E9D5; --text-2:#CFC6AD; --muted:#98AB9D;
  --gold:#C6A45C; --gold-hi:#E2C885; --ink-on-light:#0B1A13;
  --parch:#F1EAD6; --parch-ink:#0B2A1F; --parch-2:#44564A; --parch-tile:#E6DCC2;
  --display:"Thmanyah Serif Display","Noto Naskh Arabic",serif;
  --body:"Thmanyah Sans","Segoe UI",Tahoma,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::after{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{text-wrap:balance}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%;display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;flex:none;fill:currentColor}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:10px}
.panel.light :focus-visible{outline-color:#0F5132}
.i18n-en{display:none}
html[lang=en] .i18n-ar{display:none}
html[lang=en] .i18n-en{display:inline}
html[lang=en] h1,html[lang=en] h2{letter-spacing:-.015em}
.skip{position:absolute;inset-inline-start:-999px;top:10px;z-index:90;background:var(--text);color:var(--ink-on-light);padding:.5rem 1rem;border-radius:999px}
.skip:focus{inset-inline-start:12px}

/* ── header ─────────────────────────────────────────────── */
.nav{position:fixed;top:0;inset-inline:0;z-index:50;transition:background-color .4s var(--ease),border-color .4s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(7,19,14,.78);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);border-color:var(--line)}
.nav-in{max-width:var(--wrap);margin:auto;height:60px;padding-inline:max(16px,env(safe-area-inset-left));display:flex;align-items:center;gap:16px}
.brand{font-family:"Nakhlati Wordmark",var(--display);font-weight:700;font-size:1.95rem;line-height:1;color:var(--gold-hi);padding-top:4px}
.links{display:none;gap:4px;margin-inline-start:12px}
.links a{color:var(--text-2);font-size:.95rem;padding:.4rem .8rem;border-radius:999px;transition:color .2s,background-color .2s}
.links a:hover{color:var(--text);background:rgba(241,233,213,.06)}
.nav-end{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px}
.lang button{min-width:38px;height:32px;padding:0 .6rem;border:0;border-radius:999px;background:none;color:var(--text-2);font-size:.82rem;font-weight:700}
.lang button.on{background:rgba(198,164,92,.2);color:var(--gold-hi)}
.get{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 1.05rem;border-radius:999px;background:var(--text);color:var(--ink-on-light);font-weight:700;font-size:.9rem;white-space:nowrap;transition:transform .2s var(--ease),background-color .2s}
.get:hover{background:#fff8e6}
.get:active,.store:active,.views button:active{transform:scale(.97)}
.get.lg{height:54px;padding:0 1.7rem;font-size:1rem}
.get.dark{background:var(--parch-ink);color:var(--text)}
.get.dark:hover{background:#0F5132}


/* ── chapters ───────────────────────────────────────────── */
.panel{margin:20px max(12px,calc((100% - var(--wrap)) / 2));border-radius:32px;padding:clamp(48px,8vw,88px) clamp(22px,5vw,72px)}
.panel.light{background:var(--parch);color:var(--parch-ink)}
.panel.deep{background:radial-gradient(90% 80% at 85% 0%,#14513A,transparent 62%),linear-gradient(170deg,#0F382A,#0A2219);border:1px solid var(--line)}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(2.1rem,1.35rem + 3.4vw,3.7rem);line-height:1.18}
.panel.light .h2{color:var(--parch-ink)}
.lead{font-size:clamp(1.06rem,1rem + .35vw,1.25rem);color:var(--text-2);max-width:34ch;margin-top:14px;line-height:1.75}
.panel.light .lead{color:var(--parch-2)}

/* footer */
.foot{border-top:1px solid var(--line);padding:52px 20px calc(36px + env(safe-area-inset-bottom))}
.foot-in{max-width:var(--wrap);margin:auto;display:grid;gap:30px}
.foot .brand{font-size:2.3rem}
.foot .tag{color:var(--muted);font-size:.95rem;margin-top:6px}
.foot h4{font-size:.85rem;color:var(--muted);font-weight:700;margin-bottom:12px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.foot li a{color:var(--text-2);display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.foot li a:hover{color:var(--gold-hi)}
.foot .ic{font-size:18px;color:var(--gold)}
.foot .soc{display:flex;flex-wrap:wrap;gap:10px}
.soc a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--gold-hi);transition:background-color .2s,border-color .2s,transform .2s var(--ease)}
.soc a:hover{background:rgba(198,164,92,.12);border-color:var(--gold)}
.soc a:active{transform:scale(.95)}
.soc .ic{font-size:21px;color:inherit}
.foot .ltr{direction:ltr;unicode-bidi:isolate}
.legal{max-width:var(--wrap);margin:34px auto 0;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}

#page-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:80;transform:translate(-50%,16px);opacity:0;pointer-events:none;white-space:nowrap;padding:12px 20px;border-radius:999px;background:rgba(16,40,31,.96);border:1px solid var(--line-2);color:var(--gold-hi);font-weight:700;font-size:.95rem;transition:opacity .3s,transform .35s var(--ease)}
#page-toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes rv{from{opacity:0;transform:translateY(24px)}}
  }
}

/* ── page header for inner pages (support, privacy, delete-account) ── */
.phero{position:relative;padding:108px 20px 36px;overflow:hidden;isolation:isolate}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 70% at 50% -20%,#103325 0%,transparent 70%)}
.phero-in{max-width:var(--wrap);margin:auto}
.crumb{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.92rem;margin-bottom:22px}
.crumb a{color:var(--text-2);transition:color .2s}
.crumb a:hover{color:var(--gold-hi)}
.crumb .ic{font-size:12px;opacity:.8}
html[lang=en] .crumb .ic{transform:scaleX(-1)}
.emblem{display:block;width:54px;height:54px;margin-bottom:16px}
.phero h1{font-family:var(--display);font-weight:700;font-size:clamp(2.45rem,1.5rem + 4.2vw,4.5rem);line-height:1.15}
.phero .sub{color:var(--text-2);font-size:clamp(1.06rem,1rem + .35vw,1.24rem);max-width:42ch;margin-top:14px;line-height:1.75}
.phero .meta{color:var(--muted);font-size:.92rem;margin-top:14px;line-height:1.7}
.pbody{max-width:var(--wrap);margin:0 auto;padding:8px 12px 72px;display:grid;gap:14px}
.pbody>.panel{margin:0}

/* sub-heading on the dark page */
.sect-h{font-family:var(--display);font-weight:700;font-size:clamp(1.45rem,1.2rem + .9vw,1.95rem);line-height:1.3;margin:30px 4px 2px}
.panel .kept+.sect-h,.panel .sect-h{color:var(--parch-ink);margin:40px 0 0}

/* tappable tiles (contact channels, related pages) */
.tiles{display:grid;gap:12px}
.tl{display:flex;align-items:center;gap:16px;padding:22px 22px;border-radius:24px;background:linear-gradient(180deg,#0F2A20,#0B2018);border:1px solid var(--line);transition:transform .2s var(--ease),border-color .25s,background-color .25s}
.tl:hover{border-color:var(--line-2)}
.tl:active{transform:scale(.98)}
.tl .ci{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:26px;background:rgba(198,164,92,.14);color:var(--gold-hi)}
.tl b{display:block;font-size:1.1rem;line-height:1.35}
.tl .v{display:block;margin-top:2px;color:var(--text-2);font-size:.98rem;direction:ltr;unicode-bidi:isolate;text-align:right}
html[lang=en] .tl .v{text-align:left}
.tl .t2{display:block;margin-top:2px;color:var(--muted);font-size:.95rem;line-height:1.5}
.tl .go{margin-inline-start:auto;flex:none;font-size:20px;color:var(--gold);opacity:.8}
html[lang=en] .tl .go{transform:scaleX(-1)}
.tl.primary{background:var(--text);color:var(--ink-on-light);border-color:transparent}
.tl.primary .ci{background:#0F5132;color:#F2E6B0}
.tl.primary .v{color:rgba(11,26,19,.72)}
.tl.primary .go{color:#0F5132}

/* questions (native disclosure, so it works without script) */
.faq{margin-top:22px}
.faq details{border-top:1px solid rgba(184,134,47,.28)}
.faq details:last-child{border-bottom:1px solid rgba(184,134,47,.28)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:20px 2px;font-family:var(--display);font-weight:700;font-size:clamp(1.12rem,1.05rem + .3vw,1.3rem);line-height:1.4;color:var(--parch-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{margin-inline-start:auto;flex:none;font-size:18px;color:#8A6419;transition:transform .35s var(--ease)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq details p{padding:0 2px 22px;color:var(--parch-2);font-size:1.03rem;line-height:1.9;max-width:62ch}
.faq summary:focus-visible{outline-offset:-2px}

/* account deletion: two ways, then what happens */
.ways{display:grid;gap:12px}
.way{position:relative;padding:26px 24px 24px;border-radius:24px;background:linear-gradient(180deg,#0F2A20,#0B2018);border:1px solid var(--line)}
.way.rec{background:radial-gradient(90% 90% at 90% 0%,#14513A,transparent 65%),linear-gradient(170deg,#0F382A,#0A2219);border-color:var(--line-2)}
.way .n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(198,164,92,.16);color:var(--gold-hi);font-family:var(--display);font-weight:700;font-size:1.3rem;margin-bottom:14px}
.way h2{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,1.15rem + .6vw,1.6rem);line-height:1.35}
.badge{display:inline-block;margin-top:8px;padding:.2rem .7rem;border-radius:999px;background:var(--gold);color:#17120A;font-size:.78rem;font-weight:700}
.way p{color:var(--text-2);margin-top:12px;line-height:1.85}
.way strong{color:var(--text)}
.steps{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.steps li{display:flex;align-items:center;gap:8px;color:var(--text)}
.steps li span{padding:.45rem .95rem;border-radius:999px;background:rgba(241,233,213,.08);border:1px solid var(--line-2);font-weight:700;font-size:.95rem}
/* the chevron points the way the steps read: left in Arabic, right in English */
.steps li+li::before{content:"";width:7px;height:7px;border-top:1.5px solid var(--gold);border-left:1.5px solid var(--gold);transform:rotate(-45deg)}
html[lang=en] .steps li+li::before{transform:rotate(135deg)}
.way .get{margin-top:18px}
.inline-code{direction:ltr;unicode-bidi:isolate;display:inline-block;padding:.05em .5em;border-radius:8px;background:rgba(241,233,213,.08);border:1px solid var(--line);font-size:.95em}
.timeline{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:0}
.timeline li{position:relative;display:grid;grid-template-columns:28px 1fr;gap:14px;padding-bottom:22px}
.timeline li::before{content:"";grid-row:1;width:14px;height:14px;margin:7px auto 0;border-radius:50%;background:#0F5132;box-shadow:0 0 0 4px rgba(15,81,50,.16)}
.timeline li:last-child::before{background:#8A6419;box-shadow:0 0 0 4px rgba(138,100,25,.16)}
.timeline li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:13px;top:26px;bottom:2px;width:2px;background:rgba(15,81,50,.2)}
.timeline b{display:block;font-family:var(--display);font-weight:700;font-size:1.18rem;color:var(--parch-ink)}
.timeline span{display:block;color:var(--parch-2);margin-top:2px;line-height:1.7}
.kept{display:grid;gap:26px;margin-top:8px}
.kept h3{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,1.15rem + .6vw,1.6rem);color:var(--parch-ink)}
.kept p{color:var(--parch-2);margin-top:8px;line-height:1.9;max-width:62ch}
.kept strong{color:var(--parch-ink)}
.note{color:var(--muted);font-size:.95rem;text-align:center;margin-top:10px}
.note a{color:var(--gold-hi);border-bottom:1px solid rgba(226,200,133,.35)}

/* long-form legal text, set on parchment for comfortable reading */
.doc{background:var(--parch);color:var(--parch-ink);border-radius:32px;padding:clamp(30px,6vw,64px) clamp(22px,5vw,64px);font-size:1.03rem;line-height:1.95;min-width:0}
.doc h2{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,1.18rem + .75vw,1.75rem);line-height:1.35;color:var(--parch-ink);margin:2.1em 0 .55em;scroll-margin-top:72px}
.doc>div>h2:first-child{margin-top:0}
.doc h3{font-size:1.06rem;font-weight:700;margin:1.3em 0 .3em;color:#0F5132}
.doc p{margin:.55em 0}
.doc ul{margin:.5em 0;padding-inline-start:1.3em}
.doc li{margin:.35em 0}
.doc li::marker{color:#8A6419}
.doc strong{color:#0B2A1F}
.doc code{direction:ltr;unicode-bidi:isolate;display:inline-block;background:var(--parch-tile);padding:.02em .45em;border-radius:6px;font-family:var(--body);font-size:.95em}
.doc a{color:#0F5132;text-decoration:underline;text-underline-offset:3px}
/* Contents. Phones: a bar pinned under the header that names the section you're in;
   tap it to open the list over the text. Desktop: a fixed list beside the text. */
.toc{position:sticky;top:64px;z-index:30;border:1px solid var(--line-2);border-radius:20px;background:rgba(9,27,20,.88);-webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px);box-shadow:0 12px 30px -18px rgba(0,0,0,.8)}
.toc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:13px 16px;font-weight:700;color:var(--text);min-height:50px}
.toc summary::-webkit-details-marker{display:none}
.toc summary .ic{flex:none;color:var(--gold);transition:transform .35s var(--ease)}
.toc summary .toc-list{font-size:19px}
.toc summary .toc-caret{margin-inline-start:auto}
.toc[open] summary .toc-caret{transform:rotate(180deg)}
.toc-cur{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.toc:not(.has-cur) .toc-cur{display:none}
/* the label stays for screen readers while the bar shows the section name */
.toc.has-cur .toc-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.toc ol{list-style:none;margin:0;display:grid;gap:2px;position:absolute;top:calc(100% + 8px);inset-inline:0;max-height:min(62vh,520px);overflow:auto;overscroll-behavior:contain;padding:8px;border:1px solid var(--line-2);border-radius:20px;background:#0B2019;box-shadow:0 24px 60px -20px rgba(0,0,0,.85)}
.toc a{display:block;padding:10px 12px;border-radius:12px;color:var(--text-2);font-size:.96rem;line-height:1.45;transition:background-color .2s,color .2s}
.toc a:hover{background:rgba(241,233,213,.06);color:var(--text)}
.toc a.on{color:var(--gold-hi);background:rgba(198,164,92,.12)}
/* only the chosen language's copy of the policy is shown */
html:not([lang=en]) [data-block=en],html[lang=en] [data-block=ar]{display:none !important}

@media (min-width:760px){
  .tiles.two,.ways{grid-template-columns:1fr 1fr}
  .kept{grid-template-columns:1fr 1fr;gap:40px}
}
@media (min-width:1024px){
  .pbody.withtoc{grid-template-columns:290px minmax(0,1fr);align-items:start;column-gap:20px}
  .toc{top:84px;max-height:calc(100vh - 110px);overflow:auto;background:rgba(241,233,213,.03);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-color:var(--line);border-radius:24px;padding:4px 8px}
  .toc summary{cursor:default;padding:14px 12px}
  .toc summary .ic,.toc.has-cur .toc-cur{display:none}
  .toc.has-cur .toc-label{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .toc ol{position:static;max-height:none;overflow:visible;padding:0 4px 12px;border:0;background:none;box-shadow:none}
  .doc h2{scroll-margin-top:14px}
}

@media (min-width:900px){ .links{display:flex} }
@media (min-width:1024px){ .foot-in{grid-template-columns:1.4fr 1fr 1fr} }