/* site.css — MNTAD landing prototype (DRAFT in /root/landing-work/draft/site, not deployed).
   Every value is transcribed from the repository; proof: /root/landing-work/tokens-check.txt
   and `check-tokens.sh` (no hex/rgb, oklch only, color-mix percentages from the repo).
   Light theme = app/globals.css :root (colours :189-:228, radius :220 + :107-:113). */

@font-face{font-family:"Alexandria";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/alexandria-var-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E2-08FF,U+200C-200E,U+2500-25FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/alexandria-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:light;
  --bg:oklch(1 0 0);                              /* globals.css:189 */
  --fg:oklch(0.145 0 0);                          /* :190 */
  --card:oklch(1 0 0);                            /* :191 */
  --card-fg:oklch(0.145 0 0);                     /* :192 */
  --brand:oklch(0.704 0.14 182.503);              /* :195 */
  --brand-fg:oklch(0.145 0 0);                    /* :196 */
  --surface-2:oklch(0.97 0 0);                    /* :197 */
  --surface-soft:oklch(0.97 0 0);                 /* :199 */
  --fg-muted:oklch(0.556 0 0);                    /* :200 */
  --live:oklch(0.596 0.145 163.225);              /* :205 */
  --soon:oklch(0.666 0.179 58.318);               /* :211 */
  --line:oklch(0.922 0 0);                        /* :212 */
  --focus:oklch(0.704 0.14 182.503);              /* :214 */
  --r:0.625rem;                                   /* :220 */
  --r-lg:var(--r); --r-xl:calc(var(--r) * 1.4); --r-4xl:calc(var(--r) * 2.6); --r-full:9999px;
  --s-sm:0.5rem; --s-md:1rem; --s-lg:1.5rem; --s-xl:2rem; --s-2xl:3rem; --s-3xl:4rem;  /* tokens.ts:8-14 */
  --mu-surface:color-mix(in oklab,var(--fg) 5%,var(--bg));        /* mntad-ui.css:71 */
  --mu-surface-2:color-mix(in oklab,var(--fg) 9%,var(--bg));      /* :72 */
  --mu-border:color-mix(in oklab,var(--fg) 18%,var(--bg));        /* :80 */
  --mu-brand-soft:color-mix(in oklab,var(--brand) 14%,var(--bg));
  --mu-fg-muted:color-mix(in oklab,var(--fg) 68%,var(--bg));   /* mntad-ui.css:81 */ /* :82 */
  --font-sans:"Alexandria",ui-sans-serif,system-ui,sans-serif;    /* fonts.ts:41-47 / globals:12 */
}

*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--font-sans);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-size:1rem;line-height:1.5}
/* Arabic: the app resets tracking for RTL (globals.css:799-800) — we simply never declare it. */

h1,h2,h3{margin:0;font-weight:700;line-height:1.27}          /* weight, not family: globals.css:24 */
h1{font-size:2.25rem}
h2{font-size:1.875rem;line-height:1.25}
h3{font-size:1.25rem;line-height:1.375;font-weight:500}       /* card title recipe: card.tsx:41 */
@media (min-width:768px){h1{font-size:3rem}h2{font-size:2.25rem}}
p{margin:0}
.lead{font-size:1.125rem;line-height:1.625;color:var(--mu-fg-muted)}
/* measured: --mu-fg-muted (color-mix fg 68% / bg, mntad-ui.css:81) = 8.45:1 on white and
   7.75:1 on surface-soft, where --fg-muted measured 4.74 / 4.35 (W2 §D light-theme failures). */
a{color:var(--fg);text-underline-offset:.18em}
a:hover{text-decoration-color:var(--brand)}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--fg);outline-offset:2px}  /* tokens-check §F rule 3 */

.container{margin-inline:auto;min-width:0;padding-inline:1rem;max-width:80rem}   /* tokens.ts:193 */
@media (min-width:768px){.container{padding-inline:1.5rem}}
@media (min-width:1024px){.container{padding-inline:2rem}}
.section{padding-block:4rem}                                   /* layoutRhythm.section.md :158 */
@media (min-width:768px){.section{padding-block:6rem}}
.section--soft{background:var(--surface-soft)}
.stack{display:flex;flex-direction:column;gap:var(--s-lg)}
.stack--sm{gap:var(--s-md)}
.grid{display:grid;gap:var(--s-lg)}
@media (min-width:768px){.grid--2{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(3,1fr)}}

.skip{position:absolute;inset-inline-start:-100%}
.skip:focus{inset-inline-start:1rem;top:1rem;background:var(--brand);color:var(--brand-fg);
  padding:.5rem 1rem;border-radius:var(--r-lg);z-index:1}

/* header */
.site-header{position:sticky;top:0;background:var(--bg);
  border-bottom:1px solid var(--line);z-index:2}
.site-header__inner{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem var(--s-md);
  min-height:3.5rem;padding-block:.5rem;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none}
