/* =============================================================================
   legal.css — the five legal pages (privacy · terms · refunds · cookies ·
   accessibility). One stylesheet for all five so a fix lands once.

   Tokens are copied from index-ad.html rather than imported: these pages must
   render standalone from file:// with no build step, exactly like the site.

   ACCESSIBILITY IS THE BRIEF HERE, NOT A PASS AT THE END (WCAG 2.1 AA):
     - body text is --ink / --ink-2 only. --green (3.71:1 on paper) and --amber
       are LARGE-TEXT-OR-DECORATION ONLY; links use --green-deep (4.86:1).
     - --ink-3 is ~3:1 and is used for micro labels beside a visible text
       equivalent, never as the only carrier of meaning.
     - every focusable thing keeps a visible ring; nothing sets outline:none bare.
     - measure caps at 72ch — long legal prose is where line length actually hurts.
     - the whole page is one column below 900px, so 320px and 200% zoom are the
       same layout and neither can scroll sideways.
   ============================================================================= */

:root{
  --paper:#FBFAF7; --paper-2:#F1F4EF; --ink:#0D1310; --ink-2:#525C55; --ink-3:#8A928B;
  --line:#E5E4DB;
  --green:#23974C; --green-deep:#15803D; --sage:#68B57F; --mint:#D0E6D7; --amber:#E6AB29;
  --forest:#071A0F; --forest-2:#0B2415;
  --on-dark:#FFFFFF; --on-dark-2:#DCE8DF; --on-dark-3:#9DB4A5;
  --line-dark:rgba(104,181,127,.22);

  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ar:"IBM Plex Sans Arabic",system-ui,sans-serif;

  --fs-h1:clamp(2.25rem,1.7rem + 2.2vw,3.5rem);
  --fs-h2:clamp(1.35rem,1.2rem + .6vw,1.75rem);
  --fs-h3:clamp(1.05rem,1rem + .25vw,1.2rem);
  --fs-body:clamp(1rem,.97rem + .15vw,1.0625rem);
  --fs-small:.9375rem;
  --fs-micro:.6875rem;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --pill:999px;
  --maxw:1180px;
  --measure:72ch;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{ margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.68;
  font-weight:400; -webkit-font-smoothing:antialiased; }
body.ar{ font-family:var(--ar); line-height:1.95; }

h1,h2,h3{ margin:0; color:var(--ink); letter-spacing:-.02em; }
h1{ font-size:var(--fs-h1); font-weight:600; line-height:1.06; }
h2{ font-size:var(--fs-h2); font-weight:600; line-height:1.25; }
h3{ font-size:var(--fs-h3); font-weight:600; line-height:1.4; }
body.ar h1,body.ar h2,body.ar h3{ font-family:var(--ar); letter-spacing:0; font-weight:500; line-height:1.35; }
p,ul,ol{ margin:0; }
a{ color:var(--green-deep); text-underline-offset:.18em; text-decoration-thickness:.06em; }
a:hover{ color:var(--ink); }
strong{ font-weight:600; color:var(--ink); }
code,.mono{ font-family:var(--mono); font-size:.9em; }
body.ar .ltr,body.ar .mono,body.ar code{ direction:ltr; unicode-bidi:isolate; }

/* one ring, everywhere, and it survives a dark ground */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--green-deep); outline-offset:3px; border-radius:4px; }
.site-foot :where(a,button):focus-visible{ outline-color:var(--sage); }

/* the language mechanism is the site's own, so a choice made on the home page
   carries here through the same localStorage key */
body .ar{ display:none !important; }
body.ar .en{ display:none !important; }
body.ar .ar{ display:revert !important; }

.wrap{ width:min(100% - 2*var(--sp-5),var(--maxw)); margin-inline:auto; }

.skip-link{ position:absolute; inset-inline-start:0; top:0; z-index:1000;
  background:var(--green-deep); color:#fff; padding:var(--sp-3) var(--sp-5);
  text-decoration:none; font-weight:600; transform:translateY(-120%); }
.skip-link:focus{ transform:translateY(0); }

/* ---------- header ---------- */
.site-head{ position:sticky; top:0; z-index:100; background:rgba(251,250,247,.92);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
  width:min(100% - 2*var(--sp-5),var(--maxw)); margin-inline:auto;
  min-height:64px; padding-block:var(--sp-3); }
.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--ink);
  font-weight:700; font-size:1.5rem; letter-spacing:-.02em; }
.brand img{ width:40px; height:40px; }
.nav-links{ display:flex; gap:var(--sp-6); }
.nav-links a{ color:var(--ink-2); text-decoration:none; font-size:var(--fs-small); font-weight:500;
  display:inline-flex; align-items:center; min-height:44px; }
.nav-links a:hover{ color:var(--green-deep); }
.nav-right{ display:flex; align-items:center; gap:var(--sp-4); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:44px; padding:var(--sp-3) var(--sp-5); border-radius:var(--pill);
  font-weight:600; font-size:var(--fs-small); text-decoration:none; border:1px solid transparent;
  transition:transform .18s ease, background .18s ease; }
