/* ============================================================
   Shell styles for the standalone legal pages (privacy-policy, terms).

   Everything above the "legal page typography" divider is copied
   verbatim out of index.html so the two pages sit on exactly the
   same foundation as the homepage: same variables, same background,
   same fonts, same footer. Nothing below it introduces a new colour,
   a new font, or a new visual component — the prose is built from the
   type scale and the thin red hairline the homepage already uses.

   These pages carry no JavaScript and no motion, so there is nothing
   for prefers-reduced-motion to neutralise.
   ============================================================ */

/* base reset — verbatim from index.html (the 14px body font-size and the
   safe-area root padding are the same foundation the homepage sits on) */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* brand tokens — verbatim from index.html */
:root{
  --bg-black:#0a0708;
  --bg-deep:#1c0709;
  --fg:#f3ece9;
  --fg-dim:#bfa8a4;
  --accent:#e8232f;
  --accent-warm:#ff6a3d;
  --accent-bright:#ff4650;
  --accent-deep:#5c0d12;
  --display:'Oswald',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --ar:'Tajawal',system-ui,sans-serif;
  color-scheme: dark;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;overflow-x:clip;}
body{font-family:var(--body);color:var(--fg);
  background:
    radial-gradient(60vw 50vh at 88% 8%, rgba(232,35,47,.14), transparent 60%),
    radial-gradient(55vw 45vh at 4% 30%, rgba(255,106,61,.09), transparent 60%),
    radial-gradient(50vw 45vh at 92% 68%, rgba(232,35,47,.12), transparent 60%),
    radial-gradient(55vw 50vh at 2% 94%, rgba(255,106,61,.08), transparent 60%),
    var(--bg-black);
  background-attachment:fixed;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;}
p{margin:0;}
.ar{font-family:var(--ar);direction:rtl;unicode-bidi:isolate;}
.section{position:relative;padding:5.5rem 7vw;overflow:hidden;}
.content{position:relative;z-index:1;max-width:1180px;margin:0 auto;}

/* footer — verbatim from index.html */
footer{padding:2.6rem 7vw;text-align:center;color:var(--fg-dim);font-size:.8rem;border-top:1px solid rgba(232,35,47,.14);}

/* ============ legal page typography ============ */

/* masthead: the wordmark alone, in the display face, on the same thin red
   hairline the footer and the section seams use. Deliberately not a nav bar —
   the homepage has no header, so anything more would be a new component. */
.legal-top{padding:1.9rem 7vw;border-bottom:1px solid rgba(232,35,47,.14);}
.legal-wordmark{display:inline-block;font-family:var(--display);font-weight:700;
  font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg);text-decoration:none;transition:color .25s ease;}
.legal-wordmark:hover{color:var(--accent);}

.legal-main{flex:1 0 auto;}
.legal-content{max-width:780px;margin:0 auto;}

.legal-title{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.08;font-weight:700;}
.legal-updated{margin-top:1rem;font-size:.68rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--fg-dim);}
.legal-lede{margin-top:2rem;font-size:1.02rem;line-height:1.7;color:var(--fg);}

/* each clause sits under the same hairline that divides the homepage's
   sections, so the page reads as a stack of seams rather than as cards */
.legal-block{margin-top:2.6rem;padding-top:2.6rem;border-top:1px solid rgba(232,35,47,.14);}
.legal-block h2{font-size:1.08rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg);}
.legal-block p{margin-top:1rem;font-size:.95rem;line-height:1.75;color:var(--fg-dim);}

/* inline links inside prose and in the footer: muted body colour with the
   accent kept to the underline only, so neither block gains a new colour */
.legal-block a, footer a{color:var(--fg-dim);text-decoration:none;
  border-bottom:1px solid rgba(232,35,47,.35);transition:color .25s ease,border-color .25s ease;}
.legal-block a:hover, footer a:hover{color:var(--fg);border-bottom-color:var(--accent);}
.footer-legal{margin-top:.6rem;}

/* focus rings — same ring treatment as the homepage's CTA and social marks */
a:focus-visible{outline:2px solid rgba(232,35,47,.65);outline-offset:4px;}

@media (max-width:820px){
  .section{padding:3.5rem 6vw;}
  .legal-top{padding:1.5rem 6vw;}
  footer{padding:2.2rem 6vw;}
}