.brand svg{width:1.25rem;height:1.25rem;color:var(--brand)}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem var(--s-md);font-size:.875rem}
.site-nav a{display:inline-flex;align-items:center;min-height:2.25rem}
.lang-switch{display:inline-flex;gap:.25rem;border:1px solid var(--line);border-radius:var(--r-full);padding:.125rem}
.lang-switch a{display:inline-flex;align-items:center;min-height:2rem;padding:.25rem .5rem;
  border-radius:var(--r-full);text-decoration:none;font-size:.8125rem}
.lang-switch a[aria-current="true"]{background:var(--mu-brand-soft);font-weight:700}

/* button — recipe: components/ui/button.tsx:7 + :11 + :27 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;
  border:1px solid transparent;background-clip:padding-box;border-radius:var(--r-lg);
  padding-inline:1.25rem;min-height:2rem;font-size:.875rem;font-weight:500;
  white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .15s,transform .05s}
.btn--primary{background:var(--brand);color:var(--brand-fg)}
.btn--primary:hover{background:color-mix(in oklab,var(--brand) 80%,transparent)}
.btn:active{transform:translateY(1px)}
.btn--ghost{border-color:var(--line);background:var(--bg);color:var(--fg)}
.btn--ghost:hover{background:var(--mu-surface)}
@media (pointer:coarse){.btn{min-height:3rem}
  .site-nav a,.lang-switch a{min-height:2.75rem}}  /* 44px on touch (WCAG 2.5.8 target size) */                 /* 48px floor, gated: globals.css:432,455 */

/* card — recipe: components/ui/card.tsx:15 (ring, not shadow) */
.card{display:flex;flex-direction:column;gap:var(--s-md);border-radius:var(--r-xl);
  background:var(--card);color:var(--card-fg);padding:var(--s-md);font-size:.9375rem;
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--fg) 10%,transparent)}
.card__title{font-size:1rem;line-height:1.375;font-weight:500}
.card__muted{color:var(--fg-muted)}

/* badge — recipe: components/ui/badge.tsx:8 (solid token bg + --fg text, see tokens-check §F) */
.badge{display:inline-flex;align-items:center;height:1.25rem;padding-inline:.5rem;
  border:1px solid transparent;border-radius:var(--r-4xl);font-size:.75rem;font-weight:500;white-space:nowrap}
.badge--soon{background:var(--soon);color:var(--fg)}
.badge--live{background:var(--live);color:var(--fg)}

/* lists & steps */
.ticks li{display:flex;gap:.625rem;align-items:flex-start;padding-block:.25rem}
.ticks svg{flex:none;width:1.125rem;height:1.125rem;margin-top:.2rem;color:var(--brand)}
.steps{counter-reset:s}
.steps li{display:flex;gap:var(--s-md);align-items:flex-start;padding-block:var(--s-sm)}
.steps li::before{counter-increment:s;content:counter(s);flex:none;width:2rem;height:2rem;
  display:grid;place-items:center;border-radius:var(--r-full);background:var(--mu-brand-soft);
  color:var(--fg);font-weight:700;font-size:.875rem}
.kinds li{border-radius:var(--r-xl);background:var(--card);padding:var(--s-md);
  box-shadow:inset 0 0 0 1px var(--mu-border)}
.kicker{font-size:.875rem;font-weight:700;color:var(--fg)}

/* hero */
.hero{padding-block:5rem}
@media (min-width:768px){.hero{padding-block:7rem}}
.hero__inner{max-width:44rem}
.hero__note{font-size:.875rem;color:var(--fg-muted)}

/* faq — works with JS off */
details{border-bottom:1px solid var(--line);padding-block:var(--s-md)}
summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:var(--s-md)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--brand);font-weight:700}
details[open] summary::after{content:"–"}
details p{margin-top:var(--s-sm);color:var(--fg-muted)}

/* footer */
.site-footer{border-top:1px solid var(--line);padding-block:var(--s-3xl);font-size:.875rem}
.site-footer ul{display:flex;flex-wrap:wrap;gap:var(--s-lg)}
.site-footer .muted{color:var(--fg-muted);margin-top:var(--s-md)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- mock: a small HTML stand-in for the product UI, built from the same tokens.
   No screenshots are available that are free of personal data, and no invented numbers
   appear here — labels are the app's own Arabic UI strings, values are em-dashes. ----- */
.mock{border-radius:var(--r-xl);background:var(--card);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--mu-border)}
.mock__bar{display:flex;align-items:center;gap:.5rem;padding:.625rem var(--s-md);
  background:var(--mu-surface);border-bottom:1px solid var(--mu-border);font-weight:700;font-size:.875rem}
.mock__dot{width:.75rem;height:.75rem;border-radius:var(--r-full);background:var(--brand);flex:none}
.mock__body{display:grid;grid-template-columns:9rem 1fr;gap:var(--s-sm);padding:var(--s-sm)}
.mock__body--single{grid-template-columns:1fr}
.mock__side{display:flex;flex-direction:column;gap:.25rem;font-size:.8125rem;color:var(--fg-muted)}
.mock__side li{padding:.375rem .5rem;border-radius:var(--r-lg)}
.mock__side .is-on{background:var(--mu-brand-soft);color:var(--fg);font-weight:700}
.mock__pane{display:flex;flex-direction:column;gap:.5rem;background:var(--bg);
  border-radius:var(--r-lg);padding:var(--s-md)}