.btn-green{ background:var(--green-deep); color:#fff; }
.btn-green:hover{ background:var(--ink); color:#fff; transform:translateY(-1px); }
.lang-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:var(--pill); overflow:hidden; }
.lang-toggle button{ min-height:44px; min-width:52px; padding:0 var(--sp-4); border:0; cursor:pointer;
  background:transparent; color:var(--ink-2); font:inherit; font-size:var(--fs-small); font-weight:600; }
.lang-toggle button[aria-pressed="true"]{ background:var(--green-deep); color:#fff; }

/* ---------- page head ---------- */
.page-head{ padding-block:var(--sp-8) var(--sp-6); border-bottom:1px solid var(--line); }
.eyebrow{ font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--green-deep); margin-bottom:var(--sp-4); }
body.ar .eyebrow{ font-family:var(--ar); letter-spacing:0; }
.page-head .lede{ max-width:var(--measure); margin-top:var(--sp-4);
  font-size:clamp(1.05rem,1rem + .4vw,1.3rem); color:var(--ink-2); }
.stamp{ margin-top:var(--sp-5); font-size:var(--fs-small); color:var(--ink-2); }
.stamp span+span{ margin-inline-start:var(--sp-4); }

/* ---------- body layout: prose + a sticky contents rail ---------- */
.legal-body{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-7);
  padding-block:var(--sp-7) var(--sp-9); }
@media (min-width:1000px){
  .legal-body{ grid-template-columns:minmax(0,1fr) 260px; gap:var(--sp-9); align-items:start; }
  .toc{ position:sticky; top:88px; order:2; }
}
.prose{ max-width:var(--measure); }
.prose > * + *{ margin-top:var(--sp-5); }
.prose h2{ margin-top:var(--sp-8); padding-top:var(--sp-5); border-top:1px solid var(--line); }
.prose h2:first-of-type{ margin-top:var(--sp-6); }
.prose h3{ margin-top:var(--sp-6); }
.prose ul,.prose ol{ padding-inline-start:1.35em; }
.prose li+li{ margin-top:var(--sp-3); }
.prose li::marker{ color:var(--sage); }

.callout{ background:var(--mint); border-inline-start:4px solid var(--green-deep);
  border-radius:0 14px 14px 0; padding:var(--sp-5) var(--sp-6); }
body.ar .callout{ border-radius:14px 0 0 14px; }
.callout p+p{ margin-top:var(--sp-3); }

/* an unconfirmed value is LOUD on purpose — a placeholder that reads like copy
   is how a company ships a contract naming nobody */
.ph{ display:inline; font-family:var(--mono); font-size:.86em; font-weight:600;
  background:#FDF3DC; color:#6B4E00; border:1px dashed #C99A16; border-radius:5px;
  padding:1px 6px; white-space:normal; }
.ph::before{ content:"needs owner: "; font-weight:400; color:#8A6A12; }

.toc{ font-size:var(--fs-small); }
.toc h2{ font-size:var(--fs-micro); font-family:var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--sp-4); border:0; padding:0; }
body.ar .toc h2{ font-family:var(--ar); letter-spacing:0; }
.toc ol{ list-style:none; margin:0; padding:0; border-inline-start:2px solid var(--line); }
.toc li{ margin:0; }
.toc a{ display:block; padding:var(--sp-2) var(--sp-4); color:var(--ink-2); text-decoration:none;
  border-inline-start:2px solid transparent; margin-inline-start:-2px; min-height:44px;
  display:flex; align-items:center; }
.toc a:hover{ color:var(--green-deep); border-inline-start-color:var(--sage); }

.ar-note{ margin-top:var(--sp-8); padding:var(--sp-5) var(--sp-6); background:var(--paper-2);
  border:1px solid var(--line); border-radius:14px; font-size:var(--fs-small); color:var(--ink-2); }

/* ---------- footer ---------- */
.site-foot{ background:var(--forest); color:var(--on-dark-2); padding-block:var(--sp-8); }
.site-foot .brand{ color:#fff; }
.foot-top{ display:flex; justify-content:space-between; gap:var(--sp-6); flex-wrap:wrap; }
.foot-nav{ display:flex; gap:var(--sp-6); flex-wrap:wrap; }
.foot-nav a{ color:var(--on-dark-3); text-decoration:none; font-size:var(--fs-small);
  display:inline-flex; align-items:center; min-height:44px; }
.foot-nav a:hover{ color:var(--sage); }
.foot-legal{ margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line-dark);
  display:flex; gap:var(--sp-2) var(--sp-5); flex-wrap:wrap; }
.foot-legal a{ color:var(--on-dark-2); text-decoration:none; font-size:var(--fs-small);
  display:inline-flex; align-items:center; min-height:44px; }
.foot-legal a:hover{ color:var(--sage); text-decoration:underline; }
.foot-legal a[aria-current="page"]{ color:var(--sage); font-weight:600; }
.foot-bottom{ margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--line-dark);
  font-size:var(--fs-small); color:var(--on-dark-3); }

@media (max-width:640px){
  .nav-links{ display:none; }
  .brand{ font-size:1.28rem; gap:10px; }
  .brand img{ width:32px; height:32px; }
  /* At 375 the brand, the CTA and the language toggle together measure ~430px and
     the toggle was pushed off the right edge — caught in the render, not the CSS.
     The toggle stays, because Arabic is first-class here; the CTA goes. A legal
     page is not where a buy button earns its width, and the footer still carries
     every route back to the site. */
  .nav-right .btn{ display:none; }
  .page-head{ padding-block:var(--sp-6) var(--sp-5); }
}