/* ===========================================================================
   mkt.css — the marketing site's ONE chrome.

   Every page on datara.sa (home, FAQ, changelog, and the six legal documents
   in two languages) draws the same header, the same footer, the same buttons
   and the same palette from here.

   WHY THIS FILE EXISTS. Until 2026-08-02 each page carried its own copy of the
   tokens and the chrome inside a <style> block, and they had drifted into SIX
   different header link sets across NINE pages: the changelog still linked to
   a `#pricing` section deleted three days earlier, the legal pages had no
   theme button at all, and the home page's footer offered neither the terms
   nor the deletion page. None of that is visible from inside any one file —
   which is exactly why it happened.

   A page's own <style> block now holds ONLY what is unique to that page.
   Anything that appears on more than one page belongs here.

   IT IS SERVED FROM THE MARKETING BUNDLE ONLY. The `app` hosting target
   publishes the repository root, so this file also sits at
   app.datara.sa/mkt.css — harmless (nothing there links it) but worth knowing.
   =========================================================================== */

  /* ==== Datara identity — Glass & Wood (marketing) ==== */
  :root{
    --brand:#F83808; --brand-deep:#C82C05;
    /* Deepened so WHITE clears AA across the whole span (4.52:1 → 6.38:1); the
       old #FC6636 start measured 2.96:1. Same hue, lower lightness. The dark
       block below keeps the BRIGHT pair and flips the ink instead — a fill has
       to contrast with the page as a shape AND with its own text, and on
       charcoal these deep stops read 2.86:1 against the page. Mirrors the app's
       --p1/--p2/--on-grad exactly; tests/theme-parity.js compares the two. */
    --p1:#DD3803; --p2:#B82404; --on-grad:#FFFFFF;
    --grad:linear-gradient(135deg,var(--p1),var(--p2));
    --ink:#232019; --muted:#5D574C; --faint:#8B8478;
    --paper:#F6F2EB; --soft:#FBF9F4; --panel:#FFFFFF;
    --line:#E7E0D4; --tint:rgba(248,56,8,.08); --tint-2:rgba(248,56,8,.14);
    --glass:rgba(255,255,255,.72); --glass-brd:rgba(35,32,25,.08);
    --shadow:0 18px 48px rgba(35,32,25,.10);
    --r-sm:12px; --r-md:18px; --r-lg:26px;
    --wall:radial-gradient(900px 460px at 85% -6%,rgba(252,102,54,.16),transparent 62%),
           radial-gradient(700px 380px at -8% 30%,rgba(222,46,5,.08),transparent 60%),
           radial-gradient(600px 320px at 55% 108%,rgba(252,102,54,.10),transparent 65%);
  }
  html[data-theme="dark"]{
    --brand:#FF6A3C; --brand-deep:#FF5220;
    --p1:#FF6A3C; --p2:#FF5220; --on-grad:#16110D;
    --ink:#F2EDE6; --muted:#B5AC9E; --faint:#8B8478;
    --paper:#16110D; --soft:#1C1712; --panel:#221C16;
    --line:#332B22; --tint:rgba(255,106,60,.12); --tint-2:rgba(255,106,60,.2);
    --glass:rgba(24,19,14,.72); --glass-brd:rgba(255,255,255,.08);
    --shadow:0 18px 48px rgba(0,0,0,.45);
    --wall:radial-gradient(900px 460px at 85% -6%,rgba(252,102,54,.14),transparent 62%),
           radial-gradient(700px 380px at -8% 30%,rgba(222,46,5,.10),transparent 60%),
           radial-gradient(600px 320px at 55% 108%,rgba(252,102,54,.08),transparent 65%);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:'Tajawal','Poppins',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  html[dir="ltr"] body{font-family:'Poppins','Tajawal',system-ui,sans-serif}
  body::before{content:"";position:fixed;inset:0;background:var(--wall);pointer-events:none;z-index:0}
  body>*{position:relative;z-index:1}
  a{color:inherit;text-decoration:none}
  img{max-width:100%}
  .wrap{max-width:1140px;margin:0 auto;padding:0 22px}
  .num{font-family:'Poppins','Tajawal',sans-serif}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:1rem;padding:.8em 1.7em;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;white-space:nowrap;font-family:inherit}
  .btn:hover{transform:translateY(-2px)}
  .btn-primary{background:var(--grad);color:var(--on-grad);box-shadow:0 10px 26px rgba(222,46,5,.32)}
  .btn-primary:hover{box-shadow:0 14px 34px rgba(222,46,5,.4)}
  .btn-outline{background:transparent;color:var(--brand);border-color:var(--brand)}
  .btn-outline:hover{background:var(--tint)}
  .btn-soft{background:var(--tint);color:var(--brand)}
  .btn-soft:hover{background:var(--tint-2)}

  /* ---- Header ---- */
  header.site{position:sticky;top:0;z-index:40;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--glass-brd)}
  header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:12px}
  .logo{display:flex;align-items:center}
  .logo img{height:30px;display:block}
  .logo .lg-dark{display:none}
  html[data-theme="dark"] .logo .lg-light{display:none}
  html[data-theme="dark"] .logo .lg-dark{display:block}
  .nav-links{display:flex;align-items:center;gap:20px}
  .nav-links a{color:var(--muted);font-weight:600;font-size:.95rem;transition:color .15s}
  .nav-links a:hover{color:var(--brand)}
  .hdr-actions{display:flex;align-items:center;gap:10px}
  .icon-btn{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:color .15s,border-color .15s}
  .icon-btn:hover{color:var(--brand);border-color:var(--brand)}
  .icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .icon-btn .moon{display:none}
  html[data-theme="dark"] .icon-btn .sun{display:none}
  html[data-theme="dark"] .icon-btn .moon{display:block}
  .lang-btn{min-width:44px;height:38px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-weight:700;font-size:.85rem;cursor:pointer;font-family:'Poppins','Tajawal',sans-serif;transition:color .15s,border-color .15s}
  .lang-btn:hover{color:var(--brand);border-color:var(--brand)}
  .hdr-cta{padding:.55em 1.3em;font-size:.92rem}
  .hdr-login{font-weight:700;color:var(--ink);font-size:.95rem}
  .hdr-login:hover{color:var(--brand)}
  .menu-btn{display:none}
  @media(max-width:920px){
    .nav-links,.hdr-login{display:none}
    .menu-btn{display:grid}
  }
  /* Mobile drawer */
  .m-menu{position:fixed;inset:66px 0 auto 0;z-index:39;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--glass-brd);padding:12px 22px 20px;display:none}
  .m-menu.open{display:block}
  .m-menu a{display:block;padding:12px 4px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line);font-size:1.02rem}
  .m-menu a:last-child{border-bottom:0}
  .m-menu .btn{width:100%;margin-top:12px}
  footer.site{padding:52px 0 34px;border-top:1px solid var(--line);background:var(--soft)}
  /* Brand + THREE columns since 2026-08-02: the legal documents got a column of
     their own, and with the old `1.4fr 1fr 1fr` the fourth child silently
     wrapped onto a second row. */
  .f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
  @media(max-width:900px){.f-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.f-grid{grid-template-columns:1fr}}
  .f-brand img{height:28px;margin-bottom:12px}
  .f-brand .lg-dark{display:none}
  html[data-theme="dark"] .f-brand .lg-light{display:none}
  html[data-theme="dark"] .f-brand .lg-dark{display:block}
  .f-brand p{color:var(--muted);font-size:.92rem;max-width:320px}
  .f-col b{display:block;font-weight:800;margin-bottom:12px;font-size:.95rem}
  .f-col a{display:block;color:var(--muted);font-size:.92rem;padding:5px 0;transition:color .15s}
  .f-col a:hover{color:var(--brand)}
  .copy{border-top:1px solid var(--line);margin-top:34px;padding-top:20px;font-size:.86rem;color:var(--faint);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

  /* ---- Language switch -------------------------------------------------------
     A LINK, not a button: it changes which document you are reading, and the
     URL must change with it. The home page used to swap 130 text nodes in place
     from localStorage — one URL for two languages — so Google only ever indexed
     the Arabic, and a reader could not send anyone the English page. */
  .lang-sw{display:inline-grid;place-items:center;min-width:44px;height:38px;padding:0 .8em;
    border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted);
    font-weight:700;font-size:.85rem;transition:color .15s,border-color .15s}
  .lang-sw:hover{color:var(--brand);border-color:var(--brand)}

  /* The logo swap, unscoped. welcome.html scoped these under .logo/.f-brand and
     the legal pages used a bare img.lg-*; one rule now serves both, so a new
     page cannot get a dark logo on a light page by forgetting a wrapper. */
  .lg-dark{display:none}
  html[data-theme="dark"] .lg-light{display:none}
  html[data-theme="dark"] .lg-dark{display:block}

  /* Long-form documents (the legal pages) breathe wider than the home page. */
  .doc{max-width:76ch;margin:0 auto;line-height:1.85}
  .doc-narrow{max-width:72ch}

  /* Kept for the legal pages, which were authored against --radius before the
     r-* scale existed. Its own value rather than an alias to --r-md (18px):
     aliasing would silently restyle every card on those pages by 2px. */
  :root{--radius:16px}