.mock__title{font-weight:700;font-size:.9375rem}
.mock__row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  border-radius:var(--r-lg);padding:.5rem .625rem;box-shadow:inset 0 0 0 1px var(--mu-border);font-size:.875rem}
.mock__row2{display:flex;align-items:center;gap:.5rem;font-size:.8125rem}
.mock__field{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.8125rem;color:var(--fg-muted)}
.mock__input{min-width:0;flex:1;text-align:start;border-radius:var(--r-md);padding:.375rem .5rem;
  background:var(--bg);box-shadow:inset 0 0 0 1px var(--mu-border);color:var(--fg);
  font-size:.8125rem;overflow-wrap:anywhere}
.mock__hint{font-size:.8125rem;color:var(--fg-muted)}
@media (max-width:767px){.mock__body{grid-template-columns:1fr}.mock__side{flex-direction:row;flex-wrap:wrap}}

/* ---------- dark theme: the SAME rule the application uses -------------------------
   app/[lang]/layout.tsx:163,205-209  <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false}>
   deployed bootstrap decoded: ("class","theme","dark",null,["light","dark"],null,false,true)
   → class on <html>, storage key "theme", default dark, system preference IGNORED,
     and `documentElement.style.colorScheme` set inline. Reproduced verbatim in the page script.
   Values below are app/globals.css `.dark` (:239-:275) — see tokens-check.txt §A. */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}  /* body class "antialiased" */
.dark{
  --bg:oklch(0.17 0.006 250);            /* globals.css:240 */
  --fg:oklch(0.96 0 0);                  /* :241 */
  --card:oklch(0.21 0.006 250);          /* :242 */
  --card-fg:oklch(0.96 0 0);             /* :243 */
  --brand:oklch(0.704 0.14 182.503);     /* :246 (same teal as light) */
  --brand-fg:oklch(0.12 0 0);            /* :247 */
  --surface-2:oklch(0.269 0.005 250);    /* :248 */
  --surface-soft:oklch(0.25 0.005 250);  /* :250 */
  --fg-muted:oklch(0.708 0 0);           /* :251 */
  --live:oklch(0.765 0.177 163.223);     /* :256 */
  --soon:oklch(0.828 0.189 84.429);      /* :259 */
  --line:oklch(1 0 0 / 10%);             /* :260 */
  --focus:oklch(0.704 0.14 182.503);     /* :262 */
  --mu-surface:color-mix(in oklab,var(--fg) 5%,var(--bg));
  --mu-surface-2:color-mix(in oklab,var(--fg) 9%,var(--bg));
  --mu-border:color-mix(in oklab,var(--fg) 18%,var(--bg));
  --mu-brand-soft:color-mix(in oklab,var(--brand) 14%,var(--bg));
}
/* In dark, badges keep the app's own convention: coloured surface, foreground text.
   Contrast re-measured for the dark pair (see tokens-check §F / contrast.py). */
.dark .badge--soon,.dark .badge--live{color:oklch(0.145 0 0)}
.dark .btn--ghost{background:transparent}
.dark :focus-visible{outline-color:var(--fg)}

/* icon button — components/ui/button.tsx:28 (`icon: "size-8"`) */
.btn--icon{width:2rem;min-height:2rem;padding-inline:0;gap:0}
.btn--icon svg{width:1rem;height:1rem}
/* the toggle shows one of two glyphs, decided by the same class the app uses */
.icon-moon{display:none}
.dark .icon-sun{display:none}
.dark .icon-moon{display:inline}

/* ≥1280px: the display scale steps to text-6xl (lib/design/tokens.ts:119 display.xl). */
@media (min-width:1280px){h1{font-size:3.75rem;line-height:1.05}}

/* ---------- new copy-surge blocks (no new colours: every value reuses the tokens above) ----- */
.pain{display:grid;gap:var(--s-md)}
@media (min-width:768px){.pain{grid-template-columns:repeat(2,1fr)}}
.pain li{border-radius:var(--r-xl);background:var(--card);padding:var(--s-md);font-size:.9375rem;
  box-shadow:inset 0 0 0 1px var(--mu-border)}
.qline{font-size:1.25rem;line-height:1.375;font-weight:700}
.contrast{display:grid;gap:var(--s-lg)}
@media (min-width:768px){.contrast{grid-template-columns:repeat(2,1fr)}}
.contrast .card{gap:.5rem}
.contrast .card__title{font-size:1rem}
.story{max-width:44rem;display:flex;flex-direction:column;gap:var(--s-md);font-size:1.125rem;line-height:1.625}
.story p{margin:0}
.story .is-key{font-weight:700}